/* ============================================================
   Top Cars — "Cinema del crepuscolo siciliano"
   Dark warm cinematic, photo-driven. Amber = atmosfera, Rosso = azione.
   ============================================================ */

:root{
  --bg:        #17120e;   /* warm near-black */
  --bg-2:      #1e1811;   /* lifted surface */
  --surface:   #271f16;   /* cards */
  --surface-2: #322619;   /* card hover / borders warm */
  --ink:       #f6efe5;   /* warm off-white */
  --muted:     #c7b8a3;   /* warm grey, AA on --bg */
  --amber:     #f2a851;   /* golden-hour accent (atmosphere) */
  --amber-2:   #ffbf73;
  --amber-tint:rgba(242,168,81,.14);
  --red:       #e4222a;   /* brand accent */
  --red-cta:   #c81e24;   /* button bg, 4.7:1 con bianco */
  --border:    #362a1e;
  --green:     #009246;
  --white-it:  #f4f4f2;
  --red-it:    #ce2b37;

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;

  --container: 1180px;
  --pad: 22px;
  --radius: 16px;
  --radius-sm: 11px;

  --shadow: 0 24px 60px -28px rgba(0,0,0,.75);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }

h1,h2,h3{ font-family:var(--font-display); font-weight:700; line-height:1.06; letter-spacing:-.015em; margin:0; }

a{ color:inherit; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:200;
  background:var(--amber); color:#1a1206; padding:10px 16px; border-radius:8px;
  font-weight:600; transition:top .2s;
}
.skip-link:focus{ top:12px; }

:focus-visible{ outline:2px solid var(--amber-2); outline-offset:3px; border-radius:4px; }

/* ---------- Buttons ---------- */
.btn{
  --h:52px;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--h); padding:0 26px;
  font-family:var(--font-body); font-size:16px; font-weight:600;
  border-radius:100px; border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .18s var(--ease), background-color .2s, box-shadow .25s, border-color .2s;
}
.btn--sm{ --h:44px; padding:0 20px; font-size:15px; }
.btn--primary{ background:var(--red-cta); color:var(--ink); box-shadow:0 10px 26px -12px rgba(228,34,42,.85); }
.btn--primary:hover{ background:#d9242c; transform:translateY(-2px); box-shadow:0 16px 34px -14px rgba(228,34,42,.95); }
.btn--ghost{ background:rgba(246,239,229,.04); color:var(--ink); border-color:rgba(246,239,229,.35); }
.btn--ghost:hover{ border-color:var(--amber); color:var(--amber-2); transform:translateY(-2px); }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:80;
  transition:background-color .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.site-header.scrolled{ background:rgba(18,13,9,.9); border-bottom-color:var(--border); }
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; height:76px;
}
.brand{ display:inline-flex; align-items:center; }
.brand__logo{ height:50px; width:auto; mix-blend-mode:screen; }

.nav{ display:flex; align-items:center; gap:26px; }
.nav__link{
  text-decoration:none; color:var(--ink); font-weight:500; font-size:16px;
  opacity:.9; transition:color .2s, opacity .2s; position:relative;
}
.nav__link:hover{ color:var(--amber-2); opacity:1; }
.nav__cta{ margin-left:6px; }

