/* ============================================================
   Dynamic Shot — stylesheet
   Tema: dark, minimal, hi-tech
   ============================================================ */

:root {
  --bg:        #0a0c10;   /* nero/blu profondo */
  --bg-soft:   #11141b;   /* superfici (card) */
  --bg-soft-2: #161a23;
  --line:      #232834;   /* bordi sottili */
  --text:      #f1f3f7;   /* testo principale */
  --muted:     #8a93a6;   /* testo secondario */
  --accent:    #ffffff;   /* bianco — accento neutro */
  --accent-2:  #aab0bd;   /* argento per dettagli/gradienti */
  --maxw:      1200px;
  --radius:    14px;
  --ease:      cubic-bezier(.2,.7,.2,1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* NON aggiungere overflow-x (nemmeno `clip`) su html: l'overflow del body
   si propaga alla finestra solo finche' html resta `visible`. Mettendolo su html
   il body diventa lui stesso il contenitore di scorrimento e lo scorrimento
   verticale della pagina si rompe. Provato e rimosso il 30/07/2026.
   L'overflow orizzontale va eliminato alla RADICE, non mascherato qui. */
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- layout helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 110px 0; position: relative; scroll-margin-top: 84px; }
.section--tight { padding: 80px 0; }

.eyebrow {
  display: inline-block;
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
  font-weight: 600;
}
.section-title {
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}
.section-lead {
  color: var(--muted);
  max-width: 640px;
  font-size: 1.05rem;
  margin: 0 0 48px;
}
.section-head { margin-bottom: 56px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .25s var(--ease), background .25s, border-color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--accent); color: #0a0c10; }
.btn--primary:hover { background: #d7dbe2; }
.btn--ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--accent); color: #fff; }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  transition: background .3s, border-color .3s, backdrop-filter .3s;
  border-bottom: 1px solid transparent;
}
.header.scrolled {
  background: rgba(10,12,16,.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
}
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 92px;
  transition: height .3s var(--ease);
}
.nav__logo img {
  height: 56px;
  /* logo nero -> bianco sul tema scuro */
  filter: invert(1) brightness(1.7);
  transition: transform .3s var(--ease), height .3s var(--ease);
}
.nav__logo:hover img { transform: scale(1.04); }
.header.scrolled .nav { height: 76px; }
.header.scrolled .nav__logo img { height: 46px; }
.nav__links { display: flex; gap: 34px; }
.nav__links a {
  font-size: .9rem;
  color: var(--muted);
  font-weight: 500;
  position: relative;
  transition: color .25s;
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width .25s var(--ease);
}
.nav__links a:hover { color: var(--text); }
.nav__links a:hover::after { width: 100%; }
.nav__cta { display: inline-flex; }

/* selettore lingua */
.nav__end { display: flex; align-items: center; gap: 16px; }
.lang {
  display: inline-flex; gap: 2px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
}
.lang__btn {
  border: 0; background: transparent; cursor: pointer;
  font-size: 1.05rem; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
  opacity: .45; filter: grayscale(.4);
  transition: opacity .2s, background .2s, filter .2s;
}
.lang__btn:hover { opacity: .85; }
.lang__btn.is-active { opacity: 1; filter: none; background: var(--bg-soft-2); }

.nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav__toggle span {
  width: 26px; height: 2px; background: var(--text);
  transition: transform .3s, opacity .3s;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.hero__bg {
  position: absolute; inset: 0;
  background: url("../img/hero-home.jpg") center 50% / cover no-repeat;
  transform: scale(1.05);
}
.hero__overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(10,12,16,.55) 0%, rgba(10,12,16,.35) 40%, rgba(10,12,16,.95) 100%),
    linear-gradient(90deg, rgba(10,12,16,.85) 0%, rgba(10,12,16,.15) 60%);
}
.hero__content { position: relative; z-index: 2; max-width: 760px; padding-top: 60px; }
.hero h1 {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -.03em;
  font-weight: 800;
  margin: 0 0 22px;
}
.hero h1 .accent { color: var(--accent); }
.hero p {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: #c9cedd;
  max-width: 560px;
  margin: 0 0 36px;
}
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; }

