/* ===========================================================
   MAD — DESIGN TOKENS
   =========================================================== */
/* Qui sono raccolti TUTTI i colori e i font del sito in un unico posto.
   Se cambi un valore qui (es. --accent), cambia automaticamente ovunque
   nel sito. Comodo, ma occhio: un cambio qui ha effetto su tutto insieme. */
:root {
  /* COLORI — questi 4 sono i più importanti, usati ovunque nel sito */
  --cream:      #F8EFEC;   /* il colore di sfondo della maggior parte del sito */
  --surface:    #EFDFDA;   /* un grigio-rosa leggermente più scuro del cream, per pannelli/card */
  --ink:        #2A1620;   /* il colore del testo normale, e degli sfondi scuri (footer, telefono) */
  --warm-white: #F8EFEC;   /* il colore del testo QUANDO è scritto sopra uno sfondo scuro */
  --primary:    #2A1620;   /* colore di sfondo dei bottoni principali (scuro) */
  --hover:      #3D2029;   /* colore che appare quando passi il mouse sopra i bottoni scuri */
  --secondary:  #8C6E70;   /* colore del testo secondario, meno importante (es. descrizioni) */
  --border-c:   #E4D2CB;   /* colore delle linee sottili e dei bordi */
  --accent:     #B23A56;   /* IL COLORE PIÙ IMPORTANTE: quello acceso usato per dettagli,
                               bottoni con bordo, link, pallini attivi. Cambia questo per
                               cambiare "il colore del brand" in tutto il sito */
  --accent-dark:#8A2C43;   /* variante più scura dell'accent, usata quando ci passi sopra il mouse */
  --ink-10:     rgba(42,22,32,0.06); /* il colore "ink" ma quasi trasparente, per ombre leggere */
  --ink-25:     rgba(42,22,32,0.18); /* il colore "ink" un po' più visibile, per ombre più marcate */
  --ink-60:     var(--secondary);

  /* FONT — i 3 caratteri usati nel sito */
  --font-display: 'Fraunces', serif;        /* il font dei titoli grandi (con stile, un po' vintage) */
  --font-body:    'Instrument Sans', sans-serif; /* il font del testo normale, dei paragrafi */
  --font-mono:    'Space Mono', monospace;  /* il font delle scritte piccole in maiuscolo (es. "// SERVIZI") */

  --max: 1200px; /* larghezza massima del contenuto: su schermi molto larghi il sito non si allarga oltre questo */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-x:hidden impedisce SEMPRE lo scroll laterale, qualunque elemento
   dovesse (per errore) sforare leggermente la larghezza dello schermo */
html { scroll-behavior: smooth; overflow-x: hidden; max-width: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}

a { color: inherit; text-decoration: none; }

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

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.eyebrow.center { text-align: center; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.center { text-align: center; }

/* ===========================================================
   HEADER
   =========================================================== */
/* Stile della barra in alto (logo, menu, bottone "Richiedi Info"). */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 4vw;
  position: relative;
}

.logo {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: 1.7rem;
  letter-spacing: 0.01em;
}
.logo .dot { color: var(--accent); font-style: normal; }

/* Logo in versione SVG (header e footer): stessa gabbia visiva del testo che sostituisce */
.logo--svg {
  display: inline-flex;
  align-items: center;
}
.logo--svg svg {
  height: 1.55rem;
  width: auto;
  display: block;
  fill: currentColor;
}
.footer-logo.logo--svg svg { height: 1.65rem; }

/* Nasconde visivamente il testo alternativo ma lo lascia leggibile agli screen reader */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  font-size: 0.92rem;
  font-weight: 600;
}
/* Sottolineatura che si "disegna" da sinistra a destra al passaggio del mouse,
   invece di apparire di colpo. position:relative serve per posizionare la riga (::after) */
.main-nav > a {
  position: relative;
  padding-bottom: 4px;
}
.main-nav > a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: var(--accent);
  transform: scaleX(0);       /* parte invisibile (larghezza zero) */
  transform-origin: left;     /* si allarga da sinistra... */
  transition: transform 0.25s ease;
}
.main-nav > a:hover::after {
  transform: scaleX(1);       /* ...fino alla larghezza piena */
}

.has-dropdown { position: relative; }
.dropdown-toggle {
  background: none;
  border: none;
  font: inherit;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.caret { font-size: 0.65rem; transition: transform 0.2s ease; }
.has-dropdown:hover .caret,
.has-dropdown:focus-within .caret { transform: rotate(180deg); }

.dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -1rem;
  background: var(--ink);
  min-width: 240px;
  padding: 0.6rem 0;
  border-radius: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  z-index: 40;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.dropdown a {
  display: block;
  padding: 0.55rem 1.2rem;
  color: var(--warm-white);
  font-size: 0.88rem;
  font-weight: 500;
}
.dropdown a:hover { background: rgba(248,239,236,0.08); color: var(--warm-white); }

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.75rem 1.4rem;
  border: 1.5px solid var(--border-c);
  border-radius: 2px;
  transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
  cursor: pointer;
}
.btn-primary { background: var(--primary); border-color: var(--primary); color: var(--warm-white); }
.btn-primary:hover { background: var(--hover); border-color: var(--hover); transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--warm-white); transform: translateY(-2px); }
.btn-accent { background: var(--accent); color: var(--warm-white); border-color: var(--accent); }
.btn-accent:hover { background: var(--accent-dark); transform: translateY(-2px); }

