/* RFA – RF Automotive */

/* Archivo, served from the site itself (assets/fonts, license in OFL.txt):
   no requests to Google. Variable font: weights 400–800, widths 100–125%. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("fonts/archivo-normal-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("fonts/archivo-normal-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("fonts/archivo-italic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: italic;
  font-weight: 400 800;
  font-stretch: 100% 125%;
  font-display: swap;
  src: url("fonts/archivo-italic-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --nero: #000000;
  --canna: #1c1f23;
  --canna-2: #2a2e33;
  --grafite: #4a5058;
  --stella: #ffc107;   /* classic rating-star yellow */
  --argento: #aeb4bb;
  --bianco: #ffffff;
  --verde: #009246;
  --rosso: #ce2b37;
  --testo: #e9ebee;
  --testo-2: #9aa1a9;

  --font: "Archivo", system-ui, sans-serif;
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 40px);
  --step--1: 0.875rem;
  --step-0: 1rem;
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 3.2vw, 2.6rem);
  --step-4: clamp(2.4rem, 6vw, 4.8rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nero);
  color: var(--testo);
  font-family: var(--font);
  font-size: var(--step-0);
  line-height: 1.55;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--bianco); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Display type: wide + slanted, like the logo */
.display {
  font-stretch: 125%;
  font-style: italic;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.02;
  color: var(--bianco);
  margin: 0;
}
h1.display { font-size: var(--step-4); }
h2.display { font-size: var(--step-3); }
h3 { font-size: var(--step-1); margin: 0 0 .4em; color: var(--bianco); font-weight: 700; }
p { margin: 0 0 1em; max-width: 65ch; }
.lead { font-size: var(--step-1); color: var(--testo); line-height: 1.5; max-width: 52ch; }
.muted { color: var(--testo-2); }

/* Tricolore stripe — the one signature device */
.tricolore {
  display: flex;
  height: 8px;
  transform: skewX(-24deg);
}
.tricolore span { flex: 1; }
.tricolore span:nth-child(1) { background: var(--verde); }
.tricolore span:nth-child(2) { background: var(--bianco); }
.tricolore span:nth-child(3) { background: var(--rosso); }
.divider { margin: 0 auto; max-width: var(--wrap); padding: 0 var(--gutter); }
.divider .tricolore { width: min(360px, 60%); }

/* Header: stays visible while scrolling on wide screens (phones have the
   call/WhatsApp bar instead). The sticky element is the #header wrapper,
   a direct child of <body>, so it can stick for the whole page. */
@media (min-width: 1041px) { #header { position: sticky; top: 0; z-index: 20; } }
.site-header {
  position: relative; z-index: 20;
  background: var(--nero);
  border-bottom: 1px solid var(--canna-2);
}
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 76px;
}
/* Transparent logo cropped to the drawing: 44px is the drawing itself (was ~30px inside a black box) */
.logo img { height: 44px; width: auto; }
.nav { display: flex; gap: 4px; align-items: center; }
.nav a {
  text-decoration: none;
  padding: 10px 14px;
  font-weight: 600;
  color: var(--testo-2);
  position: relative;
}
.nav a:hover { color: var(--bianco); }
.nav a[aria-current="page"] { color: var(--bianco); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 4px;
  background: var(--bianco); box-shadow: 0 0 10px rgba(255, 255, 255, .55);
  transform: skewX(-24deg);
}
.nav .nav-cta {
  margin-left: 8px; color: var(--nero); background: var(--bianco);
  transform: skewX(-12deg);
}
.nav .nav-cta span { display: inline-block; transform: skewX(12deg); }
.nav .nav-cta:hover { color: var(--nero); background: var(--argento); }
.menu-btn {
  display: none; background: none; border: 1px solid var(--canna-2); color: var(--bianco);
  font: inherit; font-weight: 600; padding: 8px 14px; cursor: pointer;
}
@media (max-width: 1040px) {
  .menu-btn { display: block; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; background: var(--nero);
    border-bottom: 1px solid var(--canna-2); padding: 8px var(--gutter) 16px;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 0; }
  .nav a[aria-current="page"]::after { left: 0; right: auto; width: 80px; }
  .nav .nav-cta { margin: 8px 0 0; text-align: center; }
  .logo img { height: 36px; }
}

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  padding: 14px 26px; border: 0;
  background: var(--bianco); color: var(--nero);
  transform: skewX(-12deg);
}
.btn > span { display: inline-block; transform: skewX(12deg); }
.btn:hover { background: var(--argento); }
.btn.ghost { background: transparent; color: var(--bianco); box-shadow: inset 0 0 0 2px var(--bianco); }
.btn.ghost:hover { background: var(--bianco); color: var(--nero); }
.btn.verde { background: var(--verde); color: var(--bianco); }
.btn.verde:hover { background: #00a650; }

/* Sections */
section { padding: clamp(56px, 9vw, 112px) 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head p { margin: 12px 0 0; color: var(--testo-2); }
.band { background: var(--canna); }

/* Page head (inner pages) */
.page-head { padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 4vw, 48px); }
.page-head .lead { margin-top: 20px; color: var(--testo-2); }

/* Hero */
.hero { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 120px) 0 0; }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; }
.hero h1 { max-width: 13ch; }
.hero .lead { margin: 28px 0 36px; color: var(--testo-2); }
/* Drawn car driving in once on load (its lights and motion: futuristic layer below) */
.hero-car { position: relative; }
.hero-car svg { width: 100%; height: auto; }
.hero-car .body { animation: drive-in 1.1s cubic-bezier(.2,.8,.2,1) both; }
@keyframes drive-in { from { transform: translateX(60px); opacity: 0; } to { transform: none; opacity: 1; } }
.hero-stripe { margin-top: clamp(40px, 6vw, 72px); }
.hero-stripe .tricolore { height: 14px; margin-left: -20px; width: calc(100% + 40px); transform: skewX(-40deg); }
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-car { order: -1; max-width: 460px; }
}