.hero__scroll {
  position: absolute;
  bottom: 28px; left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  font-size: .72rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.hero__scroll::after {
  content: "";
  width: 1px; height: 42px;
  background: linear-gradient(var(--accent), transparent);
  animation: scrollLine 1.8s var(--ease) infinite;
}
@keyframes scrollLine { 0%{opacity:0;transform:scaleY(.3)} 50%{opacity:1} 100%{opacity:0;transform:scaleY(1)} }

/* ============================================================
   CHI SIAMO
   ============================================================ */
.about { background: var(--bg); }
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}
.about__text p { color: var(--muted); font-size: 1.08rem; }
.about__text p + p { margin-top: 18px; }
.about__highlight { color: var(--text); font-weight: 600; }
.about__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat { background: var(--bg-soft); padding: 34px 28px; }
.stat__num {
  font-size: 2.4rem; font-weight: 800; letter-spacing: -.02em;
  color: #fff;
  display: flex; align-items: baseline; gap: 4px;
}
.stat__num span { color: var(--accent-2); }
.stat__label { color: var(--muted); font-size: .9rem; margin-top: 4px; }

/* certificazioni */
.certs {
  margin-top: 64px;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 36px;
}
.certs__head { margin-bottom: 22px; }
.certs__title { margin: 0 0 6px; font-size: 1.25rem; font-weight: 700; }
.certs__sub { margin: 0; color: var(--muted); font-size: .95rem; }
.certs__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.cert {
  display: grid; place-items: center; text-align: center;
  min-height: 66px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px 14px;
  font-size: .92rem; font-weight: 600;
  color: var(--text);
  background: var(--bg);
  transition: border-color .25s, transform .25s, background .25s;
}
.cert:hover { border-color: #fff; transform: translateY(-2px); background: var(--bg-soft-2); }

/* autorità di riferimento */
.certs__auth {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 12px;
}
.auth {
  display: grid; place-items: center;
  min-height: 120px;
  border-radius: 16px;
  padding: 26px 30px;
  background: #fff;
  transition: transform .25s var(--ease), box-shadow .25s;
}
.auth:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(0,0,0,.4); }
.auth img { max-height: 62px; width: auto; max-width: 100%; object-fit: contain; }

/* ============================================================
   FILMOGRAFIA
   ============================================================ */
.film__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
  gap: 18px;
}
.film__card {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 2 / 3;
  background: var(--bg-soft);
  border: 1px solid var(--line);
}
.film__card img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .5s var(--ease), filter .5s;
  filter: grayscale(.15) brightness(.92);
}
.film__card:hover img { transform: scale(1.06); filter: grayscale(0) brightness(1); }
.film__cap { display: none; }

/* ============================================================
   CLIENTI
   ============================================================ */
.clients { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* griglia dei loghi: le tessere sono tutte uguali, i loghi sono gia' normalizzati
   in dimensione e resi leggibili sul fondo scuro (vedi Loghi_Clienti/_uniforma.py) */
.clients__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 14px;
  /* minmax(0, ...) e non minmax(180px, ...): con un minimo diverso da 0 la traccia
     non puo' scendere sotto la larghezza minima del contenuto e su Safari iOS,
     dove l'immagine puo' risolvere a 600px naturali, la griglia sfonda a destra. */
  grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr));
}
.clients__item {
  display: flex; align-items: center; justify-content: center;
  /* NIENTE aspect-ratio qui: su Safari iOS l'altezza di un item con aspect-ratio
     dentro una griglia non viene propagata alla riga -> il contenitore collassa,
     la sezione Clienti risulta piu' bassa del suo contenuto e la sezione
     successiva (Filmografia) le finisce SOPRA. Altezza esplicita = deterministica. */
  height: 82px;
  min-width: 0;                /* consente alla tessera di restringersi davvero */
  background: var(--bg-soft-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  transition: border-color .35s var(--ease), background .35s var(--ease), transform .35s var(--ease);
}
/* height:100% qui NON va usato: la tessera e' un flex container e l'altezza in
   percentuale contro un genitore a sua volta dimensionato dal layout crea un
   riferimento circolare che Safari iOS risolve disegnando l'immagine alla sua
   misura naturale (600x250). Con max-* + auto l'immagine si limita da sola. */
.clients__item img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; display: block;
  opacity: .94;
  transition: opacity .35s var(--ease);
}
.clients__item:hover { border-color: var(--accent-2); background: var(--bg-soft); transform: translateY(-2px); }
.clients__item:hover img { opacity: 1; }