.nav-cta { white-space: nowrap; }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
.burger span { width: 26px; height: 2.5px; background: var(--ink); display: block; }

/* ===========================================================
   HERO — video full-bleed, wordmark gigante che si allarga
   =========================================================== */
/* Stile della SEZIONE 1: il video a schermo intero e l'animazione
   della scritta MAD / Studios / tagline che compaiono e si dissolvono.
   I numeri "animation-delay" decidono QUANDO compare ogni elemento:
   sono in sequenza, cambiarne uno sfasa tutti quelli dopo. */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--ink);
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,21,26,0.35) 0%, rgba(20,21,26,0.75) 100%);
}

/* Pulsante "play" personalizzato: invisibile e non cliccabile finché script.js
   non gli aggiunge la classe "is-visible" (solo quando l'autoplay è bloccato) */
.hero-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.85);
  z-index: 2;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1.5px solid rgba(248,239,236,0.4);
  background: rgba(178,58,86,0.85); /* --accent con trasparenza */
  color: var(--warm-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
.hero-play-btn.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.hero-play-btn:hover { background: var(--accent-dark); }
.hero-play-btn svg {
  width: 34px;
  height: 34px;
  fill: currentColor;
  margin-left: 4px; /* il triangolo del play sembra più centrato spostandolo leggermente a destra */
}

.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 6vw 4vw;
  gap: 1.4rem;
  min-height: 40vh;
  justify-content: center;
}

/* La scritta MAD — entra piccola, si allarga, poi sparisce del tutto (non resta statica) */
.hero-word {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  color: rgba(248,239,236,0.14); /* lettere spente finché la luce non passa */
  font-size: clamp(4.2rem, 20vw, 13rem);
  line-height: 1;
  letter-spacing: -0.01em;
  pointer-events: none;
  opacity: 0;
  animation: word-expand 2.6s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.15s;
}
/* Versione SVG del logo al posto del testo: stessa gabbia (transform/animazione invariati),
   ma la dimensione è data alla larghezza dell'svg invece che al font-size */
.hero-word--svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-word-svg {
  width: clamp(11rem, 46vw, 30rem);
  height: auto;
  display: block;
  fill: currentColor;
  overflow: visible;
}
.hero-shine--svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-shine--svg svg {
  width: clamp(11rem, 46vw, 30rem);
  height: auto;
  display: block;
  fill: currentColor;
  filter: drop-shadow(0 0 24px rgba(255,255,255,0.5));
}
@keyframes word-expand {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.32); }
  22%  { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  42%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  68%  { opacity: 0; transform: translate(-50%, -50%) scale(1.28); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.28); }
}

/* Effetto "luce che passa": una copia del testo, bianca piena, rivelata solo
   dove passa una fascia diagonale in movimento — come un faretto che scorre */
.hero-shine {
  position: absolute;
  inset: 0;
  color: var(--warm-white);
  text-shadow: 0 0 24px rgba(255,255,255,0.5);
  -webkit-mask-image: linear-gradient(100deg, transparent 42%, rgba(255,255,255,1) 50%, transparent 58%);
  mask-image: linear-gradient(100deg, transparent 42%, rgba(255,255,255,1) 50%, transparent 58%);
  -webkit-mask-size: 280% 100%;
  mask-size: 280% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: -90% 0;
  mask-position: -90% 0;
  animation: shine-sweep 1.3s ease-in-out both;
  animation-delay: 0.75s; /* passa una volta, mentre la scritta è al massimo della sua espansione */
}
@keyframes shine-sweep {
  0%   { -webkit-mask-position: -90% 0;  mask-position: -90% 0; }
  100% { -webkit-mask-position: 190% 0;  mask-position: 190% 0; }
}

.hero-subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  font-family: var(--font-mono);
  color: var(--warm-white);
  font-size: clamp(0.85rem, 1.6vw, 1.1rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: subtitle-dissolve 1.6s ease-in-out both;
  animation-delay: 1.95s;
}
@keyframes subtitle-dissolve {
  0%   { opacity: 0; }
  25%  { opacity: 1; }
  75%  { opacity: 1; }
  100% { opacity: 0; }
}
.hero-subtitle .line {
  width: 30px;
  height: 1px;
  background: rgba(248,239,236,0.55);
}
.hero-tagline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--warm-white);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.02em;
  max-width: 480px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: subtitle-dissolve 1.6s ease-in-out both;
  animation-delay: 3.6s;
}
.hero-tagline strong { color: var(--warm-white); }
@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 2.2rem;
  transform: translateX(-50%);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(248,239,236,0.7);
  opacity: 0;
  animation: hero-fade-up 0.8s ease-out both;
  animation-delay: 5.3s;
}
.hero-scroll .line {
  width: 1px;
  height: 26px;
  background: rgba(248,239,236,0.5);
  animation: scroll-line 1.8s ease-in-out infinite;
}
@keyframes scroll-line {
  0%, 100% { transform: scaleY(1); opacity: 0.5; }
  50%      { transform: scaleY(0.4); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-word, .hero-subtitle, .hero-tagline, .hero-scroll {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero-shine { display: none; }
}
/* ABOUT MEDIA (placeholder box, ancora usato altrove) */
.about-media-placeholder {
  background: repeating-linear-gradient(45deg, var(--ink-10), var(--ink-10) 10px, transparent 10px, transparent 20px);
  border: 1.5px solid var(--border-c);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink-60);
}
.brand-band {
  height: 26vw;
  max-height: 380px;
  margin: 0;
  overflow: hidden;
}
.brand-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%; /* alza l'inquadratura per mostrare i volti */
}