/* Quick search */
.search {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: 0;
  background: var(--canna); max-width: 620px;
}
.search label { display: block; padding: 10px 16px 12px; border-right: 1px solid var(--canna-2); }
.search label span { display: block; font-size: var(--step--1); color: var(--testo-2); }
.search select, .field select, .field input, .field textarea {
  width: 100%; font: inherit; color: var(--bianco); background: transparent; border: 0; padding: 4px 0;
}
.search select option, .field select option { background: var(--canna); }
.search .btn { transform: none; height: 100%; }
.search .btn > span { transform: none; }
@media (max-width: 560px) {
  .search { grid-template-columns: 1fr 1fr; }
  .search .btn { grid-column: 1 / -1; padding: 16px; }
}

/* Car tiles */
.cars { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
/* Home showcase: 4 cars in one row on wide screens, 2 + 2 on tablets, stacked on phones */
.vetrina { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1200px) { .vetrina { grid-template-columns: repeat(4, 1fr); gap: 20px; } .vetrina .price { font-size: var(--step-1); } }
@media (max-width: 640px) { .vetrina { grid-template-columns: 1fr; } }
.car { display: flex; flex-direction: column; text-decoration: none; background: var(--canna); }
.car-visual {
  position: relative; aspect-ratio: 4 / 3; display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 100%, var(--canna-2), #121417 70%);
  overflow: hidden;
}
.car-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.car-visual svg { width: 82%; }
.car-visual .tag {
  position: absolute; top: 14px; left: 14px; font-size: var(--step--1); font-weight: 600;
  padding: 4px 10px; background: var(--nero); color: var(--bianco);
}
.car-info { padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; }
.car-name { margin: 0; color: var(--bianco); font-size: var(--step-1); font-weight: 700; line-height: 1.2; }
.car-name small { display: block; font-weight: 400; font-size: var(--step--1); color: var(--testo-2); margin-top: 4px; }
.specs { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; color: var(--testo-2); font-size: var(--step--1); }
.price-row { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; }
.price { font-stretch: 125%; font-style: italic; font-weight: 800; font-size: var(--step-2); color: var(--bianco); }
.price-row .more { font-weight: 600; font-size: var(--step--1); color: var(--testo-2); }
.car:hover .more { color: var(--bianco); }
.car-visual .tag { z-index: 1; }

/* Steps (a real sequence, so numbered) */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps li { padding: 0 24px 0 0; counter-increment: step; }
.steps li::before {
  content: counter(step); display: block;
  font-stretch: 125%; font-style: italic; font-weight: 800; font-size: 3.4rem; line-height: 1;
  color: var(--rosso); margin-bottom: 16px;
}
.steps p { color: var(--testo-2); margin: 0; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr 1fr; row-gap: 40px; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; } }

/* Service rows */
.services { border-top: 1px solid var(--canna-2); }
.service {
  display: grid; grid-template-columns: minmax(200px, 1fr) 2fr auto; gap: 24px; align-items: baseline;
  padding: 28px 0; border-bottom: 1px solid var(--canna-2);
}
.service h3 { margin: 0; font-size: var(--step-2); font-stretch: 112%; font-style: italic; font-weight: 700; }
.service p { margin: 0; color: var(--testo-2); }
.service a { font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) { .service { grid-template-columns: 1fr; gap: 8px; } }