/* ============================================================
   SERVIZI
   ============================================================ */
.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.service {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 360px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
/* foto di sfondo */
.service__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease);
}
/* gradiente per leggibilità del testo */
.service::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(10,12,16,.10) 0%,
    rgba(10,12,16,.45) 45%,
    rgba(10,12,16,.92) 100%);
  transition: background .35s var(--ease);
}
.service:hover {
  transform: translateY(-6px);
  border-color: #3a4250;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.service:hover .service__img { transform: scale(1.08); }
.service:hover::after {
  background: linear-gradient(180deg,
    rgba(10,12,16,.20) 0%,
    rgba(10,12,16,.55) 45%,
    rgba(10,12,16,.96) 100%);
}
.service__icon {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: rgba(10,12,16,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
}
.service__icon svg { width: 22px; height: 22px; }
.service__body {
  position: relative; z-index: 2;
  padding: 24px 24px 26px;
}
.service__body h3 {
  margin: 0 0 8px;
  font-size: 1.3rem; font-weight: 700;
  color: #fff;
  position: relative;
  padding-bottom: 10px;
}
/* trattino accent animato sotto il titolo */
.service__body h3::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 34px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .4s var(--ease);
}
.service:hover .service__body h3::after { width: 64px; }
.service__body p {
  margin: 0;
  color: #d7dbe6;
  font-size: .96rem;
  line-height: 1.55;
}

/* ============================================================
   FLOTTA (mezzi: foto + scheda tecnica a fianco)
   ============================================================ */
.fleet { display: flex; flex-direction: column; gap: 72px; }
.fleet__row {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 54px;
  align-items: center;
}
/* righe alternate: foto a destra */
.fleet__row:nth-child(even) .fleet__photo { order: 2; }

.fleet__photo {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  aspect-ratio: 4 / 3;
  background: #000;
}
.fleet__photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(.2) brightness(.92);
  transition: transform .6s var(--ease), filter .6s;
}
.fleet__row:hover .fleet__photo img { transform: scale(1.05); filter: none; }
.fleet__badge {
  position: absolute; top: 14px; left: 14px;
  font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  background: rgba(0,0,0,.55); backdrop-filter: blur(6px);
  border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px;
  color: var(--text);
}
.fleet__info h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800; letter-spacing: -.02em; margin: 0 0 10px;
}
.fleet__lead { color: var(--muted); margin: 0 0 24px; max-width: 420px; }
.fleet__specs { max-width: 440px; }
.fleet__specs li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 0; border-bottom: 1px solid var(--line); font-size: .92rem;
}
.fleet__specs li:first-child { border-top: 1px solid var(--line); }
.fleet__specs li span:first-child { color: var(--muted); }
.fleet__specs li span:last-child { color: var(--text); font-weight: 600; text-align: right; }