.hamburger{
  display:none;
  width:46px; height:46px; border:0; background:transparent; cursor:pointer;
  padding:11px; border-radius:10px;
}
.hamburger span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.hamburger span+span{ margin-top:5px; }

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:92svh; display:flex; align-items:flex-end; overflow:hidden; }
.hero__bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  object-position:center 56%;
  animation:heroZoom 20s var(--ease) forwards;
}
@keyframes heroZoom{ from{ transform:scale(1.08); } to{ transform:scale(1); } }
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(18,13,9,.72) 0%, rgba(18,13,9,0) 26%),
    linear-gradient(0deg, rgba(15,10,6,.94) 4%, rgba(15,10,6,.5) 42%, rgba(15,10,6,0) 72%);
}
.hero__glow{
  position:absolute; left:-6%; bottom:6%; width:70%; height:70%;
  background:radial-gradient(closest-side, var(--amber-tint), transparent 70%);
  pointer-events:none;
}
.hero__inner{ position:relative; padding-block:0 clamp(48px,9vw,104px); }
.hero__eyebrow{
  margin:0 0 18px; color:var(--amber-2); font-weight:600; font-size:14.5px;
  letter-spacing:.02em;
}
.hero__title{
  font-size:clamp(2.5rem, 8.4vw, 5.1rem); font-weight:800; margin:0;
  text-shadow:0 2px 30px rgba(0,0,0,.4);
}
.hero__lead{
  margin:22px 0 0; max-width:44ch; font-size:clamp(1.02rem,2.5vw,1.22rem);
  color:var(--ink); opacity:.94;
}
.hero__cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }

/* ---------- Sections ---------- */
.section{ padding-block:clamp(64px,10vw,116px); }
.protezioni{ background:var(--bg); }
.offerta{ background:var(--bg-2); }

.kicker{
  margin:0 0 14px; color:var(--amber); font-weight:600; font-size:14.5px;
  letter-spacing:.01em;
}
.section__title{ font-size:clamp(1.85rem,4.7vw,3rem); max-width:19ch; }
.section__intro{ margin:18px 0 0; max-width:56ch; color:var(--muted); font-size:1.08rem; }

/* ---------- Cards ---------- */
.cards{ display:grid; gap:18px; margin-top:clamp(34px,5vw,52px); }
.cards--3{ grid-template-columns:1fr; }
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:30px 26px;
  transition:transform .25s var(--ease), border-color .25s, background-color .25s;
}
.card:hover{ transform:translateY(-4px); border-color:var(--surface-2); background:#2b2218; }
.card__icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:13px; margin-bottom:20px;
  background:var(--amber-tint); color:var(--amber-2);
}
.card__icon svg{ width:26px; height:26px; }
.card--offer .card__icon{ background:rgba(228,34,42,.13); color:#ff6a70; }
.card__title{ font-size:1.32rem; font-weight:700; }
.card__text{ margin:10px 0 0; color:var(--muted); font-size:1.02rem; }

/* ---------- Band (parco auto) ---------- */
.band{ position:relative; overflow:hidden; display:flex; align-items:center; min-height:clamp(360px,52vw,460px); }
.band__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.band__scrim{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(13,9,5,.93) 0%, rgba(13,9,5,.78) 46%, rgba(13,9,5,.35) 100%);
}
.band__inner{ position:relative; padding-block:56px; }
.band__title{ font-size:clamp(1.9rem,5vw,3.1rem); max-width:15ch; }
.band__text{ margin:18px 0 26px; max-width:50ch; color:var(--ink); opacity:.92; font-size:1.08rem; }

/* ---------- Chi siamo ---------- */
.chi{ background:var(--bg); }
.chi__title{ max-width:22ch; }
.chi__media{ margin:clamp(28px,4vw,44px) 0 0; }
.chi__media img{
  border-radius:var(--radius); border:1px solid var(--border);
  box-shadow:var(--shadow); width:100%; object-fit:cover; aspect-ratio:1294/300;
}
.chi__text{ max-width:68ch; margin-top:clamp(28px,4vw,40px); }
.chi__p{ margin:16px 0 0; color:var(--muted); font-size:1.06rem; }
.chi__p:first-of-type{ color:var(--ink); margin-top:0; }
.chips{ list-style:none; display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 0; padding:0; }
.chips li{
  padding:9px 16px; border-radius:100px; font-size:14.5px; font-weight:500;
  background:var(--amber-tint); color:var(--amber-2); border:1px solid rgba(242,168,81,.22);
}