/* CTA band */
.cta { background: var(--bianco); color: var(--nero); }
.cta .wrap { display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta .display { color: var(--nero); }
.cta p { color: #3b4047; margin: 12px 0 0; }
.cta .btn { background: var(--nero); color: var(--bianco); }
.cta .btn:hover { background: var(--canna-2); }
.cta .btn.ghost { background: transparent; color: var(--nero); box-shadow: inset 0 0 0 2px var(--nero); }
.cta .btn.ghost:hover { background: var(--nero); color: var(--bianco); }
.cta-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* Inventory filters (collapsible on phones) */
.inventory { display: grid; grid-template-columns: 260px 1fr; gap: 40px; align-items: start; }
.filters-wrap { position: sticky; top: 100px; }
.filters-wrap > summary { display: none; }
.filters { display: grid; gap: 4px; }
.field { display: block; background: var(--canna); padding: 10px 16px 12px; }
.field span { display: block; font-size: var(--step--1); color: var(--testo-2); }
.field textarea { resize: vertical; min-height: 120px; }
.field input::placeholder, .field textarea::placeholder { color: #5f666e; }
.filters .reset { margin-top: 12px; background: none; border: 0; color: var(--testo-2); font: inherit; text-decoration: underline; cursor: pointer; justify-self: start; padding: 4px 0; }
.result-bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.result-bar strong { color: var(--bianco); }
.result-bar .field { padding: 6px 14px 8px; min-width: 220px; }
.empty { padding: 48px; background: var(--canna); }
.empty h3 { margin-bottom: 8px; }
@media (max-width: 900px) {
  .inventory { grid-template-columns: 1fr; gap: 24px; }
  .filters-wrap { position: static; }
  .filters-wrap > summary {
    display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none;
    background: var(--canna); padding: 14px 16px; font-weight: 700; color: var(--bianco);
  }
  .filters-wrap > summary::-webkit-details-marker { display: none; }
  .filters-wrap > summary::after { content: "Mostra"; font-weight: 400; color: var(--testo-2); font-size: var(--step--1); }
  .filters-wrap[open] > summary { margin-bottom: 4px; }
  .filters-wrap[open] > summary::after { content: "Nascondi"; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters .reset { grid-column: 1 / -1; }
}

/* Detail */
.back { display: inline-block; margin-bottom: 24px; color: var(--testo-2); font-weight: 600; text-decoration: none; }
.back:hover { color: var(--bianco); }
.detail {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px 48px; align-items: start;
  grid-template-areas: "media side" "info side";
}
.detail > * { min-width: 0; }
.detail-media { grid-area: media; }
.detail-info { grid-area: info; }
.gallery { position: relative; touch-action: pan-y; }
.gallery:focus-visible { outline-offset: 2px; }
.gallery-nav {
  position: absolute; top: 50%; z-index: 2; width: 44px; height: 56px; margin-top: -28px;
  display: grid; place-items: center; border: 0; cursor: pointer;
  background: rgba(0, 0, 0, .55); color: var(--bianco);
}
.gallery-nav:hover { background: rgba(0, 0, 0, .8); }
.gallery-nav svg { width: 20px; height: 20px; }
.gallery-nav.prev { left: 0; }
.gallery-nav.next { right: 0; }
.gallery-count, .gallery-full {
  position: absolute; bottom: 12px; z-index: 2; padding: 4px 10px;
  background: rgba(0, 0, 0, .65); color: var(--bianco); font: inherit; font-size: var(--step--1); border: 0;
}
.gallery-count { right: 12px; }
.gallery-full { left: 12px; cursor: pointer; }
.gallery:fullscreen { background: #000; display: grid; }
.gallery:fullscreen .car-visual { aspect-ratio: auto; height: 100vh; background: #000; }
.gallery:fullscreen .car-visual img { object-fit: contain; }
.side-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: var(--step--1); }
.side-links a, .linkbtn { color: var(--testo-2); }
.linkbtn { background: none; border: 0; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; }
.side-links a:hover, .linkbtn:hover { color: var(--bianco); }
.thumbs { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 4px; scrollbar-width: thin; }
.thumbs button {
  flex: 0 0 auto; width: 84px; aspect-ratio: 4 / 3; padding: 0; border: 0; cursor: pointer;
  background: var(--canna); opacity: .55; outline-offset: -2px;
}
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button:hover, .thumbs button[aria-current="true"] { opacity: 1; }
.thumbs button[aria-current="true"] { box-shadow: inset 0 -4px 0 var(--verde); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.chips li { background: var(--canna); padding: 6px 12px; font-size: var(--step--1); }
.incluso { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.incluso li { padding: 12px 0 12px 22px; border-bottom: 1px solid var(--canna-2); position: relative; }
.incluso li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 10px; height: 4px; margin-top: -2px;
  background: var(--rosso); transform: skewX(-24deg);
}
@media (max-width: 560px) { .incluso { grid-template-columns: 1fr; } }
.nota { border-left: 4px solid var(--verde); padding: 12px 16px; background: var(--canna); margin: 20px 0 0; }
.detail-side { grid-area: side; position: sticky; top: 100px; }
.detail-side .price { font-size: var(--step-4); line-height: 1; display: block; margin: 20px 0 6px; }
.spec-table { width: 100%; border-collapse: collapse; margin-top: 32px; }
.spec-table th, .spec-table td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--canna-2); font-weight: 400; }
.spec-table th { color: var(--testo-2); width: 45%; }
.spec-table td { color: var(--bianco); font-weight: 600; }
.detail-actions { display: grid; gap: 12px; margin-top: 28px; }
.detail-actions .btn { width: 100%; }
@media (max-width: 900px) {
  .detail { grid-template-columns: 1fr; grid-template-areas: "media" "side" "info"; }
  .detail-side { position: static; }
  .detail-side .price { font-size: var(--step-3); }
}

/* Forms */
.form { display: grid; gap: 4px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.form .btn { margin-top: 16px; justify-self: start; }
.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.form .form-actions .btn { margin-top: 0; }
.form fieldset { border: 0; margin: 0 0 36px; padding: 0; min-width: 0; display: grid; gap: 4px; }
.form legend {
  padding: 0; margin-bottom: 14px; color: var(--bianco);
  font-size: var(--step-1); font-weight: 700; font-stretch: 112%; font-style: italic;
}
.form .row-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.form .field[hidden] { display: none; }
.scelta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.scelta.tre { grid-template-columns: repeat(3, 1fr); }
.scelta label {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  background: var(--canna); padding: 14px 16px; color: var(--testo);
}
.scelta input { accent-color: var(--verde); width: 18px; height: 18px; margin: 0; flex: none; }
.scelta label:has(input:checked) { color: var(--bianco); box-shadow: inset 0 -4px 0 var(--verde); }
.form-error { border-left: 4px solid var(--rosso); background: var(--canna); color: var(--bianco); padding: 12px 16px; margin: 0 0 8px; }
@media (max-width: 760px) { .form .row-3 { grid-template-columns: 1fr 1fr; } .form .row-3 > :first-child { grid-column: 1 / -1; } }
@media (max-width: 480px) { .scelta, .scelta.tre { grid-template-columns: 1fr; } }

/* Trade-in page */
.permuta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 64px; align-items: start; }
.permuta-aside { position: sticky; top: 100px; }
.permuta-aside > h3 { margin-top: 8px; }
.passi { list-style: none; counter-reset: passo; padding: 0; margin: 0 0 36px; display: grid; gap: 22px; }
.passi li { counter-increment: passo; display: grid; grid-template-columns: 44px 1fr; gap: 12px; }
.passi li::before {
  content: counter(passo); color: var(--rosso); line-height: 1;
  font-size: 2.2rem; font-weight: 800; font-stretch: 125%; font-style: italic;
}
.passi h3 { margin: 0 0 4px; }
.passi p { margin: 0; color: var(--testo-2); }
.permuta-aside .incluso { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .permuta-grid { grid-template-columns: 1fr; gap: 40px; }
  .permuta-aside { position: static; }
}
.form-note { font-size: var(--step--1); color: var(--testo-2); margin-top: 12px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }

/* Finance calculator */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.calc-inputs { display: grid; gap: 28px; }
.range > label { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 10px; }
.range output { color: var(--bianco); }
.range > input { width: 100%; accent-color: var(--verde); }
/* Amounts you can also type: the slider gets close, the box takes the exact figure */
.range-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; font-weight: 600; }
.importo { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 12px; background: var(--nero); color: var(--bianco); box-shadow: inset 0 -2px 0 var(--grafite); }
.importo:focus-within { box-shadow: inset 0 -2px 0 var(--verde); outline: 2px solid var(--bianco); outline-offset: 3px; }
.importo input { width: 7ch; padding: 12px 0; font: inherit; font-size: max(1rem, 16px); color: inherit; background: transparent; border: 0; text-align: right; }
.importo input:focus-visible { outline: none; }
.calc-result { background: var(--nero); padding: 40px; }
.calc-result .price { font-size: var(--step-4); display: block; line-height: 1; margin: 8px 0 20px; }
.calc-result p { font-size: var(--step--1); color: var(--testo-2); }
.calc-result .tassi { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: var(--step-0); color: var(--testo); margin-bottom: 8px; }
.calc-result .tassi strong { color: var(--bianco); }
@media (max-width: 860px) { .calc { grid-template-columns: 1fr; } }
/* Same calculator inside a car page: one column, box set off from the black page */
.calc.calc-scheda { grid-template-columns: 1fr; gap: 28px; margin-top: 24px; }
.calc-scheda .calc-result { background: var(--canna); padding: clamp(20px, 4vw, 32px); }
.calc-scheda .calc-result .price { font-size: var(--step-3); }

/* Contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; }
.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { padding: 18px 0; border-bottom: 1px solid var(--canna-2); }
.contact-list li span { display: block; font-size: var(--step--1); color: var(--testo-2); }
.contact-list li a, .contact-list li strong { color: var(--bianco); font-weight: 600; font-size: var(--step-1); text-decoration: none; }
.hours { width: 100%; border-collapse: collapse; margin-top: 8px; }
.hours td { padding: 6px 0; }
.hours td:last-child { text-align: right; color: var(--bianco); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; gap: 24px; } }

/* Hero trust line */
.hero-trust { display: flex; align-items: center; gap: 10px; margin-top: 20px; color: var(--testo-2); text-decoration: none; font-size: var(--step--1); }
.hero-trust strong { color: var(--bianco); }
.hero-trust:hover { color: var(--bianco); }
.hero-trust .stars svg { width: 15px; height: 15px; }

/* Reviews */
.stars { display: inline-flex; gap: 3px; }
.stars svg { width: 22px; height: 22px; fill: var(--stella); }
.reviews-grid { display: grid; grid-template-columns: auto 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; }
.reviews-grid .lead { margin: 16px 0 28px; color: var(--testo-2); }
.score { display: grid; justify-items: start; gap: 10px; }
.score-num {
  font-stretch: 125%; font-style: italic; font-weight: 800; line-height: .9;
  font-size: clamp(5rem, 14vw, 10rem); color: var(--bianco); letter-spacing: -0.03em;
}
.score-of { color: var(--testo-2); }
.quotes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; margin-top: 56px; }
.quote { margin: 0; padding: 24px 0 0; border-top: 4px solid var(--canna-2); }
.quote-stars { color: var(--stella); letter-spacing: 2px; }
.quote blockquote { margin: 12px 0 16px; color: var(--bianco); font-size: var(--step-1); line-height: 1.45; }
.quote figcaption { color: var(--testo-2); font-size: var(--step--1); }
@media (max-width: 760px) { .reviews-grid { grid-template-columns: 1fr; } }

/* Frequently asked questions (home): rows that open, a red + that turns into × */
.faq-lista { border-top: 1px solid var(--canna-2); }
.faq-lista details { border-bottom: 1px solid var(--canna-2); }
.faq-lista summary {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: var(--step-1); font-weight: 700; color: var(--bianco);
}
.faq-lista summary::-webkit-details-marker { display: none; }
.faq-lista summary::after {
  content: "+"; flex: none; color: var(--rosso); font-size: 1.8rem; font-weight: 400; line-height: 1;
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
.faq-lista details[open] summary::after { transform: rotate(45deg); }
.faq-lista details p { margin: 0 0 24px; color: var(--testo-2); max-width: 70ch; }
.faq-lista details a { color: var(--bianco); }

/* Legal text (privacy.html) */
.legale { max-width: 760px; }
.legale h2.display { font-size: var(--step-2); margin: 48px 0 12px; }
.legale ul { padding-left: 1.2em; margin: 0 0 1em; }
.legale li { margin-bottom: 10px; max-width: 65ch; }
.legale a { color: var(--bianco); }
mark.da-completare { background: var(--rosso); color: var(--bianco); padding: 0 4px; }

/* Car management page (gestione.html) */
.gestione-bar {
  position: sticky; top: 77px; z-index: 5;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 16px 0; margin-bottom: 8px; background: var(--nero); border-bottom: 1px solid var(--canna-2);
}
.gestione-bar p { margin: 0; }
.gestione-bar strong { color: var(--bianco); }
.g-modifiche { margin-left: 12px; padding: 2px 10px; background: var(--rosso); color: var(--bianco); font-size: var(--step--1); }
.gestione-lista { list-style: none; padding: 0; margin: 0; }
.g-auto {
  display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--canna-2);
}
.g-foto { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: var(--canna); }
.g-foto img { width: 100%; height: 100%; object-fit: cover; }
.g-foto svg { width: 90%; }
.g-info { display: grid; gap: 2px; min-width: 0; }
.g-info strong { color: var(--bianco); font-size: var(--step-1); }
.g-info .muted { font-size: var(--step--1); }
.g-venduta {
  display: flex; align-items: center; gap: 10px; cursor: pointer; white-space: nowrap;
  padding: 12px 16px; background: var(--canna); font-weight: 600;
}
.g-venduta input { width: 20px; height: 20px; margin: 0; accent-color: var(--rosso); }
.g-auto.is-venduta .g-foto, .g-auto.is-venduta .g-info { opacity: .45; }
.g-auto.is-venduta .g-venduta { color: var(--bianco); box-shadow: inset 0 -4px 0 var(--rosso); }
.nota.nota-errore { border-left-color: var(--rosso); }
.gestione-aiuto { margin-top: 48px; max-width: 760px; }
.gestione-aiuto .incluso { grid-template-columns: 1fr; margin-top: 12px; }
@media (max-width: 1040px) { .gestione-bar { top: 0; } }
@media (max-width: 560px) {
  .g-auto { grid-template-columns: 88px 1fr; gap: 12px; }
  .g-venduta { grid-column: 1 / -1; justify-content: center; }
}

/* Skip link */
.skip {
  position: absolute; left: 8px; top: -80px; z-index: 50;
  background: var(--bianco); color: var(--nero); padding: 10px 16px; font-weight: 700;
}
.skip:focus { top: 8px; }

/* Squared call / WhatsApp buttons (phone bar and the home CTA) */
.tasto {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px;
  padding: 12px 28px; font-weight: 700; text-decoration: none;
}
.tasto-chiama { background: var(--bianco); color: var(--nero); }
.tasto-chiama:hover { background: var(--argento); }
.tasto-wa { background: var(--verde); color: var(--bianco); }
.tasto-wa:hover { background: #00a650; }
.cta .tasto-chiama { background: var(--nero); color: var(--bianco); }
.cta .tasto-chiama:hover { background: var(--canna-2); }

/* Call / WhatsApp bar, phones only */
.contact-bar { display: none; }
@media (max-width: 820px) {
  .contact-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    padding: 8px var(--gutter) calc(8px + env(safe-area-inset-bottom));
    background: var(--nero); border-top: 1px solid var(--canna-2);
  }
  .contact-bar .tasto { width: 100%; padding: 12px 16px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}

/* Footer */
.site-footer { border-top: 1px solid var(--canna-2); padding: 48px 0 32px; color: var(--testo-2); font-size: var(--step--1); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.footer-grid img { height: 36px; width: auto; margin-bottom: 16px; }
.footer-grid h4 { color: var(--bianco); margin: 0 0 12px; font-size: var(--step-0); }
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.footer-grid a { text-decoration: none; }
.footer-grid a:hover { color: var(--bianco); }
.legal { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--canna-2); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; } }

/* ===== Futuristic layer =====
   Light and motion on the same layout: tricolore ambient light, a lit floor and
   light trails under the drawn car, glass header, glowing cards that tilt under
   the pointer, sections rising into view (main.js adds .fx and the reveal classes).
   All of it is decoration: with "reduce motion" on, or without JavaScript, the page
   shows everything, still. */
:root {
  --verde-luce: #00c45e;
  --rosso-luce: #ff3b4a;
  --morbido: cubic-bezier(.2, .8, .2, 1);
}

/* Cross-fade between pages, where the browser supports it */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

@keyframes emergi { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: none; } }
@keyframes traccia { from { scale: 0 1; } to { scale: 1 1; } }

/* Ambient light: a slow tricolore aurora behind the dark sections */
body::before {
  content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 32% at 18% 22%, rgba(0, 146, 70, .18), transparent 70%),
    radial-gradient(34% 30% at 84% 70%, rgba(206, 43, 55, .15), transparent 70%),
    radial-gradient(28% 22% at 55% 8%, rgba(255, 255, 255, .06), transparent 70%);
  animation: aurora 30s ease-in-out infinite alternate;
}
@keyframes aurora {
  from { transform: translate3d(-4%, -3%, 0) rotate(-4deg); }
  to { transform: translate3d(4%, 3%, 0) rotate(5deg); }
}
/* Light following the mouse, showing a faint technical grid fixed to the screen */
.luce {
  position: fixed; left: 0; top: 0; width: 560px; height: 560px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent),
    linear-gradient(rgba(255, 255, 255, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .09) 1px, transparent 1px);
  background-size: auto, 48px 48px, 48px 48px;
  -webkit-mask-image: radial-gradient(closest-side, #000 15%, transparent);
  mask-image: radial-gradient(closest-side, #000 15%, transparent);
  opacity: 0; transition: opacity .5s;
}
.luce.attiva { opacity: 1; }

/* How far down the page you are */
.progresso {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--verde), var(--bianco), var(--rosso));
  box-shadow: 0 0 12px rgba(255, 255, 255, .35);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* Glass header with a tricolore light line */