/* ===========================================================
   ABOUT
   =========================================================== */
/* Stile della SEZIONE 2 "Chi siamo". */
.about {
  padding: 6vw 4vw 5vw;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.about h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  margin-bottom: 1.4rem;
}
.about p {
  color: var(--ink-60);
  margin-bottom: 1.2rem;
  font-size: 1.05rem;
}
.about .link-underline { display: inline-block; margin-top: 0.6rem; }
.link-underline {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  text-transform: uppercase;
  border-bottom: 2px solid var(--accent);
  padding-bottom: 4px;
}

/* ===========================================================
   SERVICE SUBPAGE — intestazione compatta
   =========================================================== */
/* Stile dell'intestazione usata nelle pagine dentro la cartella servizi/
   (quelle pagine oggi non sono collegate al menu, ma restano di riserva). */
.service-hero {
  max-width: 760px;
  margin: 0 auto;
  padding: 5vw 4vw 2vw;
  text-align: center;
}
.back-link {
  display: inline-block;
  margin-bottom: 1.6rem;
}
.service-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  margin: 0.6rem 0 1rem;
}
.service-hero-desc {
  color: var(--ink-60);
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}

/* ===========================================================
   SHOWREEL — testo + telefono con video
   =========================================================== */
/* Stile della SEZIONE 3: il blocco testo + telefono interattivo. */
.showreel {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4vw 4vw 7vw;
  display: grid;
  grid-template-columns: 1.1fr 0.8fr;
  gap: 4vw;
  align-items: center;
}
.showreel-text h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  margin: 0.6rem 0 1.2rem;
}
.showreel-text p:not(.eyebrow) {
  color: var(--ink-60);
  font-size: 1.02rem;
  margin-bottom: 1.4rem;
  max-width: 480px;
}
.showreel-phone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
}
.phone-stage {
  perspective: 900px;
}
.phone-frame {
  position: relative;
  width: min(390px, 84vw);
  aspect-ratio: 9 / 19.3;
  background: linear-gradient(160deg, #3a3440 0%, #14151a 55%, #1c1a20 100%);
  border-radius: 44px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.15),
    0 1px 2px rgba(20,21,26,0.15),
    0 12px 24px -8px rgba(42,22,32,0.35),
    0 24px 40px -20px rgba(42,22,32,0.3);
  transform-style: preserve-3d;
  transition: transform 0.25s ease-out;
  cursor: grab;
}
.phone-frame::before {
  /* tasto laterale destro (accensione) */
  content: "";
  position: absolute;
  right: -2px;
  top: 95px;
  width: 3px;
  height: 56px;
  background: #0d0d10;
  border-radius: 2px 0 0 2px;
}
.phone-frame::after {
  /* tasti volume a sinistra */
  content: "";
  position: absolute;
  left: -2px;
  top: 78px;
  width: 3px;
  height: 32px;
  background: #0d0d10;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 46px 0 #0d0d10;
}
.phone-notch {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 38%;
  height: 18px;
  background: #0d0d10;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}
.phone-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
}
.phone-video,
.phone-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ink);
  opacity: 1;
  transition: opacity 0.3s ease;
}
.phone-gloss {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,0.16) 0%, rgba(255,255,255,0) 26%);
}
/* Placeholder mostrato al posto del video quando il file media non è ancora
   stato caricato (es. pagine servizio prima di aggiungere i contenuti reali).
   Attivato via JS aggiungendo la classe "is-visible" quando il video va in errore. */
.phone-placeholder {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  padding: 0 24px;
  background: linear-gradient(160deg, #3a3440 0%, #14151a 70%);
}
.phone-placeholder.is-visible { display: flex; }
.phone-placeholder-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--accent);
}
.phone-placeholder-label {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: rgba(255,255,255,0.85);
}
.phone-caption {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--warm-white);
  background: rgba(42,22,32,0.5);
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.phone-dots {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--surface);
  padding: 0.55rem 1rem;
  border-radius: 999px;
}
.phone-dot {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--secondary);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.phone-dot::before {
  /* area cliccabile invisibile, molto più ampia del pallino visibile */
  content: "";
  position: absolute;
  inset: -14px;
}
.phone-dot:hover { transform: scale(1.25); border-color: var(--accent); }
.phone-dot.is-active { background: var(--accent); border-color: var(--accent); transform: scale(1.2); }

/* ---------------------------------------------------------------
   SCRITTA "MAD" DENTRO IL TELEFONO (slide 1)
   Stessa identica animazione della Hero (word-expand, shine-sweep,
   subtitle-dissolve: i @keyframes sono definiti più in alto nel file
   e riutilizzati qui), solo in formato ridotto per stare nello schermo
   del telefono. Nascosta di default: compare solo quando la classe
   "is-visible" è attiva (gestito dallo script inline in index.html),
   e riparte da capo ogni volta che si aggiunge "is-playing".
   --------------------------------------------------------------- */
.phone-intro {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  overflow: hidden;
}
.phone-intro.is-visible { display: flex; }

