/* =========================================================
   DPCARUSATOSICURO — vetrina auto DP CAR
   HTML/CSS/JS puro, nessuna build, nessuna dipendenza esterna.

   Aspetto IDENTICO al sito dell'officina DP CAR: stessi valori copiati
   dal suo codice (tailwind.config.js + DPCarLandingPage.jsx), non
   "somiglianti":
   - sfondo nero profondo #060708 con i grandi monogrammi "dp" fantasma
     (pieni e a contorno), bagliori giallo/arancio/rosso che si muovono
     piano e grana fine (lo sfondo lo disegna js/main.js);
   - colori del logo ufficiale: giallo #F7C707 → arancio #F96A03 → rosso #FC3502;
   - barra di navigazione "a isola" in vetro scuro, bottoni a pillola con
     bagliore, titoli molto pesanti con la parte finale in gradiente.
   ========================================================= */

:root {
  /* Colori del logo ufficiale DP CAR (uguali a tailwind.config.js dell'officina) */
  --yellow: #F7C707;
  --orange: #F96A03;
  --red: #FC3502;
  --ink: #060708;                 /* sfondo di pagina */
  --brand-gradient: linear-gradient(90deg, var(--yellow), var(--orange), var(--red));
  --brand-gradient-diag: linear-gradient(135deg, var(--yellow), var(--orange) 55%, var(--red));
  --glow: rgba(249, 106, 3, 0.30);
  --glow-strong: rgba(249, 106, 3, 0.50);

  /* Testi (scala "slate" dell'officina, tema scuro) */
  --text: #f8fafc;
  --text-soft: #cbd5e1;
  --text-muted: #94a3b8;
  --accent-text: #fb923c;         /* arancio chiaro per etichette e icone */
  --btn-text: #0f172a;            /* testo scuro sui bottoni in gradiente */

  /* Vetro */
  --glass: rgba(255, 255, 255, 0.05);
  --glass-strong: rgba(0, 0, 0, 0.50);
  --border: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.15);

  --radius: 1rem;
  --radius-lg: 1.5rem;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* compatibilità con eventuali stili inline già presenti */
  --white: var(--glass);
  --navy-dark: var(--ink);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Puntatore a macchinina nei colori del logo */
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='22' viewBox='0 0 64 34'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='0'><stop offset='0' stop-color='%23F7C707'/><stop offset='.55' stop-color='%23F96A03'/><stop offset='1' stop-color='%23FC3502'/></linearGradient></defs><path d='M4 24 Q4 15 14 14 L22 6 Q32 2 42 6 L52 14 Q60 15 60 24 L58 27 L6 27 Z' fill='url(%23g)' stroke='%23060708' stroke-width='1.5'/><circle cx='18' cy='27' r='5' fill='%23060708' stroke='%23fff' stroke-width='1.2'/><circle cx='46' cy='27' r='5' fill='%23060708' stroke='%23fff' stroke-width='1.2'/></svg>") 6 27, auto;
}
body { padding-top: 6.5rem; min-height: 100vh; }
@media (min-width: 640px) { body { padding-top: 7.5rem; } }

::selection { background: rgba(249, 106, 3, 0.30); color: #fff; }

input, textarea, select { cursor: auto; }

h1, h2, h3, h4 { margin: 0; line-height: 1.1; }
h1, h2 { font-weight: 900; letter-spacing: -0.025em; }
h3 { font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

main, .site-footer { position: relative; z-index: 1; }

.container {
  max-width: 80rem;              /* max-w-7xl come l'officina */
  margin: 0 auto;
  padding: 0 1rem;
}
@media (min-width: 640px) { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem; } }

.icon { width: 1.1em; height: 1.1em; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Testo in gradiente del logo */
.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--orange);
  -webkit-text-fill-color: transparent;
}

/* Etichetta piccola sopra i titoli ("Servizi", "Prenotazione"... sull'officina) */
.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-text);
}
/* Pillola con bordo arancio (quella sopra al titolo principale) */
.eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(251, 146, 60, 0.30);
  background: rgba(249, 106, 3, 0.10);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-text);
}

/* =========================================================
   SFONDO in stile logo (creato da js/main.js dentro .dp-bg)
   ========================================================= */