.site-header {
  background: rgba(0, 0, 0, .55);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.logo img { filter: drop-shadow(0 0 14px rgba(255, 255, 255, .22)); }
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--verde) 30%, var(--bianco) 50%, var(--rosso) 70%, transparent);
  opacity: .55;
}
.nav a { transition: color .3s; }
.nav a:not(.nav-cta)::before {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px;
  background: var(--bianco); box-shadow: 0 0 10px rgba(255, 255, 255, .7);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--morbido);
}
.nav a:not(.nav-cta):hover::before { transform: scaleX(1); }
.nav a[aria-current="page"]::before { display: none; }
.nav .nav-cta { overflow: hidden; isolation: isolate; }
.nav .nav-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(0, 0, 0, .2) 50%, transparent 70%);
  transform: translateX(-110%); animation: lampo-cta 7s 3s ease-in-out infinite;
}
@keyframes lampo-cta { 0%, 82% { transform: translateX(-110%); } 100% { transform: translateX(110%); } }
@media (max-width: 1040px) {
  .nav { background: rgba(0, 0, 0, .94); }
  .nav a:not(.nav-cta)::before { left: 0; right: auto; width: 80px; }
}

/* Buttons: a sweep of light on hover; green and white ones glow */
.btn, .tasto { position: relative; overflow: hidden; isolation: isolate; transition: background-color .3s, color .3s, box-shadow .3s; }
.btn::after, .tasto::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .55) 50%, transparent 75%);
  transform: translateX(-110%);
}
.btn:hover::after, .tasto:hover::after, .btn:focus-visible::after, .tasto:focus-visible::after { transform: translateX(110%); transition: transform .7s var(--morbido); }
.btn.verde:hover, .tasto-wa:hover { box-shadow: 0 0 28px rgba(0, 196, 94, .55); }
.btn:not(.verde):not(.ghost):hover, .tasto-chiama:hover { box-shadow: 0 0 28px rgba(255, 255, 255, .3); }
.btn.ghost:hover { box-shadow: inset 0 0 0 2px var(--bianco), 0 0 28px rgba(255, 255, 255, .3); }
.cta .btn:not(.verde):not(.ghost):hover, .cta .tasto-chiama:hover { box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .5); }