.phone-word {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  color: rgba(248,239,236,0.14);
  font-size: clamp(2.2rem, 15vw, 3.4rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.phone-word--svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-word-svg {
  width: clamp(5.4rem, 34vw, 8.2rem);
  height: auto;
  display: block;
  fill: currentColor;
  overflow: visible;
}
.phone-shine--svg {
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-shine--svg svg {
  width: clamp(5.4rem, 34vw, 8.2rem);
  height: auto;
  display: block;
  fill: currentColor;
  filter: drop-shadow(0 0 14px rgba(255,255,255,0.5));
}
.phone-intro.is-playing .phone-word {
  opacity: 0;
  animation: word-expand 2.2s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: 0.1s;
}
.phone-shine {
  position: absolute;
  inset: 0;
  color: var(--warm-white);
  text-shadow: 0 0 14px rgba(255,255,255,0.5);
  -webkit-mask-image: linear-gradient(100deg, transparent 42%, rgba(255,255,255,1) 50%, transparent 58%);
  mask-image: linear-gradient(100deg, transparent 42%, rgba(255,255,255,1) 50%, transparent 58%);
  -webkit-mask-size: 280% 100%;
  mask-size: 280% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: -90% 0;
  mask-position: -90% 0;
}
.phone-intro.is-playing .phone-shine {
  animation: shine-sweep 1.1s ease-in-out both;
  animation-delay: 0.6s;
}
.phone-subtitle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  color: var(--warm-white);
  font-size: clamp(0.55rem, 2.6vw, 0.7rem);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  white-space: nowrap;
}
.phone-intro.is-playing .phone-subtitle {
  opacity: 0;
  animation: subtitle-dissolve 1.3s ease-in-out both;
  animation-delay: 1.55s;
}
.phone-subtitle .line { width: 16px; height: 1px; background: rgba(248,239,236,0.55); }
.phone-tagline {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--warm-white);
  font-size: clamp(0.6rem, 2.7vw, 0.72rem);
  letter-spacing: 0.01em;
  max-width: 76%;
}
.phone-intro.is-playing .phone-tagline {
  opacity: 0;
  animation: subtitle-dissolve 1.3s ease-in-out both;
  animation-delay: 2.85s;
}
.phone-tagline strong { color: var(--warm-white); }

@media (prefers-reduced-motion: reduce) {
  .phone-intro .phone-word, .phone-intro .phone-subtitle, .phone-intro .phone-tagline {
    opacity: 1 !important; animation: none !important;
  }
  .phone-shine { display: none; }
}

@media (max-width: 900px) {
  .showreel { grid-template-columns: 1fr; text-align: center; }
  .showreel-text p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
  .showreel-text .eyebrow.center { text-align: center; }
}

/* ===========================================================
   SHOWCASE — laptop + telefono disegnati in CSS
   Stessa identica "ricetta" grafica del telefono della sezione
   "Dietro le quinte" qui sopra (stesso gradiente scuro, stesso
   bordo, stessa ombra): sempre nitidi, a qualsiasi dimensione,
   zero foto/pixel. Le 2 frecce piccole ai lati cambiano insieme
   quale ".devices-look" è visibile in entrambi gli schermi, con
   una dissolvenza. Nessun pallino.
   =========================================================== */
.device-showcase {
  background: var(--ink);
  padding: 5rem 0 4.5rem;
  color: var(--warm-white);
  overflow: hidden;
}
.device-showcase .eyebrow.center { color: var(--accent); }
.device-showcase h2 {
  color: var(--warm-white);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  max-width: 700px;
  margin: 0.6rem auto 0.6rem;
  padding: 0 1.5rem;
}
.showcase-hint {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(248,239,236,0.6);
  margin-bottom: 1rem;
}

.devices-cluster {
  position: relative;
  width: min(620px, 84vw);
  aspect-ratio: 4 / 3;
  margin: 3rem auto 0;
}
.devices-item { position: absolute; }

/* --- LAPTOP: dietro, occupa quasi tutta la larghezza --- */
.devices-item--laptop {
  left: 6%;
  top: 0;
  width: 88%;
  z-index: 1;
}
.devices-frame--laptop {
  background: linear-gradient(160deg, #3a3440 0%, #14151a 55%, #1c1a20 100%);
  border-radius: 14px;
  padding: 3.4%;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.15),
    0 1px 2px rgba(20,21,26,0.15),
    0 12px 24px -8px rgba(42,22,32,0.35),
    0 24px 40px -20px rgba(42,22,32,0.3);
}
.devices-laptop-base {
  height: 12px;
  margin-top: -1px;
  background: linear-gradient(160deg, #3a3440, #14151a);
  border-radius: 0 0 8px 8px;
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
}

/* --- TELEFONO: davanti, in basso a sinistra, leggermente sovrapposto --- */
.devices-item--phone {
  left: -2%;
  bottom: -8%;
  width: 24%;
  z-index: 2;
}
.devices-frame--phone {
  position: relative;
  background: linear-gradient(160deg, #3a3440 0%, #14151a 55%, #1c1a20 100%);
  border-radius: 20%/9%;
  padding: 6% 6.5%;
  aspect-ratio: 9 / 19.3;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.15),
    0 1px 2px rgba(20,21,26,0.15),
    0 12px 24px -8px rgba(42,22,32,0.35),
    0 24px 40px -20px rgba(42,22,32,0.3);
}
.devices-phone-notch {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 36%;
  height: 3.4%;
  background: #0d0d10;
  border-radius: 0 0 10px 10px;
  z-index: 2;
}

/* Gli schermi: uguali per entrambi i dispositivi */
.devices-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  overflow: hidden;
}
.devices-frame--phone .devices-screen { border-radius: 14px; }

.devices-look {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.devices-look.is-active { opacity: 1; }
.devices-look img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Frecce piccole, appoggiate ai due lati del cluster (niente pallini) */
.devices-arrow {
  position: absolute;
  top: 42%;
  z-index: 3;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(248,239,236,0.25);
  background: rgba(28,18,24,0.6);
  backdrop-filter: blur(3px);
  color: var(--warm-white);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.devices-arrow--prev { left: -6px; }
.devices-arrow--next { right: -6px; }
.devices-arrow:hover { background: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.1); }

@media (max-width: 640px) {
  .devices-cluster { width: 88vw; }
  .devices-arrow { width: 28px; height: 28px; font-size: 0.95rem; }
  .devices-arrow--prev { left: -2px; }
  .devices-arrow--next { right: -2px; }
}

/* ===========================================================
   SERVICES
   =========================================================== */
/* Stile della SEZIONE 4: la griglia con le 6 card dei servizi. */
.services {
  padding: 5vw 4vw;
  max-width: var(--max);
  margin: 0 auto;
}
.services h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 3rem;
}
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1.5px solid var(--border-c);
}
.service-card {
  display: block;
  padding: 2.2rem 1.8rem;
  background: var(--surface);
  border-right: 1.5px solid var(--border-c);
  border-bottom: 1.5px solid var(--border-c);
  transition: background 0.2s ease, color 0.2s ease;
}
.service-card:nth-child(3n) { border-right: none; }
.service-card:nth-last-child(-n+3) { border-bottom: none; }
.service-card:hover { background: var(--hover); color: var(--warm-white); }
.service-card:hover p { color: var(--warm-white); opacity: 0.75; }
.service-index {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 0.9rem;
  display: block;
  margin-bottom: 1rem;
}
.service-card h3 {
  font-size: 1.15rem;
  margin-bottom: 0.7rem;
  letter-spacing: 0;
}
.service-card p { color: var(--ink-60); font-size: 0.92rem; }
.service-hint {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.service-card:hover .service-hint { opacity: 1; transform: translateY(0); }

.services-cta { text-align: center; margin-top: 2.2rem; }



/* ===========================================================
   FEATURE BLOCK — immagine con rettangolo colorato dietro + testo, alternati
   =========================================================== */
/* Stile della SEZIONE 8: i 4 blocchi alternati (MAD Content/Social/Brand/Web).
   ".feature-block--reverse" è la versione con foto e testo invertiti. */
.feature-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5vw;
  align-items: center;
  max-width: var(--max);
  margin: 0 auto;
  padding: 5vw 4vw;
}
.feature-text h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  margin: 0.6rem 0 1.2rem;
}
.feature-text p:not(.eyebrow) {
  color: var(--ink-60);
  font-size: 1.02rem;
  margin-bottom: 1.6rem;
  max-width: 460px;
}
.feature-media {
  position: relative;
  isolation: isolate;
}
.feature-media::before {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -34px;
  width: 58%;
  height: 58%;
  background: var(--surface);
  opacity: 0.7;
  z-index: -2;
}
.feature-media::after {
  content: "";
  position: absolute;
  right: -22px;
  bottom: -22px;
  width: 58%;
  height: 58%;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 60%, transparent 100%);
  z-index: -1;
}
.feature-block--reverse .feature-media::before {
  right: auto;
  left: -34px;
}
.feature-block--reverse .feature-media::after {
  right: auto;
  left: -22px;
}
.feature-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* Variante per poster/grafiche: stessa identica proporzione (4:5) per
   tutti e 4 i blocchi MAD Content/Social/Brand/Web, così le immagini
   risultano tutte della stessa dimensione, allineate e coerenti. */
