/* =========================

   THEME VARS

   ========================= */

/* Dark = default */

:root{

  --max:1180px;

  --navH:72px;

  --navPadX:18px;

  --bg:#07090b;

  --panel:#0d1014;

  --panel2:#0b0f13;

  --text:#ffffff;

  --text-strong:rgba(255,255,255,.92);

  --muted:rgba(255,255,255,.72);

  --muted2:rgba(255,255,255,.52);

  --line:rgba(255,255,255,.10);

  --surface:rgba(255,255,255,.03);

  --surface2:rgba(255,255,255,.06);

  --accent:#5ae2ff;

  --shadow: 0 18px 45px rgba(0,0,0,.55);

  --r:22px;

}

/* Light overrides */

/* =========================

   BASE

   ========================= */

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{

  margin:0;

  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  color:var(--text);

  overflow-x:hidden;

  background:

    radial-gradient(1200px 700px at 20% 10%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),

    radial-gradient(900px 600px at 80% 20%, color-mix(in srgb, var(--text) 6%, transparent), transparent 55%),

    var(--bg);

}

a{ color:inherit; text-decoration:none; }

/* =========================

   NAVBAR

   ========================= */

/* NAVBAR */

.nav{

  position:fixed; inset:0 0 auto 0;

  z-index:120;

  height: var(--navH);

  background: color-mix(in srgb, var(--panel) 78%, transparent); 

  backdrop-filter: blur(10px);

  border-bottom:1px solid var(--line);

}

.nav-inner{

  height:100%;

  max-width:var(--max);

  margin:0 auto;

  padding: 0 18px;

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

}

.brand{ display:flex; align-items:center; gap:10px; min-width:0; }

.brand-logo{ height:50px; width:auto; display:block; }

.dot{

  width:10px; height:10px; border-radius:50%;

  background: var(--accent);

  box-shadow: 0 0 18px rgba(14,165,233,.35);

  flex:0 0 auto;

}

.nav-links{

  display:flex;

  gap:18px;

  font-size:12px;

  text-transform:uppercase;

  letter-spacing:.14em;

  color:var(--muted);

  align-items:center;

}

.nav-links a{

  display:inline-flex;

  align-items:center;

  gap:8px;

  height:44px;

  padding:0 10px;

  line-height:1;

  border-radius:999px;

  transition: .18s ease;

}

.nav-links a:hover{

  background: rgba(14,165,233,.08);

  color: rgba(255,255,255,.92);

}

/* Dealers icon button */

.menuIconLink{

  display:flex;

  align-items:center;

  justify-content:center;

  width:42px;

  height:42px;

  border-radius:50%;

  transition: all .2s ease;

  border:1px solid transparent;

  color: var(--text); 

}

.menuIconSvg{

  display:block;

  width:30px;

  height:30px;

  transform: translateY(1px);

}

.menuIconSvg path{

  fill: currentColor !important;

  stroke: currentColor !important;

}

.menuIconLink:hover{

  transform: translateY(-2px);

  border-color: rgba(14,165,233,.25);

  box-shadow: 0 0 0 5px rgba(14,165,233,.10);

  background: rgba(14,165,233,.06);

  color: var(--accent); 

}

/* Hamburger */

.hamburger{

  width:42px; height:42px;

  border:1px solid var(--line);

  background: var(--surface);

  border-radius:14px;

  display:none;

  align-items:center; justify-content:center;

  cursor:pointer;

  transition:.18s ease;

}

.hamburger:hover{

  border-color: color-mix(in srgb, var(--accent) 35%, transparent);

  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);

}

.hamburger span{

  position:relative;

  width:18px; height:2px;

  background: var(--text);

  display:block;

}

.hamburger span:before,

.hamburger span:after{

  content:"";

  position:absolute; left:0;

  width:18px; height:2px;

  background: var(--text);

}

.hamburger span:before{ top:-6px; }

.hamburger span:after{ top:6px; }

.hamburger{ color: var(--text); } /* usa currentColor */

.hamburger span,

.hamburger span:before,

.hamburger span:after{

  background: currentColor !important;

}

/* Optional close in nav when menu open */

.navClose{

  width:42px; height:42px;

  border:1px solid var(--line);

  background: var(--surface);

  border-radius:14px;

  cursor:pointer;

  color: var(--text-strong);

  font-size:18px;

  display:none;

  align-items:center;

  justify-content:center;

  transition:.18s ease;

}