/* Hero: the title materializes word by word, then the rest follows */
.titolo-fx > span { display: inline-block; animation: parola 1s var(--morbido) both; }
.titolo-fx > span:nth-child(2) { animation-delay: .08s; }
.titolo-fx > span:nth-child(3) { animation-delay: .16s; }
.titolo-fx > span:nth-child(4) { animation-delay: .24s; }
.titolo-fx > span:nth-child(5) { animation-delay: .32s; }
.titolo-fx > span:nth-child(6) { animation-delay: .4s; }
.titolo-fx > span:nth-child(7) { animation-delay: .48s; }
@keyframes parola { from { opacity: 0; transform: translateY(.45em) skewX(-10deg); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.hero h1 { text-shadow: 0 0 40px rgba(255, 255, 255, .12); }
.hero .lead { animation: emergi .9s .55s var(--morbido) both; }
.hero .search { animation: emergi .9s .7s var(--morbido) both; }
.hero-trust { animation: emergi .9s .85s var(--morbido) both; }
.hero-trust .stars svg { filter: drop-shadow(0 0 4px rgba(255, 193, 7, .55)); }
.search { box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 60px -24px rgba(0, 146, 70, .45); transition: box-shadow .4s; }
.search:focus-within { box-shadow: 0 0 0 1px rgba(0, 196, 94, .55), 0 0 44px -8px rgba(0, 196, 94, .45); }

/* The drawn car: lit floor, tricolore light trails, headlight on, wheels turning */
.hero-car svg { position: relative; z-index: 1; overflow: visible; transition: translate .8s var(--morbido); }
/* Two columns: the sports car is drawn larger and reaches into the right margin
   (125% only where the margin is wide enough for its nose) */
@media (min-width: 861px) { .hero-car svg { width: 108%; max-width: none; } }
@media (min-width: 1360px) { .hero-car svg { width: 125%; } }
.hero-car .strada {
  position: absolute; z-index: 0; left: -25%; right: -70%; bottom: -8%; height: 62%; pointer-events: none; overflow: hidden;
  background: linear-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px) 0 0 / 100% 22px;
  transform: perspective(320px) rotateX(60deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 92%);
  mask-image: linear-gradient(to top, #000 10%, transparent 92%);
  transition: translate .8s var(--morbido);
}
.hero-car .strada::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: -46px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .2) 1px, transparent 1px) 0 0 / 46px 100%;
  animation: strada .5s linear infinite;
}
@keyframes strada { to { transform: translateX(-46px); } }
/* Airflow over the car: faint smoke lines with brighter puffs flowing from the nose to the tail */
.flusso-base { fill: none; stroke-width: 2.2; opacity: .5; }
.flusso-luce { fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 46 74; animation: vento 1.6s linear infinite; }
.flusso-luce.f2 { stroke-dasharray: 60 60; animation-duration: 1.35s; }
.flusso-luce.f3 { stroke-dasharray: 38 82; animation-duration: 1.8s; }
@keyframes vento { to { stroke-dashoffset: -120; } }
.pavimento { animation: respiro 3.5s ease-in-out infinite alternate; }
@keyframes respiro { from { opacity: .65; } to { opacity: 1; } }
.ruota { transform-box: fill-box; transform-origin: center; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.riflesso { transform: translateX(0) skewX(-20deg); animation: riflesso 6s 1.6s ease-in-out infinite; }
@keyframes riflesso { 0% { transform: translateX(0) skewX(-20deg); } 22%, 100% { transform: translateX(560px) skewX(-20deg); } }
.fascio { animation: accendi 1.4s 1.05s both; }
.fanale { animation: fanale 2.4s ease-in-out infinite alternate; }
@keyframes accendi { 0% { opacity: 0; } 12% { opacity: .9; } 18% { opacity: .15; } 30%, 100% { opacity: 1; } }
@keyframes fanale { from { opacity: .6; } to { opacity: 1; } }
/* The tricolore under the hero draws itself, then a light runs along it */
.hero-stripe .tricolore { position: relative; overflow: hidden; transform-origin: left; animation: traccia 1.2s .3s var(--morbido) both; box-shadow: 0 0 34px rgba(255, 255, 255, .1); }
.hero-stripe .tricolore::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 18%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-120%); animation: lampo 5s 2.4s ease-in-out infinite;
}
@keyframes lampo { 0% { transform: translateX(-120%); } 30%, 100% { transform: translateX(650%); } }