.feature-photo--contain {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--surface, #f4efe9);
}
/* L'immagine di MAD Content è molto più verticale delle altre (9:16):
   con object-position spostata in alto si mantiene visibile il titolo
   invece di tagliarlo a metà. */
.feature-photo--tall {
  object-position: top center;
}

.btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1.5px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 0.75rem 1.4rem;
  border-radius: 4px;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
  cursor: pointer;
}
.btn-outline:hover {
  background: var(--accent);
  color: var(--warm-white);
  transform: translateY(-2px);
}

.service-note {
  max-width: 640px;
  margin: 0 auto;
  padding: 4vw 4vw;
  text-align: center;
}
.service-note h2 {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  margin: 0.6rem 0 1rem;
}
.service-note p:not(.eyebrow) {
  color: var(--ink-60);
  font-size: 1.02rem;
  margin-bottom: 1.6rem;
}

@media (max-width: 900px) {
  .feature-block, .feature-block--reverse { grid-template-columns: 1fr; text-align: center; }
  .feature-block--reverse .feature-media { order: -1; }
  .feature-text p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
  .feature-media::before { right: -20px; bottom: -20px; }
  .feature-media::after { right: -14px; bottom: -14px; }
  .feature-block--reverse .feature-media::before { left: -20px; }
  .feature-block--reverse .feature-media::after { left: -14px; }
}

/* Contact direct links */
.contact-direct {
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 2.2rem;
  font-family: var(--font-mono);
}
.contact-direct a { border-bottom: 1px solid var(--accent); padding-bottom: 2px; }

/* ===========================================================
   TESTIMONIALS
   =========================================================== */