.navClose:hover{

  border-color: color-mix(in srgb, var(--accent) 35%, transparent);

  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);

}

body.menu-open .navClose{ display:flex; }

body.menu-open #openMenu{ display:none; }

/* =========================

   MOBILE OVERLAY MENU

   ========================= */

.overlay{

  position:fixed;

  inset:0;

  z-index:110;

  background: color-mix(in srgb, #000 35%, transparent);

  backdrop-filter: blur(10px);

  opacity:0;

  pointer-events:none;

  transition: opacity .28s ease;

}

.overlay.open{

  opacity:1;

  pointer-events:auto;

}

.overlay-panel{

  position:absolute;

  top:0; right:0;

  height:100%;

  width:100vw;

  max-width:100vw;

  background: var(--panel2);

  border-left:1px solid var(--line);

  box-shadow:-24px 0 80px rgba(0,0,0,.35);

  transform: translateX(100%);

  transition: transform .36s cubic-bezier(.77,0,.18,1);

  padding-bottom: max(18px, env(safe-area-inset-bottom));

  overflow:auto;

  display:flex;

  flex-direction:column;

}

.overlay.open .overlay-panel{ transform: translateX(0); }

/* top bar sticky */

.overlay-top{

  position: sticky;

  top: 0;

  z-index: 5;

  height: var(--navH);

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

  padding: 0 16px;

  border-bottom: 1px solid var(--line);

  background: color-mix(in srgb, var(--panel2) 92%, transparent);

  backdrop-filter: blur(12px);

}

.overlay-top .brand{

  font-size:12px;

  letter-spacing:.14em;

  text-transform:uppercase;

  font-weight:800;

  color: var(--text-strong);

  gap:10px;

}

.dot{

  width:10px; height:10px; border-radius:50%;

  background: var(--accent);

  box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);

  flex:0 0 auto;

}

.overlay-close{

  width:42px; height:42px;

  border:1px solid var(--line);

  background: var(--surface);

  border-radius:14px;

  cursor:pointer;

  display:flex;

  align-items:center;

  justify-content:center;

  color: var(--text-strong);

  font-size:18px;

  transition:.18s ease;

}

.overlay-close:hover{

  border-color: color-mix(in srgb, var(--accent) 45%, transparent);

  box-shadow: 0 0 0 5px color-mix(in srgb, var(--accent) 14%, transparent);

  background: color-mix(in srgb, var(--accent) 10%, var(--surface));

  transform: scale(1.05);

}

.overlay-links{

  display:flex;

  flex-direction:column;

}

.overlay-links a{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:14px;

  padding: 18px 18px;

  border-bottom: 1px solid color-mix(in srgb, var(--text) 10%, transparent);

  color: var(--text-strong);

  text-transform: uppercase;

  letter-spacing: .12em;

  font-weight: 700;

  font-size: 13px;

  background: transparent;

  transition: background .18s ease, transform .18s ease, opacity .25s ease;

}

.overlay-links a:hover{

  background: var(--surface);

  transform: translateX(2px);

}

.overlay-links i{

  font-size:14px;

  color: var(--muted);

}

/* entrance anim */

.overlay-links a{ opacity:0; transform: translateX(12px); }

.overlay.open .overlay-links a{ opacity:1; transform: translateX(0); }

.overlay.open .overlay-links a:nth-child(1){ transition-delay: .06s; }

.overlay.open .overlay-links a:nth-child(2){ transition-delay: .10s; }

.overlay.open .overlay-links a:nth-child(3){ transition-delay: .14s; }

.overlay.open .overlay-links a:nth-child(4){ transition-delay: .18s; }

.overlay.open .overlay-links a:nth-child(5){ transition-delay: .22s; }

/* =========================

   PAGE LAYOUT (2 columns)

   ========================= */

.page{

  min-height: calc(100vh - var(--navH));

  padding-top: var(--navH);

  display:grid;

  grid-template-columns: 1fr 1fr;

}

.leftVisual{

  position:relative;

  border-right:1px solid var(--line);

  background: transparent;

  overflow: visible;

}

.leftStack{

  position:relative;

  height: calc(100vh - var(--navH));

  width:100%;

}

.bikeWrap{

  position:absolute;

  inset:0;

  display:block;

  pointer-events:none;

}