/* Inner pages: the title rises in and the tricolore draws itself */
.page-head .display { animation: emergi .9s .05s var(--morbido) both; }
.page-head .lead { animation: emergi .9s .2s var(--morbido) both; }
.divider .tricolore { transform-origin: left; animation: traccia 1.1s .25s var(--morbido) both; }

/* Bands: a touch of depth and a light edge */
.band { position: relative; background: linear-gradient(180deg, #202428, #15181b); }
.band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
}

/* Car cards: lift and tilt towards the pointer, glowing tricolore edge, light where the pointer is */
.car {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, #1f2327, #16191c);
  transition: transform .6s var(--morbido), box-shadow .6s var(--morbido);
}
.car::before {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; padding: 1px;
  background: linear-gradient(135deg, var(--verde-luce), rgba(255, 255, 255, .7) 50%, var(--rosso-luce));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  opacity: 0; transition: opacity .5s;
}
.car::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(420px circle at var(--px, 50%) var(--py, 0%), rgba(255, 255, 255, .1), transparent 45%);
  opacity: 0; transition: opacity .5s;
}
.car:hover, .car:focus-visible {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .9), 0 0 46px -12px rgba(0, 196, 94, .45);
}
.car:hover::before, .car:focus-visible::before, .car:hover::after { opacity: 1; }
@media (hover: hover) and (pointer: fine) { .car:hover { transition: transform .15s linear, box-shadow .6s var(--morbido); } }
.car-visual img { transition: transform 1s var(--morbido); }
.car:hover .car-visual img { transform: scale(1.06); }
.car:hover .price { text-shadow: 0 0 18px rgba(255, 255, 255, .4); }
.price-row .more { transition: color .3s, translate .3s var(--morbido); }
.car:hover .more { translate: 4px 0; }