/* ---------- Contatti ---------- */
.contatti{ position:relative; overflow:hidden; padding-block:clamp(72px,11vw,128px); }
.contatti__bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.contatti__scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,9,5,.9), rgba(13,9,5,.82));
}
.contatti__inner{ position:relative; text-align:center; }
.contatti__title{ font-size:clamp(2rem,5.4vw,3.3rem); margin-inline:auto; max-width:16ch; }
.contatti__lead{ margin:20px auto 0; max-width:52ch; color:var(--muted); font-size:1.1rem; }
.contact-grid{
  display:grid; grid-template-columns:1fr; gap:14px;
  margin:clamp(34px,5vw,48px) auto 0; max-width:820px;
}
.contact-item{
  background:rgba(246,239,229,.05); border:1px solid var(--border);
  border-radius:var(--radius-sm); padding:22px 20px;
  display:flex; flex-direction:column; gap:6px; align-items:center;
}
.contact-item__label{ color:var(--amber); font-size:13.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; }
.contact-item__value{ font-family:var(--font-display); font-weight:700; font-size:1.28rem; color:var(--ink); }
.contatti__social{ display:flex; gap:14px; justify-content:center; margin-top:30px; }
.social-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; border-radius:12px;
  background:rgba(246,239,229,.05); border:1px solid var(--border); color:var(--muted);
}
.social-icon svg{ width:22px; height:22px; }

/* ---------- Footer ---------- */
.site-footer{ background:#100b07; border-top:1px solid var(--border); }
.footer__inner{ display:grid; gap:34px; padding-block:clamp(48px,7vw,68px); }
.footer__logo{ height:72px; width:auto; mix-blend-mode:screen; margin-bottom:16px; }
.footer__payoff{ margin:0; color:var(--amber-2); font-family:var(--font-display); font-weight:600; font-size:1.05rem; max-width:26ch; }
.footer__label{ margin:0 0 12px; font-weight:600; color:var(--ink); font-size:14px; letter-spacing:.03em; text-transform:uppercase; }
.footer__col p{ margin:0 0 6px; color:var(--muted); font-size:1rem; }
.footer__bar{ border-top:1px solid var(--border); }
.footer__bar-inner{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding-block:22px; }
.tricolor{ display:inline-block; width:44px; height:5px; border-radius:3px; background:linear-gradient(90deg,var(--green) 0 33.3%, var(--white-it) 33.3% 66.6%, var(--red-it) 66.6% 100%); }
.footer__copy{ margin:0; color:var(--muted); font-size:14.5px; }
.footer-credit{ margin:0; color:var(--muted); font-size:13px; margin-left:auto; }
.footer-credit a{ color:var(--ink); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(246,239,229,.35); }
.footer-credit a:hover{ color:var(--amber-2); border-color:var(--amber-2); }

/* ---------- Reveal animation (solo se il JS è attivo) ---------- */
.reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal{ opacity:0; transform:translateY(26px); }
.reveal.in-view{ opacity:1; transform:none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:767px){
  .nav{
    position:fixed; inset:0; z-index:90;
    flex-direction:column; justify-content:center; gap:30px;
    background:rgba(17,12,8,.985);
    transform:translateX(100%); visibility:hidden;
    transition:transform .34s var(--ease), visibility .34s;
  }
  .nav.is-open{ transform:none; visibility:visible; }
  .nav__link{ font-size:1.5rem; font-family:var(--font-display); font-weight:600; }
  .nav__cta{ margin-left:0; }
  .hamburger{ display:block; position:relative; z-index:100; }
  body.nav-open{ overflow:hidden; }
  .hamburger.is-active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .hamburger.is-active span:nth-child(2){ opacity:0; }
  .hamburger.is-active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

@media (min-width:600px){
  .contact-grid{ grid-template-columns:repeat(3,1fr); }
}

@media (min-width:768px){
  body{ font-size:17px; }
  .site-header.scrolled{ backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  .cards--3{ grid-template-columns:repeat(3,1fr); }
  .band__inner{ padding-block:0; }
}

@media (min-width:1024px){
  :root{ --pad:32px; }
  .hero__inner{ max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero__bg{ animation:none; transform:none; }
  .reveal, .js .reveal{ opacity:1; transform:none; }
}