.bikeImg{

  position:relative;

  left:0px;

  top:10px;

  width:min(980px, 130%);

  max-height: 78vh;

  height:auto;

  object-fit:contain;

  filter: drop-shadow(0 42px 90px rgba(0,0,0,.65));

  opacity:0;

  transition: opacity .25s ease;

}

.bikeImg.show{ opacity:1; }

#exp360{ display:none !important; }

.rightPanel{

  position:relative;

  padding: 44px 42px;

  overflow:hidden;

  padding-bottom: 220px;

}

/* watermark */

.bigWatermark{

  position:absolute;

  inset:auto 40px 120px auto;

  font-weight:900;

  letter-spacing:-.04em;

  font-size: clamp(72px, 9vw, 150px);

  color: color-mix(in srgb, var(--text) 6%, transparent);

  user-select:none;

  pointer-events:none;

  text-transform:uppercase;

}

/* Title block */

.titleBlock .kicker{

  font-size:12px;

  letter-spacing:.18em;

  text-transform:uppercase;

  color: var(--muted2);

}

.titleBlock h1{

  margin:10px 0 0;

  font-size: clamp(24px, 2.5vw, 34px);

  letter-spacing:-.02em;

}

.subtitle{

  color: var(--muted);

  margin-top:8px;

  line-height:1.6;

  max-width: 560px;

  font-size:14px;

}

/* =========================

   MODELS GRID

   ========================= */

.modelsGrid{

  margin-top: 26px;

  border-top:1px solid var(--line);

  padding-top: 18px;

  display:grid;

  grid-template-columns: repeat(4, minmax(0,1fr));

  gap: 18px;

  align-items:start;

}

.colTitle{

  font-size:11px;

  letter-spacing:.18em;

  text-transform:uppercase;

  color: color-mix(in srgb, var(--text) 45%, transparent);

  margin-bottom: 10px;

}

.modelList{

  display:flex;

  flex-direction:column;

  gap:10px;

}

.modelBtn{

  display:flex;

  align-items:center;

  justify-content:space-between;

  gap:10px;

  padding: 12px 12px;

  border-radius: 14px;

  border:1px solid var(--line);

  background: var(--surface);

  color: var(--muted);

  cursor:pointer;

  transition: .18s ease;

  font-weight:800;

  letter-spacing:.06em;

  text-transform:uppercase;

  font-size:12px;

}

.modelBtn:hover{

  transform: translateY(-1px);

  border-color: color-mix(in srgb, var(--accent) 32%, transparent);

  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);

  color: var(--text-strong);

}

.modelBtn.active{

  color: var(--text-strong);

  background: var(--surface2);

  border-color: color-mix(in srgb, var(--text) 25%, transparent);

  box-shadow: 0 0 0 4px color-mix(in srgb, var(--text) 6%, transparent);

  position:relative;

}

.modelBtn.active:before{

  content:"";

  position:absolute;

  left:-10px;

  top:50%;

  transform:translateY(-50%);

  width:3px; height:22px;

  border-radius:4px;

  background: color-mix(in srgb, var(--text) 55%, transparent);

}

.chev{ opacity:.6; }

/* =========================

   VARIANTS BAR

   ========================= */

.variantsBar{

  margin-top: 18px;

  display:flex;

  flex-wrap:wrap;

  gap:10px;

  align-items:center;

}

.variantPill{

  padding: 9px 12px;

  border-radius: 999px;

  border:1px solid color-mix(in srgb, var(--text) 14%, transparent);

  background: var(--surface);

  color: var(--muted);

  font-weight:900;

  letter-spacing:.14em;

  text-transform:uppercase;

  font-size:11px;

  cursor:pointer;

  transition:.18s ease;

  user-select:none;

}

.variantPill:hover{

  border-color: color-mix(in srgb, var(--accent) 28%, transparent);

  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent);

  color: var(--text-strong);

  transform: translateY(-1px);

}

.variantPill.active{

  background: var(--surface2);

  border-color: color-mix(in srgb, var(--text) 25%, transparent);

  color: var(--text-strong);

}

/* =========================

   SPECS

   ========================= */

.specsBox{

  margin-top: 22px;

  display:grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 14px;

}