/* Stile della SEZIONE 6: le 3 citazioni dei clienti. */
.testimonials {
  padding: 5vw 4vw;
  max-width: var(--max);
  margin: 0 auto;
}
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
}
.testimonial-grid blockquote {
  background: var(--ink);
  color: var(--warm-white);
  padding: 2rem 1.6rem;
  border-radius: 4px;
}
.testimonial-grid p { font-size: 1rem; margin-bottom: 1.2rem; }
.testimonial-grid footer {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  text-transform: uppercase;
}

/* ===========================================================
   PORTFOLIO
   =========================================================== */
/* Stile della SEZIONE 7: i 6 riquadri cliccabili verso Instagram. */
.portfolio {
  padding: 5vw 4vw;
  max-width: var(--max);
  margin: 0 auto;
}
.portfolio h2 { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 2.5rem; }
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
}
.portfolio-item {
  aspect-ratio: 4/3;
  background: repeating-linear-gradient(45deg, var(--ink-10), var(--ink-10) 10px, transparent 10px, transparent 20px);
  border: 1.5px solid var(--border-c);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 0.4rem;
  padding: 1rem;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.portfolio-item:hover { border-color: var(--accent); }
.portfolio-item span {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  text-transform: uppercase;
  background: var(--cream);
  padding: 0.3rem 0.6rem;
}
.portfolio-hint {
  color: var(--accent);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.portfolio-item:hover .portfolio-hint {
  opacity: 1;
  transform: translateY(0);
}

/* ===========================================================
   CTA BAND
   =========================================================== */
/* Stile della SEZIONE 10: il blocco contatti con il modulo. */
.cta-band {
  background: var(--ink);
  color: var(--warm-white);
  padding: 6vw 4vw;
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  margin-bottom: 0.8rem;
}
.cta-band > p {
  color: var(--warm-white);
  opacity: 0.75;
  margin-bottom: 2.5rem;
}
.contact-form {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  text-align: left;
}
.form-row { display: flex; gap: 1rem; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  background: transparent;
  border: 2px solid var(--warm-white);
  border-radius: 2px;
  padding: 0.85rem 1rem;
  color: var(--warm-white);
  font-family: var(--font-body);
  font-size: 0.95rem;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(248,239,236,0.55); }
.contact-form .btn-primary {
  align-self: flex-start;
  background: var(--accent);
  border-color: var(--accent);
}
.contact-form .btn-primary:hover { background: var(--accent-dark); }

/* ===========================================================
   FOOTER
   =========================================================== */
/* Stile del piede di pagina, in fondo a tutto il sito. */
.site-footer {
  background: var(--ink);
  color: var(--warm-white);
  padding: 4vw 4vw 1.5rem;
}
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(248,239,236,0.15);
}
.footer-logo { margin-bottom: 0.6rem; color: var(--warm-white); }
.footer-brand p { color: rgba(248,239,236,0.65); max-width: 260px; }
.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.footer-col a, .footer-col p {
  display: block;
  color: rgba(248,239,236,0.75);
  margin-bottom: 0.6rem;
  font-size: 0.92rem;
}
.footer-col a:hover { color: var(--warm-white); }
.footer-bottom {
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(248,239,236,0.55);
}
.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.footer-legal-links a { text-decoration: underline; }
.footer-cookie-link {
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */
/* Regole speciali che si attivano SOLO sotto una certa larghezza di schermo
   (es. tablet o telefono), per adattare il layout. */
@media (max-width: 900px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card:nth-child(2n) { border-right: none; }
  .service-card:nth-last-child(-n+2) { border-bottom: none; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .portfolio-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem 4vw;
    border-top: 1.5px solid var(--border-c);
    border-bottom: 1.5px solid var(--border-c);
    display: none;
    z-index: 50;
  }
  .main-nav.open { display: flex; }
  .main-nav a, .dropdown-toggle { padding: 0.8rem 0; width: 100%; }
  .has-dropdown { width: 100%; }
  .dropdown {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    width: 100%;
    margin-bottom: 0.5rem;
    /* Usa lo stesso colore di sfondo di tutta la pagina (cream), non un
       grigio/beige diverso, così il menu aperto resta uniforme col resto. */
    background: var(--cream);
    border-radius: 6px;
    padding: 0.3rem 0;
  }
  .dropdown a { color: var(--ink); }
  .dropdown a:hover { background: var(--border-c); color: var(--ink); }
  .has-dropdown.open .dropdown { display: block; }
  .nav-cta { display: none; }
  .burger { display: flex; }
  .services-grid { grid-template-columns: 1fr; }
  .service-card { border-right: none !important; }
  .service-card:not(:last-child) { border-bottom: 1.5px solid var(--border-c) !important; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { flex-direction: column; }
}

/* ===========================================================
   EFFETTI DI ENTRATA ALLO SCROLL
   =========================================================== */
/* Gestisce l'effetto "comparsa dolce" quando una sezione entra nello
   schermo scorrendo la pagina (le classi "reveal" nell'HTML). */

/* .reveal — la sezione intera sale e appare (fade + slide up) */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger automatico: ogni elemento fratello successivo parte con un piccolo ritardo */
.services-grid .reveal:nth-child(1) { transition-delay: 0.05s; }
.services-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.services-grid .reveal:nth-child(3) { transition-delay: 0.15s; }
.services-grid .reveal:nth-child(4) { transition-delay: 0.2s; }
.services-grid .reveal:nth-child(5) { transition-delay: 0.25s; }
.services-grid .reveal:nth-child(6) { transition-delay: 0.3s; }

.portfolio-grid .reveal:nth-child(1) { transition-delay: 0.05s; }
.portfolio-grid .reveal:nth-child(2) { transition-delay: 0.1s; }
.portfolio-grid .reveal:nth-child(3) { transition-delay: 0.15s; }
.portfolio-grid .reveal:nth-child(4) { transition-delay: 0.2s; }
.portfolio-grid .reveal:nth-child(5) { transition-delay: 0.25s; }
.portfolio-grid .reveal:nth-child(6) { transition-delay: 0.3s; }

.testimonial-grid .reveal:nth-child(1) { transition-delay: 0.05s; }
.testimonial-grid .reveal:nth-child(2) { transition-delay: 0.15s; }
.testimonial-grid .reveal:nth-child(3) { transition-delay: 0.25s; }

/* Chi non vuole animazioni (accessibilità / preferenza di sistema) le vede tutte già visibili */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .hero-content h1, .hero-content .btn,
  .hero-photo,
  .hero-media, .hero-content {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}

/* ===========================================================
   COOKIE BANNER
   La fascia in basso che chiede il consenso ai cookie al primo
   accesso. script.js decide quando mostrarla/nasconderla.
   =========================================================== */
.cookie-banner {
  position: fixed;
  left: 1.2rem;
  right: 1.2rem;
  bottom: 1.2rem;
  z-index: 500;
  max-width: 640px;
  margin: 0 auto;
  background: var(--ink);
  color: var(--warm-white);
  border-radius: 10px;
  padding: 1.4rem 1.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 20px 50px -10px rgba(42,22,32,0.4);
  /* Parte fuori dallo schermo, sotto: script.js aggiunge "is-visible" per farla salire */
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  pointer-events: none;
}
.cookie-banner.is-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cookie-text {
  flex: 1 1 320px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: rgba(248,239,236,0.85);
}
.cookie-text a { text-decoration: underline; color: var(--warm-white); }
.cookie-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.cookie-actions .btn-outline {
  border-color: rgba(248,239,236,0.4);
  color: var(--warm-white);
}
.cookie-actions .btn-outline:hover {
  background: rgba(248,239,236,0.12);
  color: var(--warm-white);
}
@media (max-width: 640px) {
  .cookie-banner { flex-direction: column; align-items: stretch; }
  .cookie-actions { justify-content: stretch; }
  .cookie-actions .btn { flex: 1; justify-content: center; }
}

/* ===========================================================
   CURSORE PERSONALIZZATO
   Due cerchietti invisibili di default che script.js muove
   seguendo il mouse. Solo su computer (con mouse): su telefono/
   tablet restano nascosti automaticamente, vedi media query sotto.
   =========================================================== */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  pointer-events: none;   /* non deve mai "bloccare" i click: passano attraverso */
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.cursor-dot {
  width: 7px;
  height: 7px;
  background: var(--accent);
  transition: transform 0.15s ease, background 0.15s ease;
}
.cursor-ring {
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--accent);
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  text-transform: uppercase;
  color: var(--accent);
  background: transparent;
  transition: width 0.2s ease, height 0.2s ease, background 0.2s ease, opacity 0.2s ease;
  /* niente "transition" sul transform: la posizione la anima script.js stesso frame per frame (più fluido) */
}
/* Stato "sopra un link/bottone": l'anello si stringe leggermente e si riempie */
.cursor-ring.is-hover {
  width: 26px;
  height: 26px;
  background: var(--accent);
  opacity: 0.15;
}
/* Stato "sopra una card cliccabile grande" (portfolio, servizi): l'anello si allarga
   molto e mostra una scritta dentro (impostata da script.js in base all'elemento) */
.cursor-ring.is-large {
  width: 88px;
  height: 88px;
  background: var(--ink);
  border-color: var(--ink);
  opacity: 0.92;
  color: var(--warm-white);
}
/* Il cursore personalizzato ha senso solo se esiste un vero puntatore (mouse/trackpad).
   Su schermi touch (telefono, tablet) resta sempre nascosto */
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ===========================================================
   BOTTONI "MAGNETICI"
   script.js sposta leggermente ogni ".btn" verso il mouse quando
   ci si avvicina, come se lo "attirasse". La classe ".btn" ha già
   la transizione sul transform (vedi in alto nel file), quindi
   qui non serve altro CSS: lo stesso movimento morbido che già
   usa per l'hover viene riusato anche per questo effetto.
   =========================================================== */

/* ===========================================================
   PAGINA PRIVACY POLICY
   =========================================================== */
.privacy-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 2vw 4vw 6vw;
}
.privacy-content h2 {
  font-size: 1.4rem;
  margin: 2.4rem 0 1rem;
}
.privacy-content h2:first-child { margin-top: 0; }
.privacy-content p, .privacy-content li {
  color: var(--ink-60);
  font-size: 0.98rem;
  line-height: 1.7;
  margin-bottom: 0.9rem;
}
.privacy-content strong { color: var(--ink); }
.privacy-content ul { padding-left: 1.4rem; margin-bottom: 1.2rem; }
.privacy-content a { text-decoration: underline; color: var(--ink); }
.privacy-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.6rem;
  font-size: 0.88rem;
}
.privacy-table th, .privacy-table td {
  border: 1px solid var(--border-c);
  padding: 0.7rem 0.9rem;
  text-align: left;
  vertical-align: top;
}
.privacy-table th {
  background: var(--surface);
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}