.dp-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.dp-bg .vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 20% 10%, rgba(60, 64, 66, 0.35), transparent 70%);
}
.dp-bg .ghost {
  position: absolute;
  max-width: none;
  height: auto;
  will-change: transform;
  transform: translateY(calc(var(--scroll, 0) * var(--speed, -18vh))) rotate(calc(var(--scroll, 0) * var(--spin, 0deg)));
}
/* Posizioni e dimensioni uguali all'officina (prima mobile, poi schermi larghi) */
.ghost.g1 { left: -28vw; top: -12vh; width: 105vw; opacity: 0.9; }
.ghost.g2 { right: -30vw; top: 6vh; width: 90vw; --speed: -40vh; --spin: 8deg; }
.ghost.g3 { right: -22vw; top: 18vh; width: 80vw; opacity: 0.7; }
.ghost.g4 { bottom: -22vh; right: -35vw; width: 95vw; opacity: 0.6; --speed: -40vh; }
.ghost.g5 { bottom: -30vh; left: -20vw; width: 80vw; opacity: 0.6; }
@media (min-width: 640px) {
  .ghost.g1 { left: -18vw; width: 78vw; }
  .ghost.g2 { right: -12vw; width: 52vw; }
  .ghost.g3 { right: -4vw; width: 44vw; }
  .ghost.g4 { right: -14vw; width: 58vw; }
  .ghost.g5 { width: 46vw; }
}
.dp-bg .glow {
  position: absolute;
  border-radius: 999px;
  filter: blur(64px);
}
.dp-bg .glow-a {
  top: -12rem;
  left: 50%;
  width: 40rem;
  height: 40rem;
  background: linear-gradient(to top right, rgba(247, 199, 7, 0.15), rgba(249, 106, 3, 0.20), rgba(252, 53, 2, 0.25));
  transform: translate(-50%, 0);
  animation: dpcar-drift-a 16s ease-in-out infinite;
}
.dp-bg .glow-b {
  bottom: 0;
  right: 0;
  width: 32rem;
  height: 32rem;
  background: linear-gradient(to top right, rgba(249, 106, 3, 0.15), rgba(252, 53, 2, 0.20));
  transform: translate(33%, 33%);
  animation: dpcar-drift-b 20s ease-in-out infinite;
}
.dp-bg .grain {
  position: absolute;
  inset: 0;
  opacity: 0.12;
  mix-blend-mode: soft-light;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAAAAACPAi4CAAAPu0lEQVR42gXBB3jThYIA8CT/7L33aJq0TZukM120kNKW2hbZyJSheJzzPO+d+nzq03fvfZ7e8b3nqQ/u88SnH4gCgmwKlC5oS2fSkTRp0zR7771zvx/4U4zHSfJWNdzPyrIJrZj3m2iC5elY2ZyLXNhFhQ9V+RDb7wrKximowmxjw5mTFsvr87fqaWaRhSe4KrYzZwBJUV49RJB8ISBLs1ZMQeGFt+FLDDUeBaKs3FGDKtW0/GjmLYgP30hW45fZRKjeHfML5tqd4FXvaKLmx1cA+LYhNlHd3edJO+Z7DPinRdM2azXUjtIXw0GNY9+DPHf/Iif/hAohGJh29DPDqSUa3gMnWQvEehlrrVgHfKGrhBEanlTe2gqXlwnvWXeZs2X/N9sFgOH2NYX/ZhcKc4fhyW+eF8COnOsPMDdCdS54Tmm4Th3+ktca8W8AR6IxfwRP3PAyFyRfJViBXfIFhvDhphR6kcdtRrEVs7Glf+WIYIiid1lUlYkicspEMvmEuttf3k69SM/0Ahhx7YofGta0bV5zxsRTCMlPzzHtPVuWvN5SZXg0bBRm6lyGSC5B7kkmzpf/mnnea3nMgVRutpodFPaqfAj4CJUyVvlj+OmBTr+QP8wu8JcowZHZZvzk0Q2GG299f1o5ynqEr7sh8KtKQzVIXcIELam/GLHEdxr6V3lwAEPWlbl0LKzSDh5pvR2qr7qUta0rvTZeDj7+bOVd+3rBhelbNFpTIozRwej45IR6/ypmgL6dHNWo0/QEAIiQgKTe68RqwbhMCawurkYKCtLoqmyInJroqVpIx83wgNu6lUaxEiZ2I72dSyw0B27sRYIL82+Evu8eBkSQjmF/l2wdZi4qssWSRW49virhq1UFtqVa7hKjkSFFLcooZn/aJIQfgoTBZBeBpZgvKXDUzYZ08QB5DmiUT+i6DB57S3bLYxdztrXwDLUmXovtfJlhAB+1Oau2GIZM3ZpsF8OAu+nXt+sCYH/mXhKyLz5T37vgFLGBt3SvbDYhzj2/ws4nNTJPzE26fNqk6Bz9b70JFLzR/0iIYAg3ILPcLfUA1fjiNAhGCicT3DfO23nQ7yi1pgTwjtr7rO2zJm8lwL920pipWp/ov1OEGVvzOlbctHfFsCXEKJaC96Wt5gsoRHjyuGd2ncX02xyS+aLy4Fd5B9CxAKEM0nAjNlCEdp3RlIMiGzKeUPdsdUzp5B/PQNNk0eIAI5CTelomt2whrhWP6akMkbHUykqPWVsWOMD2jYqlg4dlGWUBpFTvXK32x7BitGj8ZgvFjpX9bCQ1XmnQA7usM5EKnB/pnaLHnqEJyVWgJsUrpe/6YZsL+LjxDJ1hc0RhBD/uav2MwBTkTPinJUqcvsrrKq02O9hB594xXqgioX7ZWE+cKYqhxeiU+Gzz9GrGsjhZBKZMf5gSXWMGs5jN6uqZDp0UpPyhps9sDC9gTxRvbSCbVNHunHvRk7u27waLl3jWSZt20Rwnf8tz0EQI4YXLwKvJGGeaWgHd2E/6RvJvloI1ZKLXqAsubhqZt4rpUDui4c6mQIqd27rYN/JlWkunUhaK789Kt+5DuBH0cRzQ5cKD/2UwHxelriCmpljRNRJOoEZN4A9/W5p1rCNAoMekhJkqFrqlUlAdFrPjIWGVsWDAiMEDZhPbUrUb2KzLa4aPR8ZqSZacsAxVKhfw46MCBQSLcffCsCJm5jEL52cInjgOXB9FEI28lLmsNCNLvPS/vQ4cg01bACS0Omn3Gr9n7ZeE79SDJqcwOOuvQJlJNRc6HuLYq5irf9yoJvxPoXTPU/zaHpHPOX/g4EpdQk0ai5OE4cSoBtjlVxs899celUlPPrB2zXkrB9ec5ZD5OKpG24I4z0KCf5Ax5Y8vfstnofG3cNrrTxehlxXMhgk37ZKWr+KxgDOc4vZFSc86eip5TIUweJ8cOVxcKgO1hTMl6pCL8awUwQf/Q3L/OZFrXjm0Q6t+Pfd19Yr7AtAKHMIfmeLeBJyNo0RgI47Jd6EeJVnIrrdVw+HgRjgeFmqxho/yR4rKFeaHV47y5mDS39rvQ2WL7rIHv4OJw1lq4Bb5/X9/F3hNv/NyyU5TnmFon+y726I/JdYijoyDDodqEnoJBZiOrod2XPD44FDjPPd2sc/NlaRINTqNHJjCsS/a+RtAnO7hz1InmC2L+v4pGqRyHFOILMEVA/TAckXn0ixmTVj1E7JvA5hIoF924G0EurlzA21mXyWQE7fet+aQwCHeRKQpikioeO2/HEHrKFY3tAQHRT5qv0fKDKyCaFLYICyEu3HQnZUkwTW5eqyJ7LAtZzuHG+G1X9aWrQK9517xVl3ojTXNWj/8xoadf2nP2sKhElTf4wq976j/Y82qcEdRxz88EO/1DoKWmQ4q4pycTSmfKMoGH/xpIW4EUNyc6Mw7dyJCQN0+XYnqe0hYP37H26UmHi3E2Somy2gJRcOiz4VID2GjJWfTaJgRPBNDMwVk+L3aLUQJ8DYPVdgz9WqA62HUG+YzjtNTtb/Vc+gPxcvTYudIbSRo2udvZqUUQWSKLYzAKFIVCaGNzJwSWYNd5o1CCiIO9S/FfEBSK2n/j2KuFPmdYQaDKH2dsYKAZM0f+Gwlss9w1tF2otG6tfXerD91u8y82OamT3nN0P9s5U3GgA44XTzGvVIFHLwzSq+eSqNF2WDFY74GJpwQNmiIi90MyuVYB2+hc8PhEizukelM3cnzx1PrOy3GslueRgsg6FyPETHbjb1/RKS4rP5VmtcfxjytY8d1+VfPvRTPDUtla1yetuuyfPKtmxqq9bSrWHZqXoIeQRD0h0a6OEDPWByBjsK0IXUXJSp3/m3T7MHTD2oj1JK2Nbm2yMPZLHp244/lLnp+x6ykXvlNgzWzfJmhY4y94IeqMTMBoBOpRi1RFCCLXa/tHYQKCPtvq8L1M6al6a4tA42mET4meuy93XktnLkChZzd+oqJ/UCKAHc8kXzLwYYg79wFaOkXO+Oruoq5t1qQ6JKaJ12Pkxz4rJv02k5P0BVD2mNc0N3tjopkOBMzB3f5038rUElZMAO58DvicpuJkQYayQv+PDby/oGzFIlz3UzVZpMdvjYIZy2IMXtDO9x4JY1mfHMWH3/maSWapp/WLfexX4lPOi7jw01xtoMD/NcIef4whQjmsaAmSqA6m8UBZEchNNPzsKTwBLsecjIX0UHHMsAlI7U0Ahwqe+9GXv1pd/QzhydWXIMNAexNvSQDCdKD8GLgRfTMffqQIjjWwiPWKM9v4nMkZoIhCVUH2qOwX4kEtLk5k1SJ9NW1WVxKLASzCvVgyD36vbuBa7KFs2zHtqnvS59D5widScrkEdX1Y74V7ITmNSqclItqAtHf46oYPtt6Fdm2rlPRMzP5pB4TGoUD262gQ0IPV1NLgjQG09sN0IcvepvAbdf5y54K+F0F7VFl9An591fqKMkZAKRYDEsJqSwHSxqptk9JHXH+ELCDC0d8Z0YSutdnIdP+Ny3c7soVztXBAxg4wr96Oo6hs5ANetSbg2l2NfZm2RKBvCz4gx4zRDIBiSTUtgwB9odFxUTH3bd1y07GsDgdWC/7B0eVV97uGjh4pf2ShkG6qnwoB2z3/9muXg6b+1IqROvfTQoULKdHkOAVMhagXLwM8fpKLmnofENPYY76wrU9nKqlQ6E5ZALr3WW3VJTD1VsSdSqwXcU8HrG0yAXXqc33nLWbFieBNJLoAQSVEG72s5ATBBsnuZrD7rvpwjrVRIiC7rqb5EuVcc8Gn7gayLCXjyLRZdQk/L5r7MTnu0x6f/lzh0CCGSnwgpMFoq8sFTruVx35M6p+5OLHb5cHIwV1g6+cfxFaVO+BXqE7cnBDz/U6L3w8tdBd8XaYbi/DKIGRxc2mXDkgh8cHe+5h83wS/vwLy7yq8c/UAVdGJP3pKAxFn3N+qBrs9c2v+Fod8Dz1r5XBZCo2fxN24tISscjUiSadTqCrjMqhoeTjqo4HdTBseNMn1crJfKnkbJOF6MJnhaMBcdLwIcrXNScJFWU+/utf1NM97n7Dxw4/qpyAppIgbdBhp8s2R1aET+AOEL8KfzClSCNrPvkoIv5LUSeD+DuEvIMBGPi7fUiYLcsMf30DoU2wJuQX/aERzsZeQxTo1VgAErOwhRV2xaOcmzmzTtZUJBWzlUUEhPisrGli+5jb7t5ElbgRiRmWo2dEiZIjEwiuWvLu9dCAbRdQRzi575cmWDAVUhYSLHQK8yLcumIzIANnm/hJz+b7jgmOrAT0ND9VuC1ThCqG9FY5ZLlpvg66Gl8OOraZgTYf78eClOq5goW5Wr4qU7cNC5cdSYqloyf0FJepyZfnBxKzQqqX0m/053zRukMXsH6YJU9S46JUdK8TCSjN2qB08hlT8eioydBrivb/mq81V/Df+iZBx6ibN1AcdhnVjkLnqEMv90+XJ+VaQQK1olgnQmWeihmGDwWB7VxofrzDMP/L518Awb+GGn7cHd/gkNuvS92TzdCZ1LrwgwKx6EPt1VncDsi57glONu06xZ8c75yY1pXY4j5ABgUX+QIuqtW+Od/b5LXWhjITBlkE/WC3PS/wZMeM6RrfJtRKJtfhv8Op0VTz1OD7aM16f8DINSvucY8Cz2Mgq6zkM3EJ+mzgRi2U9VjPE4KISL/vVynUA03vh1SpMuC5IExprQsn5jEKFZ/Gz5K7QUWsg7lw5Pss5JhJV93o3poY2d9JlttTkMo4OcgYVuslbFzBmE4jzwdsCA6hxcfjRdWmU8RB0A0ImGvOLFAqugTKN94rQC5CEl6nUqXrO76bGWI2/NJaXZ6f3d3+Ts+BmFOYZL73FvZy7UztFOpVmgdeleGw1Sy7eCbASsIMxTrImYdB4FBz4/MLjrqiyUMZbb9SbmTcC3e4UPq/sArq5rUUm3H672j0zyt7A0qUKn5ZPsekLZxI8rRhuH2FbsxpdueAiWIws5pakVhha20aW5kPW1GfsUFXz3jKA1feS0PxXsnPLXlON1Z/qUFSOYtd4bUkB5BVbuLJOEMHjCPkwDQFZglgKie3LK6F1nGbg3ARMPR8ihK6ayF3T4IqxAlWwsFPqtrWAXGjuc9B8KRaBvf/SqvcyP7coj4/HgPcvqmOgGAOJV0O9vmEjMXawdrSgbSV1DPSfa0490+D6cmt58uPq5wCBwISjcR46PY10J9fpg3eix8bZGzU2YC9ydMJ/zC6fmibMCcjjFH3/eZiBZx+GaJD07WkvE9hVF5/Z/kOfYrEjSDsoDmmwZrE+5ahUnkDkVBcWgEDO/AGm4DJyEbVQrDF8+4jXYUW0UcWguwou7FUgCJ93XUkYMmUhOq0TaxvFTkNDVd79fWjCXBgmJKlv5XH/j8QYv2tofObggAAAABJRU5ErkJggg==");
  background-repeat: repeat;
  background-size: 64px 64px;
}
@keyframes dpcar-drift-a {
  0%, 100% { transform: translate(-50%, 0) scale(1); }
  50% { transform: translate(-38%, 8%) scale(1.15); }
}
@keyframes dpcar-drift-b {
  0%, 100% { transform: translate(33%, 33%) scale(1); }
  50% { transform: translate(22%, 24%) scale(1.2); }
}