/* Steps: a light line runs across, the red numbers light up one after the other */
.steps { position: relative; }
@media (min-width: 861px) {
  .steps { padding-top: 26px; }
  .steps::before {
    content: ""; position: absolute; left: 0; right: 24px; top: 0; height: 2px;
    background: linear-gradient(90deg, var(--verde), var(--bianco), var(--rosso));
    box-shadow: 0 0 14px rgba(255, 255, 255, .35);
    transform-origin: left; transition: transform 1.6s var(--morbido);
  }
  .fx .steps:not(.acceso)::before { transform: scaleX(0); }
}
.fx .steps li::before { color: transparent; -webkit-text-stroke: 1.5px var(--rosso); transition: color .7s var(--morbido), text-shadow .7s; }
.fx .steps.acceso li::before { color: var(--rosso); text-shadow: 0 0 26px rgba(255, 59, 74, .55); }
.fx .steps.acceso li:nth-child(2)::before { transition-delay: .2s; }
.fx .steps.acceso li:nth-child(3)::before { transition-delay: .4s; }
.fx .steps.acceso li:nth-child(4)::before { transition-delay: .6s; }
.passi li::before { text-shadow: 0 0 20px rgba(255, 59, 74, .45); }

/* Reviews: the score counts up and the stars light up one by one */
.score-num { text-shadow: 0 0 40px rgba(255, 255, 255, .18); font-variant-numeric: tabular-nums; }
.score .stars svg { filter: drop-shadow(0 0 6px rgba(255, 193, 7, .6)); }
.fx .score .stars svg { opacity: 0; scale: .4; transition: opacity .4s, scale .5s cubic-bezier(.3, 1.6, .5, 1); }
.fx .score.acceso .stars svg { opacity: 1; scale: 1; }
.fx .score.acceso .stars svg:nth-child(2) { transition-delay: .12s; }
.fx .score.acceso .stars svg:nth-child(3) { transition-delay: .24s; }
.fx .score.acceso .stars svg:nth-child(4) { transition-delay: .36s; }
.fx .score.acceso .stars svg:nth-child(5) { transition-delay: .48s; }