/* ===========================================================
   BARRA DI PROGRESSO SCROLL
   La striscia sottile in cima a tutto: la sua larghezza cresce
   da 0% a 100% mentre scorri la pagina (calcolato da script.js).
   =========================================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;               /* script.js aggiorna questo valore man mano che scrolli */
  background: var(--accent);
  z-index: 1000;
  transition: width 0.1s linear;
}

/* ===========================================================
   BOTTONE "TORNA SU"
   Invisibile in cima alla pagina, appare (via classe "is-visible"
   aggiunta da script.js) solo dopo un po' di scroll.
   =========================================================== */
.back-to-top {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 400;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--ink);
  color: var(--warm-white);
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s ease;
  box-shadow: 0 10px 24px -6px rgba(42,22,32,0.35);
}
.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.back-to-top:hover { background: var(--accent); }
/* Quando il cookie banner è visibile, il bottone si sposta più in alto per non sovrapporsi */
.back-to-top.avoid-banner { bottom: 7.5rem; }

/* ===========================================================
   MESSAGGIO DI CONFERMA DEL FORM CONTATTI
   Nascosto di default. script.js lo mostra e nasconde il form
   quando l'invio va a buon fine, invece di usare un alert() del browser.
   =========================================================== */
.form-success {
  display: none;           /* script.js lo mostra impostando display:flex */
  align-items: flex-start;
  gap: 0.9rem;
  max-width: 480px;
  margin: 0 auto;
  padding: 1.6rem;
  background: rgba(248,239,236,0.08);
  border: 1.5px solid rgba(248,239,236,0.25);
  border-radius: 8px;
  color: var(--warm-white);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.form-success.is-visible {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}
.form-success-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--warm-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.form-success p { margin: 0; font-size: 0.95rem; line-height: 1.5; }

/* ===========================================================
   PAGINA 404
   =========================================================== */
.error-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  gap: 1.2rem;
  background: var(--cream);
}
.error-word {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(4rem, 14vw, 8rem);
  line-height: 1;
  color: var(--ink);
}
.error-word-dim { color: var(--secondary); }
.error-text {
  color: var(--ink-60);
  font-size: 1.05rem;
  max-width: 420px;
}