/* =========================================================
   Bottoni fissi WhatsApp / Email (aggiunti da js/main.js)
   WhatsApp: stessa pillola verde dell'officina, in basso a destra.
   ========================================================= */
.floating-tab {
  position: fixed;
  bottom: 5rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  white-space: nowrap;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: floatIn 0.5s 0.6s both cubic-bezier(.2,.9,.3,1.3);
}
.floating-tab:hover { transform: scale(1.05); }
.floating-tab:active { transform: scale(0.95); }
.floating-tab svg { width: 1.5rem; height: 1.5rem; flex: none; }
.floating-tab .floating-label { animation: floatBlink 1.6s ease-in-out infinite; }
.floating-whatsapp {
  right: 1.25rem;
  background: #25D366;
  color: #fff;
  box-shadow: 0 20px 25px -5px rgba(37, 211, 102, 0.40), 0 8px 10px -6px rgba(37, 211, 102, 0.40);
}
.floating-whatsapp:hover { box-shadow: 0 20px 25px -5px rgba(37, 211, 102, 0.60), 0 8px 10px -6px rgba(37, 211, 102, 0.60); }
.floating-email {
  left: 1.25rem;
  background: var(--brand-gradient);
  color: var(--btn-text);
  box-shadow: 0 20px 25px -5px var(--glow), 0 8px 10px -6px var(--glow);
}
.floating-email svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 640px) {
  .floating-tab { bottom: 6rem; }
  .floating-whatsapp { right: 1.5rem; }
  .floating-email { left: 1.5rem; }
}
@keyframes floatIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes floatBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* =========================================================
   NAVBAR "a isola" in vetro (come l'officina)
   ========================================================= */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}