/* Service rows: a light bar and the link sliding forward */
.service { position: relative; }
.service::before {
  content: ""; position: absolute; left: -16px; top: 26px; bottom: 26px; width: 3px; pointer-events: none;
  background: linear-gradient(var(--verde-luce), var(--bianco), var(--rosso-luce));
  box-shadow: 0 0 12px rgba(255, 255, 255, .4);
  transform: scaleY(0); transition: transform .4s var(--morbido);
}
.service:hover::before { transform: scaleY(1); }
.service a { transition: color .3s, translate .3s var(--morbido), text-shadow .3s; }
.service:hover a { color: var(--bianco); translate: 6px 0; text-shadow: 0 0 12px rgba(255, 255, 255, .5); }

/* White call-to-action band: a tricolore edge that glows */
.cta { position: relative; }
.cta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; pointer-events: none;
  background: linear-gradient(90deg, var(--verde) 0 33.3%, var(--bianco) 33.3% 66.6%, var(--rosso) 66.6%);
  box-shadow: 0 0 24px rgba(255, 255, 255, .35);
}

/* Details that glow: prices, focused fields, sliders */
.detail-side .price, .calc-result .price { text-shadow: 0 0 30px rgba(255, 255, 255, .18); }
.field, .scelta label { transition: box-shadow .3s; }
.field:focus-within { box-shadow: inset 0 -2px 0 var(--verde-luce), 0 0 24px -8px rgba(0, 196, 94, .6); }
.range > input { filter: drop-shadow(0 0 6px rgba(0, 196, 94, .45)); }
.thumbs button { transition: opacity .3s; }

/* Footer and phone bar */
.site-footer { position: relative; }
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--verde) 30%, var(--bianco) 50%, var(--rosso) 70%, transparent);
  opacity: .5;
}
@media (max-width: 820px) {
  .contact-bar {
    background: rgba(0, 0, 0, .72);
    -webkit-backdrop-filter: blur(14px) saturate(150%);
    backdrop-filter: blur(14px) saturate(150%);
  }
}

/* Sections and cards rising into view (classes set by main.js) */
.fx .rivela { opacity: 0; translate: 0 26px; }
.fx .rivela.visto { animation: emergi .9s var(--morbido) var(--ritardo, 0s) both; }
@media (prefers-reduced-motion: reduce) {
  .fx .rivela, .fx .score .stars svg { opacity: 1 !important; translate: none !important; scale: none !important; }
}