/* animazione di entrata (slide laterale) */
.fleet__row .fleet__photo,
.fleet__row .fleet__info {
  opacity: 0;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.fleet__row .fleet__photo { transform: translateX(-34px); }
.fleet__row .fleet__info  { transform: translateX(34px); }
.fleet__row:nth-child(even) .fleet__photo { transform: translateX(34px); }
.fleet__row:nth-child(even) .fleet__info  { transform: translateX(-34px); }
.fleet__row.in .fleet__photo,
.fleet__row.in .fleet__info { opacity: 1; transform: none; }
/* Da 901px in su l'entrata e' laterale: senza clipping, finche' la riga non e'
   "rivelata" i 34px di scostamento sporgono oltre il contenitore e rendono la
   pagina scorrevole in orizzontale (visibile p.es. a 1024px). Sotto i 901px
   l'entrata e' verticale (vedi media query) e NON va clippata. */
@media (min-width: 901px) {
  .fleet__row { overflow: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .fleet__row .fleet__photo, .fleet__row .fleet__info { opacity: 1; transform: none; transition: none; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .clients__item, .clients__item img { transition: none; }
  .clients__item:hover { transform: none; }
}

/* ============================================================
   CONTATTI
   ============================================================ */
.contact { background: var(--bg-soft); border-top: 1px solid var(--line); }
.contact__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
}
.contact__info p { color: var(--muted); margin: 0 0 30px; max-width: 440px; }
.contact__list li {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 1rem;
}
.contact__list li:last-child { border-bottom: 0; }
.contact__list .ico { color: var(--accent); width: 22px; display: grid; place-items: center; }
.contact__socials { display: flex; gap: 14px; margin-top: 24px; }
.contact__socials a {
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line); display: grid; place-items: center;
  color: var(--muted); transition: all .25s;
}
.contact__socials a:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }

.form { display: grid; gap: 16px; }
.form__status { font-size: .9rem; color: var(--muted); min-height: 1.2em; }
.form input, .form textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--text);
  font-family: inherit; font-size: .98rem;
  transition: border-color .25s, background .25s;
}
.form input:focus, .form textarea:focus {
  outline: none; border-color: var(--accent); background: var(--bg-soft-2);
}
.form textarea { resize: vertical; min-height: 130px; }
.form .btn { justify-content: center; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--bg); padding: 50px 0 34px; border-top: 1px solid var(--line); }
.footer__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; }
.footer__logo img { height: 44px; filter: invert(1) brightness(1.7); }
.footer__tag { color: var(--muted); font-size: .9rem; }
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer__links a { color: var(--muted); font-size: .9rem; transition: color .25s; }
.footer__links a:hover { color: var(--text); }
.footer__bottom {
  margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--line);
  color: var(--muted); font-size: .82rem; text-align: center;
}

/* ============================================================
   ANIMAZIONI ON-SCROLL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .about__grid, .contact__grid { grid-template-columns: 1fr; gap: 40px; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .clients__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .clients__item { height: 88px; }
  .fleet { gap: 48px; }
  .fleet__row { grid-template-columns: 1fr; gap: 26px; }
  .fleet__row:nth-child(even) .fleet__photo { order: 0; }

  /* Qui la riga e' a colonna singola: lo slide LATERALE non ha piu' senso e, finche'
     l'elemento non e' "rivelato", lo spinge 34px oltre il bordo destro rendendo
     scorrevole in orizzontale l'INTERA pagina (tutte le sezioni sembrano sfalsate).
     Sotto i 900px l'entrata diventa verticale. */
  .fleet__row .fleet__photo,
  .fleet__row .fleet__info,
  .fleet__row:nth-child(even) .fleet__photo,
  .fleet__row:nth-child(even) .fleet__info { transform: translateY(24px); }
  .fleet__row.in .fleet__photo,
  .fleet__row.in .fleet__info { transform: none; }

  /* menu compatto: hamburger anche su tablet e telefoni in orizzontale,
     così "Richiedi un preventivo" non va mai a capo */
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav.open .nav__links {
    display: flex; flex-direction: column;
    position: absolute; top: 92px; left: 0; right: 0;
    background: rgba(10,12,16,.97); backdrop-filter: blur(14px);
    padding: 24px; gap: 20px; border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 720px) {
  .section { padding: 80px 0; }
  .services__grid { grid-template-columns: 1fr; }
  /* minmax(0,1fr) e non 1fr: con 1fr la traccia non puo' scendere sotto la larghezza
     minima del contenuto (sigle tipo "STS-01" + icona) e su schermi stretti la
     griglia sfonda a destra. Il padding ridotto recupera lo spazio necessario. */
  .certs { padding: 26px 20px; }
  .certs__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .certs__auth { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .clients__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .clients__item { height: 68px; padding: 10px; border-radius: 12px; }

  /* sfondo home: sposta il taglio lateralmente per centrare il drone */
  .hero__bg { background-position: 56% 38%; }
}