.navbar-inner {
  position: relative;
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass-strong);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.logo img { height: 2.75rem; width: auto; }
@media (min-width: 640px) { .logo img { height: 3.5rem; } }
.logo-tag {
  display: none;
  border-left: 1px solid var(--border-strong);
  padding-left: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.logo-tag strong { display: block; color: var(--accent-text); letter-spacing: 0.1em; }
@media (min-width: 1024px) { .logo-tag { display: block; } }

.nav-links { display: none; gap: 2rem; }
.nav-links a {
  position: relative;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-soft);
  transition: color 0.2s;
}
.nav-links a:hover { color: #fff; }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  height: 1px;
  width: 0;
  background: var(--brand-gradient);
  transition: width 0.3s;
}
.nav-links a:hover::after { width: 100%; }
@media (min-width: 768px) { .nav-links { display: flex; align-items: center; } }

/* Menu mobile aperto */
.nav-links.open {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(6, 7, 8, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.nav-links.open a { padding: 0.75rem 1rem; border-radius: 0.75rem; color: #e2e8f0; }
.nav-links.open a:hover { background: rgba(255, 255, 255, 0.05); }
.nav-links.open a::after { display: none; }
@media (min-width: 768px) {
  .nav-links.open { position: static; flex-direction: row; gap: 2rem; padding: 0; border: 0; background: none; backdrop-filter: none; }
  .nav-links.open a { padding: 0; }
}

.navbar-right { display: flex; align-items: center; gap: 0.75rem; }
.icon-btn, .menu-toggle {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--glass);
  color: #e2e8f0;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.icon-btn:hover, .menu-toggle:hover { border-color: var(--orange); color: var(--accent-text); }
.icon-btn .icon, .menu-toggle .icon { width: 1.25rem; height: 1.25rem; }
@media (min-width: 768px) { .menu-toggle { display: none; } }
.navbar-right .btn-sm { display: none; }
@media (min-width: 768px) { .navbar-right .btn-sm { display: inline-flex; } }

/* =========================================================
   BOTTONI a pillola
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.875rem 1.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  font-family: inherit;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s, color 0.2s, background 0.2s;
}
.btn:hover { transform: scale(1.05); }
.btn:active { transform: scale(0.95); }
.btn .icon { width: 1rem; height: 1rem; }
.btn-orange {
  background: var(--brand-gradient);
  color: var(--btn-text);
  box-shadow: 0 20px 25px -5px var(--glow), 0 8px 10px -6px var(--glow);
}
.btn-orange:hover { box-shadow: 0 20px 25px -5px var(--glow-strong), 0 8px 10px -6px var(--glow-strong); }
.btn-outline {
  background: transparent;
  border-color: var(--border-strong);
  color: #e2e8f0;
}
.btn-outline:hover { border-color: var(--orange); color: var(--accent-text); }
.btn-white {
  background: #fff;
  color: var(--btn-text);
}
.btn-white:hover { background: #f1f5f9; }
.btn-block { width: 100%; }
.btn-block:hover { transform: scale(1.02); }
.btn-sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; }

/* =========================================================
   HERO
   ========================================================= */
.hero { padding: 3rem 0 6rem; }
@media (min-width: 640px) { .hero { padding: 4rem 0 8rem; } }
.hero-inner { display: grid; gap: 4rem; align-items: center; }
@media (min-width: 1024px) { .hero-inner { grid-template-columns: 1.1fr 0.9fr; } }
.hero h1 {
  margin-top: 1.5rem;
  font-size: 3rem;
  line-height: 1.05;
}
@media (min-width: 640px) { .hero h1 { font-size: 3.75rem; } }
@media (min-width: 1024px) { .hero h1 { font-size: 4rem; } }
@media (min-width: 1280px) { .hero h1 { font-size: 4.5rem; } }
.hero p.lead {
  margin-top: 1.5rem;
  max-width: 36rem;
  font-size: 1.125rem;
  color: var(--text-soft);
}
.hero-actions { margin-top: 2.25rem; display: flex; flex-wrap: wrap; gap: 1rem; }
.hero-stats {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 2.5rem;
}
.hero-stat strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero-stat span { font-size: 0.875rem; font-weight: 500; color: var(--text-muted); }

/* Riquadro di vetro fluttuante (come "Cosa aspettarti" dell'officina) */
.hero-visual {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
  animation: bob 6s ease-in-out infinite;
}
.hero-visual::before {
  content: "";
  position: absolute;
  right: -2.5rem;
  top: -2.5rem;
  width: 10rem;
  height: 10rem;
  border-radius: 999px;
  background: linear-gradient(to bottom right, rgba(247, 199, 7, 0.30), rgba(252, 53, 2, 0.30));
  filter: blur(40px);
}
.hero-visual svg.hero-car { position: relative; width: 100%; height: auto; max-width: 340px; margin: 1.5rem auto 0; }
.hero-visual h3 { position: relative; margin-top: 0.5rem; font-size: 1.5rem; font-weight: 900; }
.hero-visual .eyebrow { position: relative; }
.hero-visual ul { position: relative; list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
.hero-visual li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; color: var(--text-soft); }
.hero-visual li strong { display: block; color: #fff; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

.icon-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  background: linear-gradient(to bottom right, rgba(247, 199, 7, 0.15), rgba(252, 53, 2, 0.15));
  color: var(--accent-text);
}
.icon-tile .icon { width: 1.1rem; height: 1.1rem; }

/* =========================================================
   SEZIONI
   ========================================================= */
.section { padding-top: 4rem; padding-bottom: 4rem; }
@media (min-width: 640px) { .section { padding-top: 6rem; padding-bottom: 6rem; } }
.section-head { max-width: 42rem; margin-bottom: 2.5rem; }
.section-head h2 { margin-top: 0.75rem; font-size: 2.25rem; }
@media (min-width: 640px) { .section-head h2 { font-size: 3rem; } }
.section-head p { margin-top: 1rem; font-size: 1.125rem; color: var(--text-soft); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-alt { background: transparent; }

/* =========================================================
   GRIGLIA AUTO (card di vetro, come i servizi dell'officina)
   ========================================================= */
.car-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .car-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .car-grid { grid-template-columns: repeat(3, 1fr); } }

.car-card {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.car-card::before {
  content: "";
  position: absolute;
  z-index: 1;
  right: -2rem;
  top: -2rem;
  width: 6rem;
  height: 6rem;
  border-radius: 999px;
  background: linear-gradient(to bottom right, rgba(247, 199, 7, 0.30), rgba(252, 53, 2, 0.30));
  filter: blur(40px);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.car-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: rgba(249, 115, 22, 0.40);
  box-shadow: 0 10px 15px -3px rgba(249, 106, 3, 0.15), 0 4px 6px -4px rgba(249, 106, 3, 0.15);
}
.car-card:hover::before { opacity: 1; }
.car-photo {
  position: relative;
  height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
  border-bottom: 1px solid var(--border);
}
.car-photo svg { width: 65%; height: auto; }
.car-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.car-card:hover .car-photo img { transform: scale(1.05); }
.car-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: var(--brand-gradient);
  color: var(--btn-text);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  box-shadow: 0 6px 16px var(--glow);
}
.car-body { padding: 1.25rem 1.5rem 1.5rem; }
.car-title { font-size: 1.1rem; font-weight: 700; color: var(--text); }
.car-meta { margin-top: 0.35rem; font-size: 0.875rem; color: var(--text-muted); }
.car-tags { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.car-tag {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-soft);
}
.car-price-row {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.car-price-row > span:last-child { color: var(--accent-text) !important; font-weight: 600; }
.car-price {
  font-size: 1.4rem;
  font-weight: 900;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--orange);
  -webkit-text-fill-color: transparent;
}

/* =========================================================
   PERCHÉ COMPRARE DA NOI (card come "Come lavoriamo" dell'officina)
   ========================================================= */
.perks-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .perks-grid { grid-template-columns: repeat(3, 1fr); } }
.perk {
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.perk-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: linear-gradient(to bottom right, rgba(247, 199, 7, 0.15), rgba(252, 53, 2, 0.15));
  color: var(--accent-text);
}
.perk-icon .icon { width: 1.5rem; height: 1.5rem; }
.perk-num { display: block; font-size: 0.875rem; font-weight: 900; }
.perk h3 { margin-top: 1.25rem; font-size: 1rem; color: var(--text); }
.perk p { margin-top: 0.5rem; font-size: 0.875rem; color: var(--text-soft); }

/* =========================================================
   FASCIA CONTATTO (pannello grande di vetro)
   ========================================================= */
.contact-strip { padding: 0 0 5rem; }
.contact-strip .container > .strip-panel {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
@media (min-width: 640px) { .contact-strip .container > .strip-panel { padding: 2.5rem; } }
.strip-panel::before {
  content: "";
  position: absolute;
  left: -4rem;
  bottom: -4rem;
  width: 14rem;
  height: 14rem;
  border-radius: 999px;
  background: linear-gradient(to top right, rgba(247, 199, 7, 0.20), rgba(252, 53, 2, 0.25));
  filter: blur(48px);
  pointer-events: none;
}
.strip-panel > * { position: relative; }
.contact-strip h2 { font-size: 1.875rem; }
@media (min-width: 640px) { .contact-strip h2 { font-size: 2.25rem; } }
.contact-strip p { margin-top: 0.5rem; color: var(--text-soft); }
.contact-strip .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* =========================================================
   FOOTER (come l'officina)
   ========================================================= */
.site-footer {
  border-top: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  padding: 3.5rem 0 1.5rem;
  font-size: 0.875rem;
  color: var(--text-muted);
}
.footer-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.footer-grid img { height: 3rem; width: auto; }
.footer-grid h4 { margin-bottom: 0.9rem; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #fff; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-grid li { display: flex; align-items: flex-start; gap: 0.5rem; }
.footer-grid li .icon { margin-top: 0.15rem; color: var(--accent-text); }
.footer-grid a:hover { color: var(--accent-text); }
.footer-bottom {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #64748b;
}

/* =========================================================
   CATALOGO: filtri (pillole come i filtri servizi dell'officina)
   ========================================================= */
.filters-bar {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  margin-bottom: 2rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
@media (min-width: 768px) { .filters-bar { grid-template-columns: repeat(4, 1fr); align-items: end; } }
.filter-field label {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
}
.filter-field select,
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.625rem 0.875rem;
  border-radius: 0.75rem;
  border: 1px solid var(--border-strong);
  background: rgba(255, 255, 255, 0.05);
  font-size: 0.875rem;
  font-family: inherit;
  color: #fff;
  outline: none;
  transition: border-color 0.2s;
}
.filter-field select option, .field select option { background: #111315; color: #fff; }
.filter-field select:focus,
.field input:focus,
.field select:focus,
.field textarea:focus { border-color: #fbbf24; }
.filter-field .btn { padding: 0.625rem 1rem; }
.results-count { margin-bottom: 1.25rem; font-size: 0.9rem; color: var(--text-muted); }
.results-count strong { color: var(--text); }
.empty-state {
  padding: 2.5rem;
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.empty-state a { color: var(--accent-text) !important; }

/* =========================================================
   SCHEDA VEICOLO
   ========================================================= */
.vehicle-grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .vehicle-grid { grid-template-columns: 1.1fr 0.9fr; } }
.vehicle-photo {
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
@media (min-width: 640px) { .vehicle-photo { height: 420px; } }
.vehicle-photo svg { width: 60%; height: auto; }
.vehicle-photo img { width: 100%; height: 100%; object-fit: cover; }
.vehicle-thumbs { margin-top: 0.75rem; display: flex; gap: 0.6rem; overflow-x: auto; padding-bottom: 0.25rem; }
.vehicle-thumb {
  flex: 0 0 auto;
  width: 4.5rem;
  height: 3.5rem;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 0.6rem;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.6;
  background: none;
  transition: opacity 0.2s, border-color 0.2s;
}
.vehicle-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vehicle-thumb:hover { opacity: 1; }
.vehicle-thumb.active { border-color: var(--orange); opacity: 1; }
#v-kicker { font-size: 0.75rem !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-text) !important; }
.vehicle-title { margin-top: 0.5rem; font-size: 2.25rem; font-weight: 900; letter-spacing: -0.025em; color: var(--text); }
@media (min-width: 640px) { .vehicle-title { font-size: 3rem; } }
.vehicle-price {
  margin-top: 0.5rem;
  font-size: 2rem;
  font-weight: 900;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--orange);
  -webkit-text-fill-color: transparent;
}
.vehicle-badges { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.spec-table {
  width: 100%;
  margin-top: 1.5rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.spec-table tr:not(:last-child) td { border-bottom: 1px solid var(--border); }
.spec-table td { padding: 0.75rem 1rem; font-size: 0.9rem; color: var(--text); }
.spec-table td:first-child { width: 45%; color: var(--text-muted); }
.spec-table td:last-child { font-weight: 600; }
.vehicle-description { margin-top: 1.25rem; font-size: 0.95rem; color: var(--text-soft); }
.vehicle-actions { margin-top: 1.75rem; display: flex; flex-direction: column; gap: 0.75rem; }
.vehicle-phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.35rem 1.25rem; margin-top: 0.25rem; font-size: 0.85rem; color: var(--text-muted); }
.vehicle-phones a { color: var(--text-soft); font-weight: 600; }
.vehicle-phones a:hover { color: var(--accent-text); }

/* =========================================================
   CONTATTI
   ========================================================= */
.contact-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .contact-layout { grid-template-columns: 1.15fr 0.85fr; } }
.form-card, .info-card {
  position: relative;
  overflow: hidden;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--glass);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}
.info-card::before {
  content: "";
  position: absolute;
  right: -3rem;
  top: -3rem;
  width: 11rem;
  height: 11rem;
  border-radius: 999px;
  background: linear-gradient(to bottom right, rgba(247, 199, 7, 0.25), rgba(252, 53, 2, 0.25));
  filter: blur(40px);
  pointer-events: none;
}
.info-card > * { position: relative; }
.field { display: block; margin-bottom: 1rem; }
.field label { display: block; margin-bottom: 0.4rem; font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.field input::placeholder, .field textarea::placeholder { color: #64748b; }
.field textarea { min-height: 110px; resize: vertical; }
.form-success { display: none; padding: 1.5rem; text-align: center; border-radius: var(--radius); background: rgba(16, 185, 129, 0.12); color: #34d399; }
.info-card h3 { margin-bottom: 1.25rem; font-size: 1.25rem; font-weight: 900; }
.info-row { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.1rem; font-size: 0.9rem; color: var(--text-soft); }
.info-row strong { display: block; font-size: 0.875rem; color: #fff; }
.info-row a:hover { color: var(--accent-text); }
.info-row .phone-line { display: block; }
.info-row .phone-line span { color: var(--text-muted); }
.info-card .btn { margin-top: 0.5rem; }
.muted-note { font-size: 0.8rem; color: var(--text-muted); }

/* =========================================================
   Meno animazioni per chi le ha disattivate nel sistema
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .dp-bg .ghost { transform: none !important; }
}

/* Su telefono il bottone Email resta solo icona, per non coprire i contenuti */
@media (max-width: 639px) {
  .floating-email { padding: 0.75rem; }
  .floating-email .floating-label { display: none; }
}

/* Auto vendute: restano visibili, ma si capisce subito che non sono più disponibili */
.car-badge-sold { background: #f8fafc; color: #0f172a; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4); letter-spacing: 0.06em; text-transform: uppercase; }
.car-card.is-sold .car-photo img,
.car-card.is-sold .car-photo svg { filter: grayscale(0.85) brightness(0.7); }
.car-card.is-sold .car-price { opacity: 0.55; }