@media (max-width: 1100px){ .specsBox{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }

@media (max-width: 700px){ .specsBox{ grid-template-columns: 1fr; } }

.specCard{

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: 16px;

  padding: 14px 14px 12px;

}

.specCard h4{

  margin: 0 0 10px;

  font-size: 12px;

  letter-spacing: .18em;

  text-transform: uppercase;

  color: color-mix(in srgb, var(--text) 75%, transparent);

}

.specList{

  list-style:none;

  padding:0;

  margin:0;

  display:flex;

  flex-direction:column;

  gap: 8px;

}

.specItem{

  display:flex;

  justify-content:space-between;

  gap: 10px;

  font-size: 13px;

  line-height: 1.3;

  color: color-mix(in srgb, var(--text) 86%, transparent);

  border-bottom: 1px solid color-mix(in srgb, var(--text) 8%, transparent);

  padding-bottom: 8px;

}

.specItem:last-child{ border-bottom:0; padding-bottom:0; }

.specKey{ color: color-mix(in srgb, var(--text) 62%, transparent); }

.specVal{ color: var(--text-strong); text-align:right; }

/* =========================

   STATS (fixed bottom)

   ========================= */

.statsRow{

  position:absolute;

  left:42px;

  right:42px;

  bottom:34px;

  display:flex;

  align-items:flex-end;

  justify-content:space-between;

  gap:18px;

  flex-wrap:wrap;

  border-top:1px solid var(--line);

  padding-top: 18px;

}

.stats{

  display:flex;

  gap:22px;

  flex-wrap:wrap;

  align-items:flex-end;

}

.stat{

  display:flex;

  flex-direction:column;

  gap:6px;

  min-width: 120px;

}

.stat .num{

  font-size: 34px;

  font-weight:900;

  letter-spacing:-.03em;

  line-height:1;

}

.stat .unit{

  font-size:11px;

  letter-spacing:.18em;

  text-transform:uppercase;

  color: color-mix(in srgb, var(--text) 55%, transparent);

  margin-left:6px;

  font-weight:900;

}

.stat .label{

  font-size:11px;

  letter-spacing:.18em;

  text-transform:uppercase;

  color: color-mix(in srgb, var(--text) 55%, transparent);

}

.compare{

  display:flex;

  align-items:center;

  gap:10px;

  font-size:12px;

  letter-spacing:.18em;

  text-transform:uppercase;

  color: var(--muted);

}

/* =========================

   RESPONSIVE

   ========================= */

@media (max-width: 980px){

  :root{ --navPadX:22px; }

  .page{ grid-template-columns: 1fr; }

  .leftVisual{ border-right:none; border-bottom:1px solid var(--line); min-height: 52vh; }

  .leftStack{ height: 52vh; }

  .bikeImg{ left:-40px; top:8px; width:min(920px, 120%); max-height: 50vh; }

  .rightPanel{ padding: 26px 18px; padding-bottom: 240px; }

  .statsRow{ left:18px; right:18px; bottom:20px; }

  .modelsGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }

  .bigWatermark{ right:18px; bottom:140px; }

  .nav-links{ display:none !important; }

  .hamburger{ display:flex; }

}

/* Small tweak */

@media (max-width: 420px){

  .stat{ min-width: 104px; }

}

/* =========================

   MOBILE MENU LOGO COLOR

   ========================= */

.overlay .brand{

  font-weight: 800;

  letter-spacing: .08em;

  font-size: 18px;

  color: var(--text); 

}

/* pallino accento */

.overlay .brand .dot{

  width:10px;

  height:10px;

  border-radius:999px;

  background: var(--accent); /* blu/azzurro */

  display:inline-block;

  margin-right:10px;

}

.brand-logo.logoDark{ display:block; }

.brand-logo.logoLight{ display:none; }

/* =========================

   FIX: stop horizontal scroll on mobile

   ========================= */

html, body{

  width:100%;

  max-width:100%;

  overflow-x:hidden;

}

/* La grid non deve mai superare viewport */

.page{

  width:100%;

  max-width:100%;

  overflow-x:hidden;

}

/* Il pannello sinistro non deve "spingere fuori" */

.leftVisual,

.leftStack,

.bikeWrap{

  width:100%;

  max-width:100%;

  overflow:hidden;

}

/* L'immagine non deve mai essere > viewport */

.bikeImg{

  max-width:100%;

}

/* Mobile: togli il 120/130% e i left negativi */

@media (max-width: 980px){

  .bikeImg{

    width:100% !important;

    left:0 !important;

    transform:none !important;

  }

}