/* ===========================================================
   SEZIONE TEAM — banner cliccabili verso Instagram
   =========================================================== */
.team {
  max-width: var(--max);
  margin: 0 auto;
  padding: 5vw 4vw 6vw;
}
.team h2 { margin-bottom: 3rem; }

.team-banners {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.team-banner {
  display: flex;
  align-items: stretch;
  background: var(--ink);
  color: var(--warm-white);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  min-height: 200px;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.team-banner:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 50px -14px rgba(42,22,32,0.4);
}

.team-banner-text {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 2.2rem 2.4rem;
}
.team-role {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(248,239,236,0.6);
  margin: 0;
}
.team-banner h3 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  margin: 0.1rem 0 0.3rem;
  color: var(--warm-white);
}
.team-bio {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(248,239,236,0.75);
  max-width: 420px;
  margin: 0 0 0.4rem;
}
.team-instagram {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--warm-white);
  transition: gap 0.2s ease;
}
.team-instagram svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; }
.team-banner:hover .team-instagram { gap: 0.65rem; } /* piccolo respiro in più al passaggio del mouse */

.team-banner-photo {
  flex: 0 0 38%;
  position: relative;
  overflow: hidden;
}
/* La forma decorativa dietro la foto, come nel banner di riferimento */
.team-banner-photo::before {
  content: "";
  position: absolute;
  width: 150%;
  height: 150%;
  top: -25%;
  right: -35%;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.3;
  z-index: 0;
  transition: transform 0.4s ease;
}
.team-banner:hover .team-banner-photo::before { transform: scale(1.08); }
.team-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Sfondi sfumati nei colori della pagina, al posto delle foto — sfumatura radiale
   leggera e uniforme, senza nessuna riga di passaggio visibile: i due toni usati
   sono vicini tra loro, cambia solo il punto di partenza del bagliore per dare
   un minimo di varietà tra i tre banner */
.team-photo--1 { background: radial-gradient(150% 150% at 20% 15%, var(--accent-dark) 0%, var(--ink) 100%); }
.team-photo--2 { background: radial-gradient(150% 150% at 80% 20%, var(--accent-dark) 0%, var(--ink) 100%); }
.team-photo--3 { background: radial-gradient(150% 150% at 50% 90%, var(--accent-dark) 0%, var(--ink) 100%); }
.team-initials {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 3.2rem;
  color: rgba(42,22,32,0.18); /* visibile solo finché non c'è una foto vera sopra */
}

/* Le 3 card entrano una dopo l'altra, non tutte insieme */
.team-banners .team-banner:nth-child(1) { transition-delay: 0.05s; }
.team-banners .team-banner:nth-child(2) { transition-delay: 0.15s; }
.team-banners .team-banner:nth-child(3) { transition-delay: 0.25s; }

@media (max-width: 720px) {
  .team-banner { flex-direction: column; min-height: 0; }
  .team-banner-photo { flex: 0 0 200px; }
  .team-banner-text { padding: 1.8rem; text-align: left; }
  .team-bio { max-width: none; }
}