:root{
  --ink:#060505; --panel:#0d0a0b; --panel2:#150f10; --panel3:#1c1213;
  --line:rgba(255,90,90,0.14); --text:#f5f1f0; --fog:#a89ea0; --mist:#d8cfd0;
  --bolt:#c81c2e; --bolt2:#ff5c4d; --violet:#7a0f1f;
}
html{scroll-behavior:smooth;}
body{background:var(--ink); color:var(--text); font-family:'Inter',ui-sans-serif,system-ui,sans-serif;}
::selection{background:var(--bolt); color:#fff;}
.balance{text-wrap:balance;}
.tnum{font-variant-numeric:tabular-nums;}
.eyebrow{letter-spacing:.22em;}
.hairline{background:linear-gradient(90deg,transparent, var(--line) 20%, var(--line) 80%, transparent);}
.bolt-text{
  background:linear-gradient(90deg, var(--bolt2), var(--bolt) 55%, var(--violet));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.glass{
  background:rgba(13,10,11,0.65);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

/* Page hero band (non-home pages) */
.page-hero{
  position:relative;
  background:
    radial-gradient(55% 60% at 82% 0%, rgba(200,28,46,0.20), transparent 60%),
    radial-gradient(40% 45% at 5% 100%, rgba(255,92,77,0.14), transparent 60%),
    linear-gradient(180deg,#060505 0%, #0d0708 60%, #060505 100%);
}
.hero-bg{
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(200,28,46,0.24), transparent 60%),
    radial-gradient(45% 45% at 8% 85%, rgba(255,92,77,0.16), transparent 60%),
    linear-gradient(180deg,#060505 0%, #0d0708 55%, #060505 100%);
}

/* Speed-streak hero motif */
.streak-field{ position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:0; }
.streak{ position:absolute; height:2px; border-radius:2px; background:linear-gradient(90deg, transparent, var(--bolt2), transparent); opacity:.7; filter:drop-shadow(0 0 6px rgba(255,92,77,.55)); animation:streakMove linear infinite; }
@keyframes streakMove{ from{ transform:translateX(-30%);} to{ transform:translateX(130%);} }

/* Hero carousel (home) */
.slide{ opacity:0; visibility:hidden; transition:opacity 900ms ease; position:absolute; inset:0; }
.slide.is-active{ opacity:1; visibility:visible; position:relative; }

/* Marquee */
.marquee-track{ animation:marquee 90s linear infinite; }
.marquee-wrap:hover .marquee-track{ animation-play-state:paused; }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* Card lift */
.car-card{ transition:transform 320ms ease, border-color 320ms ease, box-shadow 320ms ease; }
.car-card:hover{ transform:translateY(-6px); border-color:rgba(255,92,77,.45); box-shadow:0 18px 50px -22px rgba(200,28,46,.55); }
.plate{ transition:transform 500ms ease; }
.car-card:hover .plate{ transform:scale(1.04) translateY(-2px); }

.navlink{ position:relative; }
.navlink::after{ content:''; position:absolute; left:0; right:100%; bottom:-6px; height:1.5px; background:var(--bolt2); transition:right 260ms ease; }
.navlink:hover::after, .navlink.is-active::after{ right:0; }
.navlink.is-active{ color:#fff; }

input::placeholder, textarea::placeholder{ color:#8a7c7a; }
.focus-ring:focus-visible{ outline:2px solid var(--bolt2); outline-offset:2px; }

/* Form controls (shared across vendi / contatti / newsletter) */
.field-label{ display:block; font-size:.8rem; font-weight:600; color:var(--mist); margin-bottom:.5rem; }
.field-input, .field-select, .field-textarea{
  width:100%; background:var(--panel2); border:1px solid var(--line); border-radius:.9rem;
  padding:.85rem 1rem; font-size:.9rem; color:#fff; outline:none; transition:border-color 200ms ease;
}
.field-input:focus, .field-select:focus, .field-textarea:focus{ border-color:var(--bolt2); }
.field-select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23a89ea0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.5rem;}
.field-check{ width:1.1rem; height:1.1rem; margin-top:.15rem; accent-color:var(--bolt2); flex-shrink:0; }

/* Dual-thumb price range slider */
.range-dual{ position:relative; height:1.6rem; display:flex; align-items:center; }
.range-track{ position:absolute; left:0; right:0; height:4px; border-radius:4px; background:var(--line); }
.range-fill{ position:absolute; height:4px; border-radius:4px; background:linear-gradient(90deg,var(--bolt2),var(--bolt)); }
.range-thumb{
  position:absolute; left:0; right:0; width:100%; margin:0; height:1.6rem;
  -webkit-appearance:none; appearance:none; background:transparent; pointer-events:none;
}
.range-thumb::-webkit-slider-runnable-track{ -webkit-appearance:none; background:transparent; height:1.6rem; }
.range-thumb::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; width:18px; height:18px; margin-top:0;
  border-radius:50%; background:#fff; border:3px solid var(--bolt2); cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.45); position:relative; top:calc(1.6rem/2 - 9px);
}
.range-thumb::-moz-range-track{ background:transparent; height:1.6rem; border:none; }
.range-thumb::-moz-range-thumb{
  pointer-events:auto; width:18px; height:18px; border-radius:50%;
  background:#fff; border:3px solid var(--bolt2); cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.45);
}

/* Single-thumb slider (financing simulator) — reuses .range-track / .range-fill / .range-thumb */
.range-single{ position:relative; height:1.6rem; display:flex; align-items:center; }
.range-single .range-fill{ left:0; }

/* Financing simulator: duration buttons */
.fin-duration-btn{ padding:.55rem 1rem; border-radius:.7rem; border:1px solid var(--line); font-size:.82rem; font-weight:700; color:var(--fog); transition:all 200ms ease; cursor:pointer; background:transparent; }
.fin-duration-btn:hover{ border-color:var(--bolt2); color:#fff; }
.fin-duration-btn.is-active{ background:linear-gradient(90deg,var(--bolt),var(--violet)); color:#fff; border-color:transparent; }

/* Quick-action buttons on car detail (Chiama / Contatta il rivenditore) */
.quick-cta{ display:inline-flex; align-items:center; gap:.5rem; border-radius:999px; padding:.65rem 1.25rem; font-size:.8rem; font-weight:700; white-space:nowrap; transition:all 200ms ease; }
.quick-cta-solid{ background:linear-gradient(90deg,var(--bolt),var(--violet)); color:#fff; box-shadow:0 10px 30px -14px rgba(200,28,46,.7); }
.quick-cta-solid:hover{ filter:brightness(1.1); }
.quick-cta-outline{ border:1px solid var(--line); color:var(--mist); }
.quick-cta-outline:hover{ border-color:var(--bolt2); color:#fff; }

/* Car detail photo carousel (auto-advancing) */
.gallery-main{ position:relative; }
.gallery-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; z-index:0; transition:opacity 800ms ease; }
.gallery-img.is-on{ opacity:1; z-index:1; }
.gallery-img.is-top{ z-index:2; }
.gallery-img:not(.is-on){ transition:none; }
@media (prefers-reduced-motion: reduce){ .gallery-img{ transition:none; } }
.gallery-arrow{
  position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
  background:rgba(6,5,5,.55); backdrop-filter:blur(4px); border:1px solid var(--line);
  display:grid; place-items:center; cursor:pointer; color:#fff; transition:background 200ms ease; z-index:2; font-size:1.2rem; line-height:1;
}
.gallery-arrow:hover{ background:var(--bolt); }
.gallery-prev{ left:12px; } .gallery-next{ right:12px; }
.gallery-counter{
  position:absolute; top:12px; right:12px; background:rgba(0,0,0,.55); border:1px solid var(--line);
  border-radius:999px; padding:5px 12px; font-size:.75rem; font-weight:700; font-variant-numeric:tabular-nums; z-index:2;
}
.gallery-dots{ display:flex; gap:6px; justify-content:center; flex-wrap:wrap; }
.gallery-dot{ width:7px; height:7px; border-radius:50%; background:var(--line); cursor:pointer; transition:all 160ms ease; border:none; padding:0; }
.gallery-dot.is-active{ width:20px; border-radius:4px; background:var(--bolt2); }

/* Spec table (car detail) */
.spec-row{ display:flex; justify-content:space-between; padding:.85rem 0; border-bottom:1px solid var(--line); font-size:.9rem; }
.spec-row:last-child{ border-bottom:none; }

/* Pagination */
.page-btn{ min-width:2.25rem; height:2.25rem; border-radius:.7rem; display:grid; place-items:center; font-size:.85rem; font-weight:700; border:1px solid var(--line); color:var(--fog); transition:all 200ms ease; }
.page-btn:hover{ border-color:var(--bolt2); color:#fff; }
.page-btn.is-active{ background:linear-gradient(90deg,var(--bolt),var(--violet)); color:#fff; border-color:transparent; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .marquee-track{ animation:none; }
  .streak{ animation:none; }
  .slide{ transition:none; }
  .car-card, .plate{ transition:none; }
}

/* Hero photos (home) */
.hero-photo{ position:absolute; inset:0; z-index:0; opacity:0; transition:opacity 900ms ease; overflow:hidden; }
.hero-photo.is-active{ opacity:1; }
.hero-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.hero-photo.var-b img{ transform:scale(1.22); transform-origin:85% 40%; }
.hero-photo::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(6,5,5,.94) 0%, rgba(6,5,5,.78) 38%, rgba(6,5,5,.30) 72%, rgba(6,5,5,.15) 100%),
             linear-gradient(180deg, rgba(6,5,5,.55) 0%, transparent 25%, transparent 70%, rgba(6,5,5,.85) 100%); }
@media (max-width:767px){ .hero-photo::after{ background:linear-gradient(180deg, rgba(6,5,5,.75), rgba(6,5,5,.72) 60%, rgba(6,5,5,.9)); } }
@media (prefers-reduced-motion: reduce){ .hero-photo{ transition:none; } }