/* =========================

   MOBILE NAV FIX

   ========================= */

@media (max-width: 980px){

  /* navbar più compatta */

  .nav{

    height: 64px;

  }

  .nav-inner{

    padding: 10px 16px;

  }

  /* LOGO PIÙ PICCOLO */

  .brand-logo{

    height: 32px;   /* ← prima era 42px */

  }

  /* hamburger più proporzionato */

  .hamburger{

    width: 40px;

    height: 40px;

  }

}

.ai-suggestions{

display:flex;

flex-wrap:wrap;

gap:8px;

margin-top:10px;

}

.ai-suggest{

border:1px solid var(--line);

background:var(--surface);

color:var(--text);

padding:8px 10px;

border-radius:12px;

font-size:12px;

cursor:pointer;

transition:all .2s;

}

.ai-suggest:hover{

border-color:var(--accent);

background:rgba(14,165,233,.08);

}

/* =========================
   PRODUCTS CATEGORY PAGE
   ========================= */

.productsPage{
  min-height:100vh;
  padding-top:var(--navH);
}

.productsHero{
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 420px at 18% 10%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%),
    radial-gradient(800px 420px at 82% 20%, color-mix(in srgb, var(--text) 7%, transparent), transparent 60%);
}

.productsHeroInner{
  max-width:var(--max);
  margin:0 auto;
  padding:70px 18px 46px;
}

.productsHero h1{
  margin:10px 0 0;
  font-size:clamp(38px, 6vw, 82px);
  line-height:.95;
  letter-spacing:-.06em;
  text-transform:uppercase;
}

.productsHero p{
  max-width:680px;
  margin:18px 0 0;
  color:var(--muted);
  line-height:1.7;
  font-size:15px;
}

.productsWrap{
  max-width:var(--max);
  margin:0 auto;
  padding:34px 18px 70px;
}

.productsHead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:22px;
}

.productsHead h2{
  margin:8px 0 0;
  font-size:clamp(24px, 3vw, 38px);
  letter-spacing:-.04em;
}

.productsCount{
  color:var(--muted);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  border:1px solid var(--line);
  border-radius:999px;
  padding:10px 14px;
  background:var(--surface);
}

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

.productCard{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-height:430px;
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(650px 280px at 50% 0%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 60%),
    var(--surface);
  box-shadow:var(--shadow);
  transition:.22s ease;
}

.productCard:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--accent) 34%, transparent);
  box-shadow:
    0 24px 70px rgba(0,0,0,.45),
    0 0 0 5px color-mix(in srgb, var(--accent) 10%, transparent);
}

.productImageBox{
  height:250px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:color-mix(in srgb, var(--text) 3%, transparent);
  border-bottom:1px solid var(--line);
}

.productImageBox img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 28px 38px rgba(0,0,0,.45));
  transition:.22s ease;
}

.productCard:hover .productImageBox img{
  transform:scale(1.035);
}

.productBody{
  padding:18px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
}

.productSeries{
  color:var(--muted2);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-weight:800;
}

.productTitle{
  margin:0;
  color:var(--text-strong);
  font-size:22px;
  line-height:1.1;
  letter-spacing:-.03em;
}

.productDesc{
  color:var(--muted);
  line-height:1.55;
  font-size:13px;
  margin:0;
  flex:1;
}

.productMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}

.productPill{
  border:1px solid var(--line);
  background:var(--surface2);
  color:var(--muted);
  border-radius:999px;
  padding:7px 10px;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.1em;
}

.productBtn{
  margin-top:6px;
  height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:0 14px;
  background:var(--text);
  color:var(--bg);
  font-size:12px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:.18s ease;
}

.productBtn:hover{
  transform:translateY(-1px);
}

.emptyProducts{
  grid-column:1/-1;
  border:1px solid var(--line);
  border-radius:20px;
  background:var(--surface);
  color:var(--muted);
  padding:22px;
  line-height:1.6;
}

@media (max-width: 980px){
  .productsGrid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .productsHeroInner{
    padding-top:48px;
  }
}

@media (max-width: 640px){
  .productsHead{
    align-items:flex-start;
    flex-direction:column;
  }

  .productsGrid{
    grid-template-columns:1fr;
  }

  .productCard{
    min-height:auto;
  }

  .productImageBox{
    height:220px;
  }
}