/* ═══════════════════════════════════════════════
   SELF-HOSTED FONTS (Google Fonts via gwfh, locally served)
   font-display: swap → testo subito visibile col fallback, poi il font si sostituisce
   ═══════════════════════════════════════════════ */
@font-face {
  font-family: 'Kanit';
  font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/kanit-v17-latin-300.woff2') format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/kanit-v17-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/kanit-v17-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/kanit-v17-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/kanit-v17-latin-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal; font-weight: 800; font-display: swap;
  src: url('fonts/kanit-v17-latin-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Kanit';
  font-style: normal; font-weight: 900; font-display: swap;
  src: url('fonts/kanit-v17-latin-900.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2');
}

/* ═══════════════════════════════════════════════
   RESET & BASE
   ═══════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: #0C0C0C; min-height: 100%; }
html, body { overflow-x: clip; }
body {
  font-family: 'Kanit', sans-serif;
  -webkit-font-smoothing: antialiased;
  color: #D7E2EA;
}

/* TYPOGRAPHY */
.hero-heading {
  background: linear-gradient(180deg, #646973 0%, #BBCCD7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* PLACEHOLDERS */
.placeholder-stripes {
  background-color: #161616;
  background-image: repeating-linear-gradient(135deg, rgba(215, 226, 234, 0.04) 0px, rgba(215, 226, 234, 0.04) 1px, transparent 1px, transparent 12px);
}
.placeholder-soft {
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(215, 226, 234, 0.10), transparent 60%),
    radial-gradient(120% 80% at 80% 90%, rgba(182, 0, 168, 0.16), transparent 60%),
    #141416;
}

/* CONTACT BUTTON */
.contact-btn {
  background: linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%);
  box-shadow:
    0px 4px 4px rgba(181, 1, 167, 0.25),
    4px 4px 12px #7721B1 inset;
  outline: 2px solid #ffffff;
  outline-offset: -3px;
  color: #fff;
  transition: filter 0.2s ease;
}
.contact-btn:hover { filter: brightness(1.08); cursor: pointer; }

.main-wrap { position: relative; }

/* FADE-IN ANIMATIONS */
.fade-in {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition: opacity 700ms cubic-bezier(0.25, 0.1, 0.25, 1),
              transform 700ms cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: opacity, transform;
}
.fade-in--up    { transform: translate3d(0,  30px, 0); }
.fade-in--down  { transform: translate3d(0, -20px, 0); }
.fade-in--left  { transform: translate3d(-80px, 0, 0); }
.fade-in--right { transform: translate3d( 80px, 0, 0); }
.fade-in.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* MAGNET */
.magnet { transition: transform 0.6s ease-in-out; will-change: transform; }
.magnet.is-active { transition: transform 0.3s ease-out; }

/* PROJECTS — sticky cards */
.project-wrap {
  position: sticky;
  top: 6rem;
  margin-bottom: 18vh;
  padding: 0 0.5rem;
}
@media (min-width: 640px)  { .project-wrap { padding: 0 1rem;   } }
@media (min-width: 768px)  { .project-wrap { padding: 0 1.5rem; } }
.project-wrap:last-child { margin-bottom: 100vh; }

/* Glare + glow-shadow nascosti su desktop (compaiono solo nella variante
   olografica mobile della sezione projects) */
.p-glow-shadow, .p-glare, .proj-bg-text { display: none; }
/* CTA wrap "Let's build" — 4° elemento della ruota mobile, su desktop nascosto */
.proj-cta-wrap { display: none; }

/* PROJECTS MOBILE — holographic 3D track
   Il #projects-list diventa un viewport sticky 100vh con perspective.
   Le card sono absolute, centrate, e ruotano/scalano in Z in base allo
   scroll progress della sezione (matematica dal prototipo Holographic). */
@media (max-width: 767px) {
  #projects {
    height: 400vh;
    position: relative;
  }
  /* Nascondo il titolo "Project" sopra alla lista: la scritta gigante
     "PROJECTS" in background dentro il viewport sticky lo sostituisce */
  #projects > div:first-child {
    display: none;
  }
  #projects-list {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    perspective: 1200px;
    -webkit-perspective: 1200px;
  }
  .project-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100vw - 40px);
    max-width: 380px;
    margin: 0;
    padding: 0;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    will-change: transform, opacity;
  }
  .project-card {
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    /* Altezza gestita via JS (equalizeProjectCards): tutte le card prendono
       l'altezza della più alta (la 01), che mostra tutto il suo contenuto. */
  }
  /* La griglia interna prende l'altezza naturale del contenuto (niente più
     forzatura al 100% che sovrapponeva immagine e testo). */
  .project-card > .grid { flex: 0 0 auto; }
  .project-card .proj-wip { flex: 1 1 auto; }
  /* il tail spacer (200vh) non serve: la min-height di #projects fa da runway */
  .projects-tail { display: none; }

  /* Glow-shadow: aura colorata dietro la card */
  .p-glow-shadow {
    display: block;
    position: absolute;
    inset: 10%;
    background: var(--accent, #B600A8);
    filter: blur(40px);
    opacity: 0.3;
    transform: translateZ(-10px);
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
  }
  /* Background text "PROJECTS": scritta gigante dietro alle card,
     molto sbiadita, ferma al centro del viewport sticky */
  .proj-bg-text {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Kanit', sans-serif;
    font-weight: 900;
    font-size: 22vw;
    line-height: 1;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.045);
    text-transform: uppercase;
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    user-select: none;
  }
  /* Glare: fascio di luce che attraversa la card seguendo la rotazione */
  .p-glare {
    display: block;
    position: absolute;
    inset: -50%;
    background: linear-gradient(
      135deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.15) 45%,
      rgba(255,255,255,0.4) 50%,
      rgba(255,255,255,0.15) 55%,
      rgba(255,255,255,0) 100%
    );
    transform: translateY(-100%);
    pointer-events: none;
    z-index: 10;
    mix-blend-mode: overlay;
  }
  /* CTA wrap (4° elemento del wheel): "Let's build something great."
     emerge ruotando come una quarta card subito dopo la 03 e svanisce prima
     che il contact section inizi — riempie il vuoto dopo l'uscita di card 03 */
  .project-wrap.proj-cta-wrap {
    display: block;
    width: calc(100vw - 24px);
    max-width: 520px;
    text-align: center;
    pointer-events: none;
  }
  .proj-cta-heading {
    font-family: 'Kanit', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    font-size: clamp(54px, 14vw, 84px);
    line-height: 0.92;
    letter-spacing: -0.025em;
    margin: 0;
    color: #fff;
  }
  .proj-cta-heading .cl-outline {
    -webkit-text-stroke-width: 2px;
  }
  /* Su mobile il LET'S BUILD originale del contact section è nascosto:
     la CTA del wheel projects ne fa già le veci */
  #clHeading {
    display: none;
  }
}

.project-card {
  border-radius: 40px;
  border: 2px solid #D7E2EA;
  background: #0C0C0C;
  padding: 1rem;
  transform-origin: top;
  box-shadow: 0 -20px 40px rgba(0,0,0,0.4);
  will-change: transform;
}
@media (min-width: 640px) { .project-card { border-radius: 50px; padding: 1.5rem; } }
@media (min-width: 768px) { .project-card { border-radius: 60px; padding: 2rem; } }

/* FIX click: i .project-wrap sono sticky e si impilano. Le loro aree VUOTE
   (sopra/sotto la card visibile) catturano i click destinati ai bottoni delle
   card sottostanti. Rendendo il wrap trasparente ai click e attivando i click
   solo sulle .project-card effettive, il bottone "Scopri il progetto" della
   card 01 torna cliccabile. Solo desktop: il sistema mobile ha regole proprie. */
@media (min-width: 768px) {
  .project-wrap { pointer-events: none; }
  .project-card { pointer-events: auto; }
}

.live-btn {
  border-radius: 9999px;
  border: 2px solid #D7E2EA;
  color: #D7E2EA;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 12px 32px;
  font-size: 14px;
  transition: background-color 200ms ease;
  cursor: pointer;
  background: transparent;
}
@media (min-width: 640px) { .live-btn { padding: 14px 40px; font-size: 16px; } }
.live-btn:hover { background: rgba(215, 226, 234, 0.1); }

.project-image { position: relative; overflow: hidden; width: 100%; border: 1px solid rgba(255, 255, 255, 0.12); }
.project-image .pi-bg { position: absolute; inset: 0; }
.project-image .pi-grid {
  position: absolute; inset: 0;
  opacity: 0.08;
  background-image:
    linear-gradient(to right,  #ffffff 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff 1px, transparent 1px);
  background-size: 32px 32px;
}
.project-image .pi-orb { position: absolute; inset: 0; display: grid; place-items: center; }
.project-image .pi-orb > div { width: 50%; aspect-ratio: 1/1; border-radius: 50%; }
/* Immagine reale del progetto (es. screenshot, render). Riempie tutto il container
   con object-fit:cover. Sotto sta la "pi-tag" (label decorativa "01.a"). */
.project-image .pi-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
/* Variante HERO: mostra il mockup INTERO (object-fit:contain), senza tagli. Usata
   per le card che hanno un solo mockup principale (FAMA, futuri progetti). */
.project-image.proj-img-hero { border: none; }
.project-image.proj-img-hero .pi-image { object-fit: contain; }
.project-image.proj-img-hero .pi-tag { display: none; }
.project-image .pi-tag, .project-image .pi-drop {
  position: absolute;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.project-image .pi-tag  { top: 12px; left: 12px; color: rgba(255,255,255,0.5); }
.project-image .pi-drop { bottom: 12px; right: 12px; color: rgba(255,255,255,0.35); }

/* Colonna testo del case study (a fianco del mockup hero, layout split FAMA-style) */
.proj-text { color: rgba(215, 226, 234, 0.85); padding: 0 4px; }
.proj-text-p {
  font-family: 'Kanit', sans-serif;
  font-weight: 300;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.7;
  margin-bottom: 1.2em;
}
.proj-text-p:last-child { margin-bottom: 0; }
/* Riga meta (location + anno): piccola, mono, distaccata dal corpo del testo */
.proj-text-meta {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(10px, 0.75vw, 12px);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin-top: 0.6em;
  margin-bottom: 0;
}

/* ─── Blocco "Progetto in lavorazione" (card 02, 03 non ancora pronte) ─── */
.proj-wip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: clamp(220px, 30vw, 380px);
  border: 1px dashed rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  background: linear-gradient(160deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}
.proj-wip-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #B600A8;
  box-shadow: 0 0 14px #B600A8;
  animation: wip-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
.proj-wip-text {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(13px, 1.4vw, 18px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.proj-wip-dots span {
  animation: wip-blink 1.4s infinite both;
}
.proj-wip-dots span:nth-child(2) { animation-delay: 0.2s; }
.proj-wip-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes wip-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.8); }
}
@keyframes wip-blink {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* Blocco recensione cliente — separato visivamente dal corpo descrittivo */
.proj-review {
  margin-top: 2em;
  padding-top: 1.5em;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.proj-review-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B600A8;
  margin-bottom: 0.8em;
}
.proj-review-text {
  font-family: 'Kanit', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(14px, 1.2vw, 19px);
  line-height: 1.6;
  color: rgba(215, 226, 234, 0.9);
  margin-bottom: 0.8em;
}
.proj-review-author {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(10px, 0.8vw, 12px);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}
/* Recensione in fondo al case study */
.cs-review {
  margin: 2.5em 0;
  padding: 2em;
  border: 1px solid rgba(182, 0, 168, 0.25);
  border-radius: 16px;
  background: rgba(182, 0, 168, 0.04);
}
.cs-review-label {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #B600A8;
  margin-bottom: 1em;
}
.cs-review-text {
  font-family: 'Kanit', sans-serif;
  font-weight: 300;
  font-style: italic;
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.6;
  color: rgba(215, 226, 234, 0.95);
  margin: 0 0 1em;
}
.cs-review-author {
  display: block;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.55);
}
/* Zoom dell'immagine hero per ritagliare il logo Gemini in basso a destra.
   L'immagine viene ingrandita del 8% e shiftata leggermente verso l'alto-sinistra
   così la stellina ✦ esce dal viewport del container. */
.project-image.proj-img-hero .pi-image {
  transform: scale(1.08) translate(-2%, -2%);
  transform-origin: center center;
}
/* Su mobile (<768px), il layout split diventa stacked:
   - immagine sopra, centrata, full-width
   - testo sotto con padding interno per evitare overflow.
   Uso selettori specifici e !important dove necessario per superare altri stili. */
@media (max-width: 767px) {
  /* Grid 5-col → 1-col su mobile (forza grid-template-columns) */
  .project-card .grid.grid-cols-5 {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  /* CRUCIALE: grid items hanno min-width:auto default che permette overflow.
     min-width:0 li forza a restringersi e rispettare la larghezza del container. */
  .project-card .grid.grid-cols-5 > .col-span-3,
  .project-card .grid.grid-cols-5 > .col-span-2 {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  /* Container dell'immagine: forza il centramento col flexbox */
  .project-card .grid.grid-cols-5 > .col-span-3 {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  /* IMMAGINE HERO: 88% larghezza centrata */
  .project-card .proj-img-hero {
    width: 88% !important;
    max-width: 88% !important;
    margin: 0 auto !important;
    display: block !important;
  }
  /* Riduco lo zoom anti-Gemini su mobile */
  .project-image.proj-img-hero .pi-image {
    transform: scale(1.05) translate(-1%, -1%) !important;
  }
  /* COLONNA TESTO: padding interno + min-width:0 per consentire restringimento */
  .proj-text {
    padding: 0 8px !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    hyphens: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }
  .proj-text-p,
  .proj-text-meta,
  .proj-review-text,
  .proj-review-author {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    max-width: 100% !important;
  }
  .proj-text-p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 0.9em !important;
  }
  .proj-text-meta {
    font-size: 10px !important;
  }
  .proj-review {
    margin-top: 1.5em !important;
    padding-top: 1.2em !important;
  }
  .proj-review-text {
    font-size: 13px !important;
    line-height: 1.55 !important;
  }
  .proj-review-author {
    font-size: 10px !important;
  }
}

/* ═══════════════════════════════════════════════
   SERVICES — Accordion espandibile (tema chiaro)
   ═══════════════════════════════════════════════ */
.services-container { max-width: 1200px; margin: 0 auto; }
.services-label {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.28em; text-transform: uppercase; color: #B600A8; margin-bottom: 32px;
}
.services-label .sl-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #B600A8;
  box-shadow: 0 0 0 0 rgba(182, 0, 168, 0.55); animation: lm-pulse 2.4s ease-out infinite;
}
.services-title {
  color: #0C0C0C; font-family: 'Kanit', sans-serif; font-weight: 900;
  text-transform: uppercase; line-height: 1; letter-spacing: -0.03em;
  font-size: clamp(3rem, 12vw, 160px); margin-bottom: clamp(40px, 6vw, 80px);
}
.accordion-item { border-bottom: 1px solid rgba(12, 12, 12, 0.15); }
.accordion-item:first-child { border-top: 1px solid rgba(12, 12, 12, 0.15); }
.accordion-header {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  padding: clamp(24px, 3.5vw, 40px) 0; cursor: pointer; background: transparent;
  border: none; color: inherit; text-align: left; font-family: inherit;
}
.accordion-header .ah-left { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); }
.accordion-header .s-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px;
  color: rgba(12, 12, 12, 0.4); transition: color 0.4s ease; flex-shrink: 0;
}
.accordion-header .s-title {
  font-family: 'Kanit', sans-serif; font-weight: 800; text-transform: uppercase;
  font-size: clamp(28px, 5vw, 60px); line-height: 1; color: #0C0C0C;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
  will-change: transform; letter-spacing: -0.02em;
}
.accordion-header .s-icon { position: relative; width: 24px; height: 24px; flex-shrink: 0; }
.accordion-header .s-icon-line {
  position: absolute; background: #0C0C0C;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, opacity 0.4s ease;
}
.accordion-header .s-icon-line.h { top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%); }
.accordion-header .s-icon-line.v { top: 0; left: 50%; width: 2px; height: 100%; transform: translateX(-50%); }
.accordion-header:hover .s-num { color: #B600A8; }
.accordion-header:hover .s-title { transform: translateX(20px); color: #B600A8; }
.accordion-header:hover .s-icon-line { background: #B600A8; }
.accordion-content { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.accordion-inner { overflow: hidden; }
.s-body {
  display: flex; flex-direction: column; gap: 40px; padding-bottom: clamp(32px, 4vw, 50px);
  opacity: 0; transform: translateY(-10px); transition: opacity 0.4s ease, transform 0.4s ease;
}
@media (min-width: 1024px) { .s-body { flex-direction: row; } .s-body .s-text { flex: 0 0 58%; } }
.s-body .s-text { flex: 1; display: flex; flex-direction: column; justify-content: space-between; }
.s-desc { font-family: 'Kanit', sans-serif; font-size: clamp(15px, 1.4vw, 19px); font-weight: 300; color: rgba(12, 12, 12, 0.75); line-height: 1.65; max-width: 56ch; }
.s-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.s-tag {
  padding: 6px 14px; border-radius: 100px; background: rgba(12, 12, 12, 0.04);
  border: 1px solid rgba(12, 12, 12, 0.12); color: rgba(12, 12, 12, 0.65);
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.1em; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.s-tag.accent { background: rgba(182, 0, 168, 0.08); border-color: rgba(182, 0, 168, 0.4); color: #B600A8; }
.s-visual {
  flex: 1; min-height: 200px; aspect-ratio: 16 / 10; border-radius: 20px;
  background: linear-gradient(145deg, #f5f5f7 0%, #e9e9ec 100%);
  border: 1px solid rgba(12, 12, 12, 0.08); position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
/* PC 3D attivo SOLO da 1024px in su (desktop). Sotto: immagine inline.
   Tablet (768-1024px) e mobile (<768px) usano entrambi il fallback .s-visual con immagine. */
@media (min-width: 1024px) { .s-visual { display: none; } }
.s-visual::after {
  content: ''; position: absolute; inset: 0; background: radial-gradient(circle at top right, rgba(182, 0, 168, 0.12), transparent 60%); pointer-events: none;
}
.s-visual .sv-label {
  position: relative; z-index: 2; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(12, 12, 12, 0.5); padding: 8px 16px;
  border: 1px solid rgba(12, 12, 12, 0.15); border-radius: 100px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(8px);
}
.s-visual .sv-decor { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0.55; }
.s-visual .sv-decor svg { width: 60%; height: 60%; max-width: 200px; }
/* Immagine reale del servizio (mobile/tablet fallback): copre tutto il .s-visual
   con object-fit:cover. Il .s-visual ha aspect-ratio 16/10 (vedi sopra) così le
   immagini AI (generate in formato 16:9 o simile) si mostrano bene senza tagli
   eccessivi e senza letterbox. */
.s-visual .sv-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
.s-visual:has(.sv-image:not([style*="display: none"])) .sv-decor { display: none; }
.s-visual:has(.sv-image:not([style*="display: none"])) .sv-label { display: none; }
.accordion-item.is-active .accordion-content { grid-template-rows: 1fr; }
.accordion-item.is-active .s-body { opacity: 1; transform: translateY(0); transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s; }
.accordion-item.is-active .s-icon-line.v { transform: translateX(-50%) rotate(90deg); opacity: 0; }
.accordion-item.is-active .s-title { color: #B600A8; transform: translateX(20px); }
.accordion-item.is-active .s-num { color: #B600A8; }
.accordion-item.is-active .s-icon-line { background: #B600A8; }

/* HERO CURSOR */
.hero-cursor { position: fixed; left: 0; top: 0; pointer-events: none; z-index: 100; will-change: transform; opacity: 0; transition: opacity 0.45s ease; }
.hc-inner { width: clamp(72px, 7vw, 100px); aspect-ratio: 1 / 1; position: relative; will-change: transform; }
.hc-scale { width: 100%; height: 100%; position: relative; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hc-halo {
  position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(182, 0, 168, 0.55), transparent 60%); filter: blur(20px); opacity: 0.7;
}
.hc-bubble { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 6px 20px rgba(182, 0, 168, 0.35)); }
body.cursor-hidden, body.cursor-hidden * { cursor: none !important; }

/* SITE HEADER */
.site-header {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center;
  padding: 0 clamp(16px, 2.5vw, 28px); pointer-events: none;
}
.site-header > * { pointer-events: auto; opacity: 0; transform: translateY(-20px); animation: header-drop 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1); }
.site-header .nav-pill { animation-delay: 0.18s; }
.site-header .header-cta { animation-delay: 0.30s; }
.site-header .menu-toggle { animation-delay: 0.18s; }
@keyframes header-drop { to { opacity: 1; transform: translateY(0); } }
.site-header.is-condensed { top: 10px; }
.site-header.is-condensed > * { transform: scale(0.93); }

.nav-pill {
  position: relative; padding: 6px; border-radius: 999px; background: rgba(20, 20, 22, 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(215, 226, 234, 0.12); display: flex; align-items: center;
}

/* Logo nell'header (in alto a sinistra, cliccabile → torna su) */
.nav-logo { display: inline-flex; align-items: center; line-height: 0; }
.nav-logo img { height: 52px; width: auto; display: block; transition: transform 0.3s ease, filter 0.3s ease; }
.nav-logo:hover img { transform: scale(1.05); filter: drop-shadow(0 4px 14px rgba(182,0,168,0.4)); }

/* Logo nella schermata d'ingresso (sopra il titolo) */
.dl-gate-logo { display: block; height: clamp(110px, 15vw, 170px); width: auto; margin: 0 auto 24px; }

/* Logo nel footer */
.footer-logo { display: block; height: 80px; width: auto; margin: 0 auto 20px; opacity: 0.92; }
.nav-pill .np-indicator {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; border-radius: 999px; background: rgba(215, 226, 234, 0.08); transition: transform 0.55s cubic-bezier(0.34, 1.4, 0.6, 1), width 0.55s cubic-bezier(0.34, 1.4, 0.6, 1), opacity 0.4s ease; opacity: 0; pointer-events: none; z-index: 0;
}
.nav-pill.has-indicator .np-indicator { opacity: 1; }
.nav-pill.indicator-active .np-indicator { background: radial-gradient(120% 200% at 0% 50%, rgba(182, 0, 168, 0.32), rgba(118, 33, 176, 0.18) 60%, transparent 75%); box-shadow: inset 0 0 0 1px rgba(182, 0, 168, 0.25); }
.np-link {
  position: relative; z-index: 1; font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(215, 226, 234, 0.5); padding: 10px 18px; border-radius: 999px; transition: color 0.35s ease; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.np-link:hover, .np-link.is-active { color: #D7E2EA; }
.np-link .np-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 9px; color: rgba(215, 226, 234, 0.5); letter-spacing: 0.1em; transform: translateY(-3px); transition: color 0.35s ease; }
.np-link:hover .np-num, .np-link.is-active .np-num { color: #B600A8; }

.header-cta {
  position: relative; font-family: 'Kanit', sans-serif; font-weight: 500; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; color: #D7E2EA; padding: 14px 22px 14px 18px; border-radius: 999px; background: rgba(20, 20, 22, 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(215, 226, 234, 0.12); display: inline-flex; align-items: center; gap: 12px; overflow: hidden; cursor: pointer; text-decoration: none; transition: border-color 0.4s ease, padding 0.5s cubic-bezier(0.2, 0.9, 0.2, 1), color 0.4s ease;
}
.header-cta::before { content: ''; position: absolute; inset: 0; background: linear-gradient(123deg, #18011F 7%, #B600A8 37%, #7621B0 72%, #BE4C00 100%); opacity: 0; transition: opacity 0.5s ease; z-index: 0; }
.header-cta > * { position: relative; z-index: 1; }
.header-cta .hc-dot { width: 6px; height: 6px; border-radius: 50%; background: #B600A8; transition: background 0.4s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1); }
.header-cta .hc-arrow { display: inline-block; transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1); }
.header-cta:hover { border-color: transparent; padding-right: 32px; color: #fff; }
.header-cta:hover::before { opacity: 1; }
.header-cta:hover .hc-dot { background: #fff; transform: scale(0); }
.header-cta:hover .hc-arrow { transform: translateX(6px); }

.menu-toggle {
  display: none; width: 48px; height: 48px; border-radius: 999px; background: rgba(20, 20, 22, 0.7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(215, 226, 234, 0.12); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px;
}
.menu-toggle span { width: 18px; height: 1.5px; background: #D7E2EA; transition: transform 0.4s ease; }
.menu-toggle.is-open span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-toggle.is-open span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }

.mobile-overlay {
  position: fixed; inset: 0; background: rgba(12, 12, 12, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 90; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 0 clamp(24px, 8vw, 48px);
}
.mobile-overlay.is-open { opacity: 1; pointer-events: auto; }
.mobile-overlay a {
  font-family: 'Kanit', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(40px, 12vw, 80px); line-height: 1; color: #D7E2EA; display: inline-flex; align-items: baseline; gap: 14px; padding: 12px 0; text-decoration: none; transform: translateY(40px); opacity: 0; transition: color 0.3s ease;
}
.mobile-overlay.is-open a { animation: mo-rise 0.7s cubic-bezier(0.2, 0.9, 0.2, 1) forwards; }
@keyframes mo-rise { to { opacity: 1; transform: translateY(0); } }
.mobile-overlay.is-open a:nth-child(1) { animation-delay: 0.10s; }
.mobile-overlay.is-open a:nth-child(2) { animation-delay: 0.18s; }
.mobile-overlay.is-open a:nth-child(3) { animation-delay: 0.26s; }
.mobile-overlay.is-open a:nth-child(4) { animation-delay: 0.34s; }
.mobile-overlay a:hover { color: #B600A8; }
.mobile-overlay a .mo-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; color: rgba(215, 226, 234, 0.5); font-weight: 400; }
@media (max-width: 900px) { .nav-pill, .header-cta { display: none; } .menu-toggle { display: inline-flex; margin-left: auto; } }

/* ═══════════════════════════════════════════════
   STAGE — hero + morph + horizontal scroll
   ═══════════════════════════════════════════════ */
.stage { position: relative; height: 700vh; background: #0C0C0C; }
.stage-pin { position: sticky; top: 0; height: 100vh; overflow: hidden; background: #030303; }
#glcanvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.bg-noise { position: absolute; inset: 0; z-index: 2; opacity: 0.05; pointer-events: none; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }

.stage-header { position: absolute; top: 100px; left: 0; right: 0; padding: 16px clamp(24px, 4vw, 64px); display: flex; justify-content: space-between; align-items: baseline; z-index: 10; pointer-events: none; will-change: opacity; opacity: 0; }
.stage-header h2 { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(215, 226, 234, 0.5); }
.stage-header h2 .accent { color: #B600A8; }
.stage-header .count { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(215, 226, 234, 0.5); }

.hero-intro { position: absolute; bottom: clamp(40px, 8vh, 80px); left: clamp(24px, 4vw, 64px); max-width: 580px; display: flex; gap: 22px; align-items: flex-start; z-index: 4; will-change: opacity, transform; perspective: 700px; }
.hero-intro .marker { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(20px, 2vw, 28px); color: #B600A8; line-height: 1; margin-top: 2px; }
.hero-intro p { font-weight: 300; font-size: clamp(15px, 1.2vw, 18px); line-height: 1.55; color: #D7E2EA; transform-origin: center center; backface-visibility: hidden; will-change: transform, opacity; }
.hero-role { font-family: 'JetBrains Mono', ui-monospace, monospace; color: #B600A8; background: rgba(182, 0, 168, 0.1); padding: 2px 8px; border-radius: 4px; font-size: 0.9em; text-transform: uppercase; letter-spacing: 0.05em; }

.stage-track { position: absolute; left: 0; top: 50%; transform: translateY(-50%); display: flex; gap: 16px; padding: 0 clamp(24px, 4vw, 64px); align-items: center; will-change: transform; z-index: 3; }
.tile-zero { flex-shrink: 0; position: relative; overflow: hidden; will-change: width, height, border-radius, background-color; background-color: transparent; border: 1px solid transparent; }
.tile-zero .tz-name { position: absolute; will-change: font-size, left, top, transform; font-family: 'Kanit', sans-serif; font-weight: 900; text-transform: uppercase; line-height: 0.85; letter-spacing: 0; pointer-events: none; z-index: 3; }
.tile-zero .tz-name .l1 { display: block; color: #FFFFFF; white-space: nowrap; }
.tile-zero .tz-name .l2 { display: block; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.85); color: transparent; white-space: nowrap; will-change: margin-left, -webkit-text-stroke-width, color; }
.tile-zero .tz-name .l2.fill { -webkit-text-stroke: 0; color: #FFFFFF; }
.tile-zero .tz-sphere { position: absolute; will-change: width, height, top, right; pointer-events: none; }
.tile-zero .tz-meta { position: absolute; top: 14px; left: 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #B600A8; will-change: opacity; opacity: 0; z-index: 4; }
.tile-zero .tz-tag { position: absolute; bottom: 14px; right: 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.4); will-change: opacity; opacity: 0; z-index: 4; }
.tile-zero.is-card-mode { background-color: rgba(14, 14, 16, 0.45); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-color: rgba(255, 255, 255, 0.1); }

.companion { flex-shrink: 0; width: 420px; height: 270px; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.1); position: relative; overflow: hidden; }
.companion .mt-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* Griglia decorativa: visibile solo come fallback quando NON c'è un'immagine caricata.
   Con :has() la griglia resta nascosta sulle card che hanno la .mt-image,
   ma rimane attiva sulle card con solo gradient (se un file manca). */
.companion .mt-grid { position: absolute; inset: 0; opacity: 0.08; pointer-events: none; background-image: linear-gradient(to right,  #ffffff 1px, transparent 1px), linear-gradient(to bottom, #ffffff 1px, transparent 1px); background-size: 40px 40px; z-index: 1; }
.companion:has(.mt-image) .mt-grid { display: none; }
/* Etichetta servizio in basso a destra (es. "siti responsive").
   Unica label visibile sulla card, leggibilmente accentata. */
.companion .mt-meta { position: absolute; bottom: 16px; right: 16px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.20em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 6px rgba(0,0,0,0.7); z-index: 2; }

@media (max-width: 700px) { .companion { width: 75vw; height: 55vh; max-height: 420px; min-height: 320px; } }

/* ═══════════════════════════════════════════════
   TUNNEL — Z-axis About section
   ═══════════════════════════════════════════════ */
.tunnel-context { position: relative; height: 700vh; background: #030303; }
.tunnel-camera { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; perspective: 1000px; background: radial-gradient(ellipse at center, #0a0a0c 0%, #030303 70%); }
.tunnel-camera::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; animation: starfield-twinkle 8s ease-in-out infinite;
  background-image:
    /* Stelle bianche piccole — distribuzione fitta */
    radial-gradient(circle at 3%  7%,  rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 5% 12%,  rgba(255,255,255,0.45) 0.5px, transparent 1px),
    radial-gradient(circle at 9% 22%,  rgba(255,255,255,0.35) 0.5px, transparent 1px),
    radial-gradient(circle at 12% 28%, rgba(255,255,255,0.3)  0.5px, transparent 1px),
    radial-gradient(circle at 18% 8%,  rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 22% 17%, rgba(255,255,255,0.5)  0.5px, transparent 1px),
    radial-gradient(circle at 27% 24%, rgba(255,255,255,0.3)  0.5px, transparent 1px),
    radial-gradient(circle at 33% 18%, rgba(255,255,255,0.35) 0.5px, transparent 1px),
    radial-gradient(circle at 37% 4%,  rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 42% 7%,  rgba(255,255,255,0.5)  0.5px, transparent 1px),
    radial-gradient(circle at 46% 14%, rgba(255,255,255,0.35) 0.5px, transparent 1px),
    radial-gradient(circle at 52% 5%,  rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 58% 22%, rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 62% 10%, rgba(255,255,255,0.3)  0.5px, transparent 1px),
    radial-gradient(circle at 67% 14%, rgba(255,255,255,0.3)  0.5px, transparent 1px),
    radial-gradient(circle at 72% 25%, rgba(255,255,255,0.5)  0.5px, transparent 1px),
    radial-gradient(circle at 77% 6%,  rgba(255,255,255,0.35) 0.5px, transparent 1px),
    radial-gradient(circle at 82% 19%, rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 88% 9%,  rgba(255,255,255,0.45) 0.5px, transparent 1px),
    radial-gradient(circle at 93% 26%, rgba(255,255,255,0.35) 0.5px, transparent 1px),
    radial-gradient(circle at 97% 16%, rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 3%  48%, rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 7%  56%, rgba(255,255,255,0.3)  0.5px, transparent 1px),
    radial-gradient(circle at 15% 62%, rgba(255,255,255,0.3)  0.5px, transparent 1px),
    radial-gradient(circle at 19% 47%, rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 24% 55%, rgba(255,255,255,0.35) 0.5px, transparent 1px),
    radial-gradient(circle at 28% 78%, rgba(255,255,255,0.45) 0.5px, transparent 1px),
    radial-gradient(circle at 32% 67%, rgba(255,255,255,0.3)  0.5px, transparent 1px),
    radial-gradient(circle at 37% 92%, rgba(255,255,255,0.35) 0.5px, transparent 1px),
    radial-gradient(circle at 41% 50%, rgba(255,255,255,0.45) 0.5px, transparent 1px),
    radial-gradient(circle at 45% 76%, rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 48% 88%, rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 53% 63%, rgba(255,255,255,0.35) 0.5px, transparent 1px),
    radial-gradient(circle at 58% 95%, rgba(255,255,255,0.3)  0.5px, transparent 1px),
    radial-gradient(circle at 62% 73%, rgba(255,255,255,0.3)  0.5px, transparent 1px),
    radial-gradient(circle at 66% 51%, rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 73% 85%, rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 76% 60%, rgba(255,255,255,0.35) 0.5px, transparent 1px),
    radial-gradient(circle at 80% 93%, rgba(255,255,255,0.45) 0.5px, transparent 1px),
    radial-gradient(circle at 85% 65%, rgba(255,255,255,0.45) 0.5px, transparent 1px),
    radial-gradient(circle at 89% 49%, rgba(255,255,255,0.3)  0.5px, transparent 1px),
    radial-gradient(circle at 93% 84%, rgba(255,255,255,0.4)  0.5px, transparent 1px),
    radial-gradient(circle at 96% 80%, rgba(255,255,255,0.3)  0.5px, transparent 1px),
    radial-gradient(circle at 99% 58%, rgba(255,255,255,0.35) 0.5px, transparent 1px),
    /* Stelle bianche più grandi e brillanti */
    radial-gradient(circle at 14% 41%, rgba(255,255,255,0.7)  1px, transparent 2px),
    radial-gradient(circle at 25% 32%, rgba(255,255,255,0.7)  1px, transparent 2px),
    radial-gradient(circle at 38% 60%, rgba(255,255,255,0.6)  1px, transparent 2px),
    radial-gradient(circle at 50% 55%, rgba(255,255,255,0.65) 1px, transparent 2px),
    radial-gradient(circle at 56% 18%, rgba(255,255,255,0.55) 1px, transparent 2px),
    radial-gradient(circle at 68% 81%, rgba(255,255,255,0.7)  1px, transparent 2px),
    radial-gradient(circle at 72% 38%, rgba(255,255,255,0.6)  1px, transparent 2px),
    radial-gradient(circle at 82% 56%, rgba(255,255,255,0.65) 1px, transparent 2px),
    radial-gradient(circle at 11% 71%, rgba(255,255,255,0.7)  1px, transparent 2px),
    radial-gradient(circle at 91% 35%, rgba(255,255,255,0.55) 1px, transparent 2px),
    /* Stelle magenta */
    radial-gradient(circle at 12% 17%, rgba(182, 0, 168, 0.4)  1px, transparent 2.5px),
    radial-gradient(circle at 20% 35%, rgba(182, 0, 168, 0.5)  1px, transparent 2.5px),
    radial-gradient(circle at 38% 62%, rgba(182, 0, 168, 0.45) 1px, transparent 2.5px),
    radial-gradient(circle at 47% 28%, rgba(182, 0, 168, 0.4)  1px, transparent 2.5px),
    radial-gradient(circle at 65% 28%, rgba(182, 0, 168, 0.4)  1px, transparent 2.5px),
    radial-gradient(circle at 78% 48%, rgba(182, 0, 168, 0.4)  1px, transparent 2.5px),
    radial-gradient(circle at 86% 76%, rgba(182, 0, 168, 0.45) 1px, transparent 2.5px),
    radial-gradient(circle at 90% 72%, rgba(182, 0, 168, 0.35) 1px, transparent 2.5px),
    /* Stelle viola */
    radial-gradient(circle at 8%  38%, rgba(118, 33, 176, 0.4) 0.8px, transparent 2px),
    radial-gradient(circle at 22% 70%, rgba(118, 33, 176, 0.35) 0.8px, transparent 2px),
    radial-gradient(circle at 30% 5%,  rgba(118, 33, 176, 0.3)  0.8px, transparent 2px),
    radial-gradient(circle at 45% 45%, rgba(118, 33, 176, 0.35) 0.8px, transparent 2px),
    radial-gradient(circle at 60% 87%, rgba(118, 33, 176, 0.4)  0.8px, transparent 2px),
    radial-gradient(circle at 70% 80%, rgba(118, 33, 176, 0.4)  0.8px, transparent 2px),
    radial-gradient(circle at 84% 40%, rgba(118, 33, 176, 0.35) 0.8px, transparent 2px);
}
@keyframes starfield-twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } }
.tunnel-world { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-style: preserve-3d; will-change: transform; }
.t-element { position: absolute; top: 50%; left: 50%; transform-style: preserve-3d; will-change: transform, opacity, filter; }

.t-huge-text { font-family: 'Kanit', sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(120px, 25vw, 400px); line-height: 0.8; letter-spacing: -0.05em; white-space: nowrap; }
.t-outline { color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, 0.2); }
.t-outline-magenta { color: transparent; -webkit-text-stroke: 3px #B600A8; text-shadow: 0 0 50px rgba(182, 0, 168, 0.4); }
@media (max-width: 700px) { .t-outline { -webkit-text-stroke-width: 1.5px; } .t-outline-magenta { -webkit-text-stroke-width: 2px; } }

.bio-panel {
  width: clamp(320px, 92vw, 820px); padding: clamp(32px, 6vw, 60px); background: rgba(14, 14, 16, 1);
  border: 1px solid rgba(255, 255, 255, 0.15); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border-radius: clamp(20px, 3vw, 30px); box-shadow: 0 30px 60px rgba(0,0,0,0.8), inset 0 0 0 1px rgba(255,255,255,0.05);
  display: flex; flex-direction: column; gap: 16px;
}
.bio-panel h3 { font-family: 'Kanit', sans-serif; font-size: clamp(22px, 3vw, 36px); font-weight: 300; line-height: 1.2; color: #fff; }
.bio-panel h3 strong { font-weight: 700; color: #fff; }
.bio-panel p { font-family: 'Kanit', sans-serif; color: rgba(215, 226, 234, 0.85); font-weight: 300; font-size: clamp(15px, 1.4vw, 21px); line-height: 1.65; }

.skill-tag {
  padding: 10px 20px; border-radius: 100px; border: 1px solid rgba(182, 0, 168, 0.5); background: rgba(182, 0, 168, 0.1); color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(11px, 1vw, 14px); text-transform: uppercase; letter-spacing: 0.1em;
  white-space: nowrap; box-shadow: 0 0 20px rgba(182, 0, 168, 0.2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
@media (max-width: 700px) { .skill-tag { padding: 8px 14px; font-size: 11px; } }

.final-cta { display: flex; flex-direction: column; align-items: center; gap: clamp(20px, 3vw, 32px); width: clamp(280px, 90vw, 600px); text-align: center; }
.final-cta .fc-pre { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: clamp(11px, 1.2vw, 14px); letter-spacing: 0.28em; text-transform: uppercase; color: rgba(215, 226, 234, 0.5); }
.final-cta .fc-big { font-family: 'Kanit', sans-serif; font-size: clamp(36px, 6vw, 80px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; text-transform: uppercase; color: #fff; }
.final-cta .fc-big .accent { color: #B600A8; }
.final-cta .fc-btn { display: inline-flex; align-items: center; gap: 14px; background: #B600A8; color: #fff; padding: clamp(16px, 2vw, 22px) clamp(32px, 4vw, 48px); border-radius: 999px; font-family: 'Kanit', sans-serif; font-weight: 600; font-size: clamp(12px, 1.1vw, 14px); text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; box-shadow: 0 0 40px rgba(182, 0, 168, 0.4); transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1), padding 0.5s cubic-bezier(0.2, 0.9, 0.2, 1), box-shadow 0.4s ease; }
.final-cta .fc-btn:hover { transform: scale(1.05); padding-right: clamp(44px, 5vw, 62px); box-shadow: 0 0 60px rgba(182, 0, 168, 0.6); }
.final-cta .fc-btn .arrow { display: inline-block; transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1); }
.final-cta .fc-btn:hover .arrow { transform: translateX(8px); }

.scroll-hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 10; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.22em; color: rgba(215, 226, 234, 0.5); transition: opacity 0.4s ease; pointer-events: none; }
.scroll-hint .mouse { width: 20px; height: 30px; border: 1px solid rgba(215, 226, 234, 0.8); border-radius: 10px; position: relative; }
.scroll-hint .wheel { width: 2px; height: 6px; background: #B600A8; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); animation: scroll-wheel 1.5s infinite; }
@keyframes scroll-wheel { 0% { top: 4px;  opacity: 1; } 100% { top: 16px; opacity: 0; } }

/* Blocco PIVOT TRANSITION rimosso: Projects e Contact tornano sezioni normali. */

.contact-section {
  background: #0C0C0C;
  display: flex;
  flex-direction: column;
  position: relative;
}
@media (min-width: 1024px) {
  .contact-section {
    flex-direction: row;
    min-height: 100vh;
  }
}

/* Lato sinistro: status + titolone */
.contact-left {
  background: transparent;
  padding: clamp(64px, 12vw, 160px) clamp(24px, 5vw, 80px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 36px;
  position: relative;
  z-index: 1;
}
@media (min-width: 1024px) {
  .contact-left {
    flex: 1;
  }
}

.cl-status {
  display: inline-flex; align-items: center; gap: 14px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.28em; color: #B600A8; margin-bottom: 36px;
}
.cl-status .cl-dot { width: 8px; height: 8px; border-radius: 50%; background: #B600A8; box-shadow: 0 0 0 0 rgba(182, 0, 168, 0.55); animation: lm-pulse 2.4s ease-out infinite; }

.cl-heading { font-family: 'Kanit', sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(48px, 6.5vw, 110px); line-height: 0.92; letter-spacing: -0.025em; color: #fff; margin-top: 0; }
/* Stato statico originale: "Let's build" + "great." pieni, "something" outline */
.cl-word { display: inline-block; }
.cl-word.cl-fill { color: #fff; }
.cl-word.cl-outline { color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.25); }

.contact-right {
  padding: clamp(64px, 10vw, 130px) clamp(24px, 5vw, 80px);
  display: flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
@media (min-width: 1024px) { .contact-right { flex: 1.2; } }

.form-container { width: 100%; max-width: 640px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: clamp(32px, 4vw, 56px); background: rgba(255, 255, 255, 0.015); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3); }
.form-row { display: flex; flex-direction: column; gap: 0; }
@media (min-width: 768px) { .form-row { flex-direction: row; gap: 28px; } }

.input-group { position: relative; margin-bottom: 36px; flex: 1; }
.form-input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-family: 'Kanit', sans-serif; font-size: 17px; font-weight: 400; padding: 10px 0; outline: none; transition: border-color 0.3s ease; resize: none; }
textarea.form-input { min-height: 80px; line-height: 1.5; }
.form-label { position: absolute; left: 0; top: 12px; color: rgba(255, 255, 255, 0.5); font-family: 'Kanit', sans-serif; font-weight: 300; font-size: 17px; pointer-events: none; transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.form-input:focus ~ .form-label, .form-input:valid ~ .form-label, .form-input.is-filled ~ .form-label { top: -16px; font-size: 10.5px; font-family: 'JetBrains Mono', ui-monospace, monospace; text-transform: uppercase; letter-spacing: 0.18em; color: #B600A8; }
.form-input:focus { border-bottom-color: #B600A8; }

/* Stato errore per validazione client-side (name, email) */
.form-input.is-invalid { border-bottom-color: #f87171; }
.form-input.is-invalid:focus { border-bottom-color: #f87171; }
.form-input.is-invalid ~ .form-label { color: #f87171; }
.field-error { display: none; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; color: #f87171; margin-top: 8px; line-height: 1.4; }
.field-error.is-visible { display: block; }

/* Consent checkbox per Privacy Policy (GDPR Art. 7 — consenso esplicito) */
.consent-group { margin: 22px 0 4px; }
.consent-row {
  display: flex; align-items: flex-start; gap: 12px;
  cursor: pointer; user-select: none;
}
.consent-checkbox {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  width: 18px; height: 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
  margin: 0;
  position: relative;
  transition: border-color 0.2s, background-color 0.2s;
}
.consent-checkbox:hover { border-color: rgba(255, 255, 255, 0.5); }
.consent-checkbox:checked {
  background: #B600A8;
  border-color: #B600A8;
}
.consent-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.consent-checkbox.is-invalid { border-color: #f87171; }
.consent-label {
  font-family: 'Kanit', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.5;
}
.consent-label a {
  color: #B600A8;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.2s;
}
.consent-label a:hover { color: #fff; }

.form-selector { margin-bottom: 44px; }
.fs-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 255, 255, 0.4); margin-bottom: 14px; }
.fs-hint { display: inline-block; margin-left: 10px; text-transform: none; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.28); font-size: 10px; }
.pills-group { display: flex; flex-wrap: wrap; gap: 10px; }
.pills-group input[type="radio"],
.pills-group input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }
.pill-label { cursor: pointer; padding: 9px 18px; border-radius: 100px; border: 1px solid rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.6); font-family: 'Kanit', sans-serif; font-size: 13px; font-weight: 400; transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease; }
.pill-label:hover { border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.pills-group input[type="radio"]:checked + .pill-label,
.pills-group input[type="checkbox"]:checked + .pill-label { background: rgba(182, 0, 168, 0.12); border-color: #B600A8; color: #B600A8; font-weight: 500; }
.pills-group input[type="radio"]:focus-visible + .pill-label,
.pills-group input[type="checkbox"]:focus-visible + .pill-label { outline: 2px solid rgba(182, 0, 168, 0.5); outline-offset: 2px; }

.submit-btn { width: 100%; background: transparent; border: 1px solid rgba(255, 255, 255, 0.2); color: #fff; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.22em; padding: 22px 0; border-radius: 12px; cursor: pointer; position: relative; overflow: hidden; transition: border-color 0.4s ease, color 0.4s ease; display: inline-flex; align-items: center; justify-content: center; gap: 14px; }
.submit-btn::before { content: ''; position: absolute; top: 0; left: 0; width: 0%; height: 100%; background: #B600A8; transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1); z-index: 0; }
.submit-btn > * { position: relative; z-index: 1; }
.submit-btn:hover { border-color: #B600A8; color: #fff; }
.submit-btn:hover::before { width: 100%; }
.submit-btn .sb-arrow { display: inline-block; transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1); }
.submit-btn:hover .sb-arrow { transform: translateX(6px); }
.submit-btn:disabled { opacity: 0.5; cursor: wait; }
.submit-btn:disabled:hover { border-color: rgba(255,255,255,0.2); }
.submit-btn:disabled:hover::before { width: 0%; }

/* ─── Divisore "oppure" + bottone WhatsApp sotto il form ─── */
.wa-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 28px 0;
  color: rgba(255, 255, 255, 0.35);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.wa-divider::before,
.wa-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.wa-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px 0;
  border: 1px solid rgba(37, 211, 102, 0.4);
  border-radius: 12px;
  background: rgba(37, 211, 102, 0.06);
  color: #25D366;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease;
}
.wa-btn::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0%; height: 100%;
  background: #25D366;
  transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}
.wa-btn > * { position: relative; z-index: 1; }
.wa-btn:hover { border-color: #25D366; color: #0C0C0C; background: transparent; }
.wa-btn:hover::before { width: 100%; }
.wa-icon { width: 18px; height: 18px; flex-shrink: 0; }
.wa-arrow { display: inline-block; transition: transform 0.5s cubic-bezier(0.2, 0.9, 0.2, 1); }
.wa-btn:hover .wa-arrow { transform: translateX(6px); }

/* Status messages dopo submit (success/error) */
.form-status { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.08em; padding: 14px 18px; border-radius: 8px; margin: 8px 0 4px; display: none; line-height: 1.5; }
.form-status--success { display: block; background: rgba(34, 197, 94, 0.08); border: 1px solid rgba(34, 197, 94, 0.35); color: #4ade80; }
.form-status--error { display: block; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.35); color: #f87171; }

/* ═══════════════════════════════════════════════
   FOOTER — Terminal outro
   ═══════════════════════════════════════════════ */
.site-footer { background: #030303; position: relative; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: clamp(60px, 8vw, 100px); padding-bottom: clamp(32px, 4vw, 48px); overflow: hidden; }
.site-footer::before { content: ''; position: absolute; inset: 0; z-index: 0; opacity: 0.05; pointer-events: none; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"); }
.footer-inner { max-width: 1600px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 80px); position: relative; z-index: 10; }
.footer-grid { display: grid; grid-template-columns: 1fr; gap: 60px; margin-bottom: clamp(60px, 7vw, 100px); }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: 40px; } }
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.f-title { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: rgba(255, 255, 255, 0.35); margin-bottom: 20px; }
.f-title-spaced { margin-top: 32px; }
.status-box { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 100px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: #fff; margin-bottom: 28px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: #00FF66; box-shadow: 0 0 15px #00FF66; animation: footer-pulse-green 2s ease-in-out infinite; }
@keyframes footer-pulse-green { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } }
.f-tagline { color: rgba(255, 255, 255, 0.5); font-family: 'Kanit', sans-serif; font-weight: 300; font-size: 14px; line-height: 1.65; max-width: 32ch; }
.f-link { display: inline-flex; align-items: center; font-family: 'Kanit', sans-serif; font-size: clamp(18px, 1.6vw, 24px); font-weight: 300; color: #D7E2EA; margin-bottom: 10px; text-decoration: none; transition: color 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), font-style 0.3s ease; position: relative; }
.f-link::before { content: '→'; position: absolute; left: -24px; opacity: 0; color: #B600A8; transition: opacity 0.3s ease, transform 0.4s ease; transform: translateX(-10px); }
.f-link:hover { color: #B600A8; font-style: italic; transform: translateX(24px); }
.f-link:hover::before { opacity: 1; transform: translateX(0); }
.f-socials { display: flex; gap: 22px; flex-wrap: wrap; }
.f-social-link { font-family: 'Kanit', sans-serif; font-weight: 400; font-size: 15px; color: rgba(255, 255, 255, 0.6); text-decoration: none; position: relative; padding-bottom: 2px; transition: color 0.3s ease; }
.f-social-link::after { content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: #B600A8; transform: scaleX(0); transform-origin: left; transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1); }
.f-social-link:hover { color: #B600A8; }
.f-social-link:hover::after { transform: scaleX(1); }
.f-email { font-family: 'Kanit', sans-serif; font-size: clamp(22px, 2.5vw, 36px); font-weight: 700; color: #fff; text-decoration: none; letter-spacing: -0.01em; transition: color 0.3s ease; }
.f-email:hover { color: #B600A8; }
.f-time-value { font-family: 'Kanit', sans-serif; font-weight: 300; font-size: 15px; color: rgba(255, 255, 255, 0.7); }
.f-time { color: #B600A8; font-weight: 500; font-size: 0.95em; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 32px; }
.footer-bar { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.35); }
@media (min-width: 768px) { .footer-bar { flex-direction: row; gap: 20px; } }
.footer-bar .footer-legal-link { color: rgba(255, 255, 255, 0.45); text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, 0.15); transition: color 0.25s, border-color 0.25s; padding-bottom: 1px; }
.footer-bar .footer-legal-link:hover { color: #B600A8; border-bottom-color: #B600A8; }

/* ═══════════════════════════════════════════════
   DESK LOADER (scena 3D intro)
   ═══════════════════════════════════════════════ */
#desk-loader {
  position: fixed; inset: 0; z-index: 9999;
  background: radial-gradient(circle at center, #101015 0%, #040405 100%);
  color: #fff;
  font-family: 'Kanit', sans-serif;
  transition: opacity 0.8s ease;
  overflow: hidden;
}
#desk-loader::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.035;
  z-index: 5;
}
#desk-loader.is-hidden { opacity: 0; pointer-events: none; }
#desk-loader.is-removed { display: none; }
#desk-loader #scene-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  background: transparent;
  z-index: 1;
}
#desk-loader .dl-hud {
  position: absolute; top: 4vh; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); z-index: 10;
}
#desk-loader .dl-caption {
  position: absolute; top: 9vh; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); z-index: 10;
  opacity: 0; transition: opacity 0.8s ease; pointer-events: none;
  text-align: center; white-space: nowrap;
}
#desk-loader .dl-caption.is-visible { opacity: 1; }
/* Su mobile niente scritta: l'accesso avviene solo col pulsante ENTRA. */
@media (max-width: 767px) {
  #desk-loader .dl-caption { display: none; }
}
#desk-loader .dl-replay-btn {
  position: absolute; top: 15vh; left: 50%; transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.3em; text-transform: uppercase; color: #fff;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.2);
  padding: 14px 32px; border-radius: 100px; cursor: pointer;
  z-index: 10; opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
#desk-loader .dl-replay-btn.is-visible { opacity: 1; pointer-events: auto; }
#desk-loader .dl-replay-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.4); }
/* Su mobile il pulsante ENTRA è il metodo principale per accedere: più grande
   e con accento magenta, così è chiaramente tappabile (il tap sullo schermo
   del PC non è affidabile su Safari iOS). */
@media (max-width: 767px) {
  #desk-loader .dl-replay-btn {
    font-size: 14px; padding: 18px 46px; letter-spacing: 0.35em;
    background: rgba(182,0,168,0.18); border-color: rgba(182,0,168,0.65);
    box-shadow: 0 0 32px rgba(182,0,168,0.3);
  }
}
#desk-loader .dl-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 12px;
  letter-spacing: 0.3em; color: rgba(255,255,255,0.6);
  z-index: 20; transition: opacity 0.5s ease;
}
#desk-loader .dl-loading.is-done { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { #desk-loader { display: none !important; } }

/* ─── GATE: scelta iniziale (intro 3D vs skip) ───
   Mostrato di default. Quando l'utente clicca "Visualizza la intro",
   il JS toglie .is-gate e aggiunge .is-intro → il gate sfuma e la
   scena 3D entra in scena. */
#desk-loader .dl-gate {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 5vw;
  z-index: 25;
  opacity: 1;
  transition: opacity 0.5s ease;
}
#desk-loader.is-intro .dl-gate {
  opacity: 0; pointer-events: none;
}
/* Mentre il gate è attivo, nascondi gli elementi della scena
   (canvas, HUD, caption, loading text, replay button). */
#desk-loader.is-gate #scene-canvas,
#desk-loader.is-gate .dl-hud,
#desk-loader.is-gate .dl-caption,
#desk-loader.is-gate .dl-replay-btn,
#desk-loader.is-gate .dl-loading {
  opacity: 0; pointer-events: none;
}

#desk-loader .dl-gate-inner {
  max-width: 560px;
  text-align: center;
  position: relative;
  z-index: 1;
}
#desk-loader .dl-gate-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 24px;
}
#desk-loader .dl-gate-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 800;
  font-size: clamp(32px, 5.5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 20px;
}
#desk-loader .dl-gate-sub {
  font-family: 'Kanit', sans-serif;
  font-size: 15px;
  color: rgba(255,255,255,0.6);
  margin: 0 0 36px;
}
#desk-loader .dl-gate-actions {
  display: flex; flex-direction: column; gap: 12px;
  align-items: stretch;
  max-width: 360px;
  margin: 0 auto;
}
#desk-loader .dl-gate-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 18px 28px;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  border: 1px solid transparent;
  user-select: none;
}
#desk-loader .dl-gate-btn--primary {
  background: #fff; color: #0C0C0C; border-color: #fff;
}
#desk-loader .dl-gate-btn--primary:hover {
  background: #B600A8; color: #fff; border-color: #B600A8;
}
#desk-loader .dl-gate-btn--primary:hover .dl-gate-arrow {
  transform: translateX(4px);
}
#desk-loader .dl-gate-btn--ghost {
  background: transparent; color: rgba(255,255,255,0.7);
  border-color: rgba(255,255,255,0.18);
}
#desk-loader .dl-gate-btn--ghost:hover {
  color: #fff; border-color: rgba(255,255,255,0.45);
}
#desk-loader .dl-gate-btn:focus-visible {
  outline: 2px solid #B600A8; outline-offset: 3px;
}
#desk-loader .dl-gate-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}
#desk-loader .dl-gate-hint {
  margin-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
@media (min-width: 640px) {
  #desk-loader .dl-gate-actions { flex-direction: row; justify-content: center; max-width: none; }
  #desk-loader .dl-gate-btn { min-width: 240px; }
}

/* ─── Card di ingresso stile Netflix ─── */
/* Variabile angolo animabile per il bordo che corre lungo la cornice */
@property --as-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
/* Linea luminosa che gira lungo il bordo della card "Intro 3D" */
#desk-loader .dl-card--intro::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 16px;
  padding: 2px;                 /* spessore della linea */
  background: conic-gradient(
    from var(--as-angle),
    transparent 0%,
    rgba(182,0,168,0.6) 6%,
    #B600A8 10%,
    #ffffff 13%,
    #B600A8 16%,
    rgba(182,0,168,0.6) 20%,
    transparent 26%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  animation: dlCardBorderSpin 3s linear infinite;
  filter: drop-shadow(0 0 6px rgba(182,0,168,0.5));
}
@keyframes dlCardBorderSpin {
  to { --as-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  #desk-loader .dl-card--intro::after { animation: none; }
}
#desk-loader .dl-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  max-width: 300px;
  margin: 8px auto 0;
}
#desk-loader .dl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 24px 24px;
  border-radius: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.12);
  cursor: pointer;
  text-align: center;
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  user-select: none;
}
#desk-loader .dl-card:hover,
#desk-loader .dl-card:focus-visible {
  transform: scale(1.06);
  border-color: #B600A8;
  background: rgba(182,0,168,0.08);
  box-shadow: 0 12px 40px rgba(182,0,168,0.28);
  outline: none;
}
#desk-loader .dl-card-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: #fff;
  margin-bottom: 4px;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
#desk-loader .dl-card-icon svg { width: 22px; height: 22px; }
#desk-loader .dl-card:hover .dl-card-icon {
  background: #B600A8; color: #fff; transform: scale(1.1);
}
#desk-loader .dl-card-title {
  font-family: 'Kanit', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #fff;
  letter-spacing: 0.01em;
}
#desk-loader .dl-card-desc {
  font-family: 'Kanit', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.55);
}
#desk-loader .dl-card-badge {
  margin-top: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 100px;
  padding: 4px 12px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
#desk-loader .dl-card:hover .dl-card-badge {
  color: #B600A8; border-color: rgba(182,0,168,0.5);
}
@media (min-width: 640px) {
  #desk-loader .dl-cards {
    flex-direction: row;
    justify-content: center;
    max-width: none;
  }
  #desk-loader .dl-card { width: 220px; }
}


/* ═══════════════════════════════════════════════
   CASE STUDY DEEP-DIVE — Overlay fullscreen
   ═══════════════════════════════════════════════ */
.case-world {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #030303;
  perspective: 1500px;
  -webkit-perspective: 1500px;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.case-world.is-open {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.6s ease, visibility 0s linear 0s;
}

.case-noise {
  position: absolute; inset: 0; z-index: 100;
  opacity: 0.05; pointer-events: none; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* Layer che contiene il contenuto. Parte rimpicciolito e in profondità,
   poi viene in avanti quando si apre il case. */
.case-layer {
  position: absolute;
  inset: 0;
  background: #030303;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  /* Scrollbar dedicata al case study (Firefox) */
  scrollbar-width: thin;
  scrollbar-color: #B600A8 rgba(255, 255, 255, 0.06);
  transform: translateZ(-800px) scale(0.9);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1), opacity 0.8s ease;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
}
/* Scrollbar dedicata al case study (Chrome, Safari, Edge) */
.case-layer::-webkit-scrollbar { width: 10px; }
.case-layer::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); }
.case-layer::-webkit-scrollbar-thumb {
  background: #B600A8;
  border-radius: 10px;
  border: 2px solid #030303;
}
.case-layer::-webkit-scrollbar-thumb:hover { background: #d41fc4; }

.case-world.is-open .case-layer {
  transform: translateZ(0) scale(1);
  opacity: 1;
}

/* Body durante l'apertura: scroll lock e leggera spinta in avanti */
body.case-open {
  overflow: hidden !important;
}
body.case-open .main-wrap {
  transform: translateZ(800px) scale(1.5);
  opacity: 0;
  pointer-events: none;
  transition: transform 1s cubic-bezier(0.85, 0, 0.15, 1), opacity 0.6s ease;
  transform-origin: center center;
  will-change: transform, opacity;
}

/* Senza la classe case-open il main-wrap è normale */
.main-wrap {
  transition: transform 0.8s cubic-bezier(0.85, 0, 0.15, 1), opacity 0.6s ease;
}

/* ── HEADER CASE STUDY ── */
.cs-header {
  padding: clamp(60px, 8vw, 120px) 5vw 40px 5vw;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  position: relative;
}

.case-close-btn {
  position: absolute;
  top: 30px;
  right: 5vw;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: none;
  color: #fff;
  cursor: pointer;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.18em;
}
.case-close-btn .cs-circle {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.case-close-btn:hover .cs-circle {
  background: #B600A8;
  border-color: #B600A8;
  transform: rotate(90deg);
}

.cs-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(60px, 10vw, 180px);
  font-weight: 900;
  line-height: 0.85;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 36px;
}

.cs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4);
}
.cs-meta span { color: #B600A8; }

/* ── BODY SPLIT EDITORIAL ── */
.cs-body {
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .cs-body { flex-direction: row; }
}

.cs-sidebar {
  padding: 60px 5vw;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  background: #050505;
}
@media (min-width: 1024px) {
  .cs-sidebar {
    width: 35%;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.cs-index-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.cs-index-item {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  gap: 18px;
  transition: color 0.3s ease;
}
.cs-index-item::before {
  content: '';
  width: 0;
  height: 2px;
  background: #B600A8;
  transition: width 0.4s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.cs-index-item.is-active {
  color: #fff;
  font-weight: 500;
}
.cs-index-item.is-active::before {
  width: 40px;
}
/* Hover: segnala che le voci dell'indice sono cliccabili (navigazione alle sezioni) */
.cs-index-item:hover {
  color: rgba(255, 255, 255, 0.75);
}
.cs-index-item:hover::before {
  width: 24px;
}
/* Su mobile/tablet (<1024px) l'indice navigabile delle 4 sezioni viene nascosto:
   la navigazione tra le fasi resta solo su desktop, dove la sidebar è sticky.
   Titolo e dati (cliente/anno/ruolo) restano visibili. */
@media (max-width: 1023px) {
  .cs-index-list { display: none; }
  /* Riduce lo spazio vuoto tra i dati e l'inizio della prima sezione */
  .cs-sidebar { padding-bottom: 24px; }
  .cs-content { padding-top: 16px; }
}

.cs-content {
  padding: 60px 5vw 120px 5vw;
  flex: 1;
}
@media (min-width: 1024px) {
  .cs-content {
    width: 65%;
    padding: 120px 8vw 200px 8vw;
  }
}

.cs-section-block {
  margin-bottom: 120px;
}
.cs-section-block:last-of-type {
  margin-bottom: 60px;
}

.cs-sb-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  color: #B600A8;
  font-size: 13px;
  letter-spacing: 0.22em;
  margin-bottom: 20px;
  display: block;
  text-transform: uppercase;
}

.cs-sb-title {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(32px, 4vw, 56px);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 36px;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.cs-sb-text {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 300;
  line-height: 1.65;
  color: rgba(215, 226, 234, 0.7);
  margin-bottom: 36px;
  max-width: 700px;
}

.cs-image-wrap {
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  margin-top: 50px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #111;
}
.cs-image-placeholder {
  width: 100%;
  aspect-ratio: 16/9;
  background: radial-gradient(circle at center, rgba(182, 0, 168, 0.2), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.25);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
/* Immagine reale nel case study (es. confronto prima/dopo) */
.cs-image {
  width: 100%;
  height: auto;
  display: block;
}

.cs-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 40px;
}
.cs-stat-box .cs-s-num {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(40px, 6vw, 80px);
  font-weight: 900;
  color: #B600A8;
  line-height: 1;
  letter-spacing: -0.02em;
}
.cs-stat-box .cs-s-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-top: 10px;
}

.cs-back-cta {
  margin-top: 120px;
  padding-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}
.cs-back-cta h3 {
  font-family: 'Kanit', sans-serif;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 32px;
  letter-spacing: -0.02em;
}
.cs-back-btn {
  border: 1px solid #B600A8;
  background: rgba(182, 0, 168, 0.1);
  color: #B600A8;
  padding: 16px 40px;
  border-radius: 100px;
  text-transform: uppercase;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.cs-back-btn:hover {
  background: #B600A8;
  color: #fff;
  box-shadow: 0 0 30px rgba(182, 0, 168, 0.4);
}

/* Link al sito live di FAMA — blocco elegante con etichetta, URL e freccia */
.cs-live-link {
  margin-top: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 36px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(182, 0, 168, 0.06) 0%, rgba(12, 12, 12, 0) 60%);
  text-decoration: none;
  transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s ease;
}
.cs-live-link:hover {
  border-color: rgba(182, 0, 168, 0.5);
  background: linear-gradient(135deg, rgba(182, 0, 168, 0.14) 0%, rgba(12, 12, 12, 0) 70%);
  transform: translateY(-2px);
}
.cs-live-side {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-live-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #B600A8;
}
.cs-live-url {
  font-family: 'Kanit', sans-serif;
  font-weight: 500;
  font-size: clamp(20px, 2.4vw, 30px);
  color: #fff;
  letter-spacing: -0.01em;
}
.cs-live-arrow {
  font-size: clamp(28px, 3vw, 40px);
  color: #B600A8;
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.2, 1);
  flex-shrink: 0;
}
.cs-live-link:hover .cs-live-arrow {
  transform: translate(6px, -6px);
}


/* ═══════════════════════════════════════════════
   HYPER-DIVE BUTTON — Case Study trigger
   Un bottone unico nel sito, deve saltare all'occhio:
   gradiente conico rotante magenta/viola + dot pulsante.
   ═══════════════════════════════════════════════ */
.hyper-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 18px 48px;
  border-radius: 100px;
  background: #0C0C0C;
  color: #fff;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  cursor: pointer;
  overflow: hidden;
  border: none;
  z-index: 10;
  transform: translateZ(0) scale(1);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  isolation: isolate; /* Crea uno stacking context locale per ::before / ::after */
}

/* Raggio rotante (gradiente conico) */
.hyper-btn::before {
  content: '';
  position: absolute;
  width: 300%;
  height: 300%;
  background: conic-gradient(transparent 0deg, transparent 270deg, #B600A8 300deg, #7621B0 360deg);
  animation: hyper-spin 4s linear infinite;
  top: -100%;
  left: -100%;
  z-index: -2;
}

/* Maschera interna (cuore nero) */
.hyper-btn::after {
  content: '';
  position: absolute;
  inset: 2px;
  background: #0A0A0C;
  border-radius: 98px;
  z-index: -1;
  transition: background 0.4s ease;
}

@keyframes hyper-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Contenuti interni */
.hyper-btn .hb-content {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
  position: relative;
}
.hyper-btn .hb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #B600A8;
  box-shadow: 0 0 12px #B600A8;
  animation: hyper-dot-pulse 2s ease-in-out infinite;
}
@keyframes hyper-dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.8); }
}
.hyper-btn .hb-text {
  position: relative;
  top: 1px;
}
.hyper-btn .hb-arrow {
  font-size: 16px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
}

/* HOVER: il portale si accende */
.hyper-btn:hover {
  transform: translateZ(0) scale(0.95);
  box-shadow: 0 0 40px rgba(182, 0, 168, 0.4);
}
.hyper-btn:hover::before {
  animation-duration: 0.8s;
  background: conic-gradient(transparent 0deg, transparent 200deg, #B600A8 280deg, #BE4C00 360deg);
}
.hyper-btn:hover::after {
  background: #140516;
}
.hyper-btn:hover .hb-arrow {
  transform: translate(4px, 2px);
}

.hyper-btn:focus-visible {
  outline: 2px solid #B600A8;
  outline-offset: 4px;
}

/* ═══════════════════════════════════════════════
   LAPTOP 3D CANVAS (Three.js fixed fullscreen)
   ═══════════════════════════════════════════════ */
#laptopCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* z-index: sopra le sezioni del sito, sotto loader/header/case-study/menu */
  z-index: 40;
  pointer-events: none;
  will-change: opacity;
  opacity: 0;
  /* opacity gestita via JS per fade-in lento + fade-out istantaneo */
}
#laptopCanvas.is-visible {
  opacity: 1;
}

/* ═══════════════════════════════════════════════
   CARD 3 SOLARIS → MORPH IN SCHERMO PC
   Durante lo scroll, la card si rimpicciolisce e si trasforma in
   uno schermo PC nero (sfondo nero, bezel argentato, contenuto svanito).
   --morph-progress: 0 = card normale, 1 = schermo PC completo
   ═══════════════════════════════════════════════ */
.project-card.is-becoming-screen {
  background: #000000 !important;
  border-color: #c8cbcf;
  border-width: calc(2px + 6px * var(--morph-progress, 0));
  border-radius: calc(40px - 16px * var(--morph-progress, 0));
  overflow: hidden;
}
.project-card.is-becoming-screen > * {
  opacity: calc(max(0, 1 - var(--morph-progress, 0) * 3.5));
  pointer-events: none;
}
.project-card.is-becoming-screen .project-image,
.project-card.is-becoming-screen .pi-bg,
.project-card.is-becoming-screen .pi-orb,
.project-card.is-becoming-screen .pi-grid,
.project-card.is-becoming-screen .pi-tag,
.project-card.is-becoming-screen .pi-drop {
  opacity: calc(max(0, 1 - var(--morph-progress, 0) * 3.5)) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TAILWIND COMPAT FALLBACK
   ──────────────────────────────────────────────────────────────────
   Il tailwind.css compilato di questa build è stato purgato in modo
   aggressivo e mancano classi essenziali usate su #services e #projects.
   Sintomo: Services appare con sfondo nero (eredita body), layout
   rotto. Queste regole rigenerano manualmente le classi mancanti.
   Se domani rigeneri tailwind.css con il content scan corretto,
   questo blocco diventa ridondante ma non dannoso.
   ═══════════════════════════════════════════════════════════════════ */

/* Colori base */
.bg-white                  { background-color: #fff; }
.bg-\[\#0C0C0C\]           { background-color: #0C0C0C; }

/* Border-radius top (arbitrary values) */
.rounded-t-\[40px\] {
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
}
@media (min-width: 640px) {
  .sm\:rounded-t-\[50px\] {
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
  }
}
@media (min-width: 768px) {
  .md\:rounded-t-\[60px\] {
    border-top-left-radius: 60px;
    border-top-right-radius: 60px;
  }
}

/* Padding orizzontale */
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
@media (min-width: 640px) {
  .sm\:px-8 { padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 768px) {
  .md\:px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
}

/* Padding verticale (services) */
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width: 640px) {
  .sm\:py-24 { padding-top: 6rem; padding-bottom: 6rem; }
}
@media (min-width: 768px) {
  .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem; }
}

/* Padding verticale (projects) */
.pt-20 { padding-top: 5rem; }
@media (min-width: 640px) {
  .sm\:pt-28 { padding-top: 7rem; }
}
@media (min-width: 768px) {
  .md\:pt-36 { padding-top: 9rem; }
}
.pb-32 { padding-bottom: 8rem; }

/* Margin top negativo (projects overlap su services) */
.-mt-10 { margin-top: -2.5rem; }
@media (min-width: 640px) {
  .sm\:-mt-12 { margin-top: -3rem; }
}
@media (min-width: 768px) {
  .md\:-mt-14 { margin-top: -3.5rem; }
}

/* z-index */
.z-0   { z-index: 0; }
.z-10  { z-index: 10; }


/* ═══════════════════════════════════════════════════════════════════
   QUANTUM STRING SCROLLBAR (custom)
   ──────────────────────────────────────────────────────────────────
   - Desktop ≥769px: nasconde scrollbar nativa, mostra canvas con
     "stringa quantistica" che vibra in base alla velocità di scroll
     + label percentuale che scrambla a velocità alta
   - Mobile ≤768px:  scrollbar nativa già invisibile, niente overlay
   - Reduced motion: il JS si auto-disabilita
   ═══════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) {
  /* Nascondi scrollbar nativa (su tutti i browser) */
  html {
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE/Edge legacy */
  }
  html::-webkit-scrollbar {
    display: none;                /* Chrome, Safari, Opera */
  }

  #scrollbar-canvas {
    position: fixed;
    top: 0;
    right: 0;
    width: 80px;
    height: 100vh;
    z-index: 9999;
    pointer-events: auto;         /* trascinabile per scorrere la pagina */
    cursor: grab;
  }
  #scrollbar-canvas:active {
    cursor: grabbing;
  }

  #scroll-label {
    position: fixed;
    right: 40px;
    top: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: #B600A8;
    letter-spacing: 2px;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 9999;
    will-change: top;
    text-shadow: 0 0 10px rgba(182, 0, 168, 0.6);
  }
}

@media (max-width: 768px) {
  #scrollbar-canvas, #scroll-label { display: none; }
}

/* Quando il case study è aperto, nasconde la scrollbar custom del sito principale
   (canvas + label percentuale): nel case study c'è già la sua scrollbar dedicata.
   Uso la classe body.case-open (aggiunta dal JS in openCase) per massima affidabilità. */
body.case-open #scrollbar-canvas,
body.case-open #scroll-label {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   LIQUID GLASS CURSOR
   Funziona DESKTOP only, fuori dalla hero (dove c'è il custom avatar).
   Body riceve classe .cursor-glass quando attivo → nasconde OS cursor.
   ═══════════════════════════════════════════════════════════════════ */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .droplet { display: none !important; }
}
body.cursor-glass,
body.cursor-glass * { cursor: none !important; }

.droplet {
  position: fixed;
  top: 0; left: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10001;
  transform: translate3d(-9999px, -9999px, 0) translate(-50%, -50%);
  will-change: transform, opacity;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.droplet-main {
  width: 32px; height: 32px;
  backdrop-filter: url(#liquid-glass);
  -webkit-backdrop-filter: url(#liquid-glass);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 2px rgba(255, 255, 255, 0.15),
    0 6px 24px rgba(0, 0, 0, 0.18),
    0 2px 8px rgba(0, 0, 0, 0.12);
}
.droplet-trail {
  width: 22px; height: 22px;
  backdrop-filter: url(#liquid-glass-sm);
  -webkit-backdrop-filter: url(#liquid-glass-sm);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.4),
    inset 0 0.5px 1px rgba(255, 255, 255, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.12);
}
.droplet-main::before {
  content: '';
  position: absolute;
  top: 10%;  left: 18%;
  width: 38%; height: 26%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 40% 40%,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.55) 35%,
    transparent 75%
  );
  filter: blur(2px);
  pointer-events: none;
}
.droplet-main::after {
  content: '';
  position: absolute;
  bottom: 8%; left: 28%;
  width: 44%; height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255, 255, 255, 0.4) 0%, transparent 75%);
  filter: blur(1.5px);
  pointer-events: none;
}
.droplet-main.is-clicking { width: 24px; height: 24px; }

/* Quando cursor-glass attivo, il main è visibile.
   La trail opacity rimane controllata da JS (inline style). */
body.cursor-glass .droplet-main { opacity: 1; }
body.cursor-glass .droplet-trail { opacity: 1; } /* JS la lerpa */
/* ═════════════════════════════════════════════════════════════════
   INTRO BRAND — il logo si posa sopra le card (magic move, gestito in JS)
   ═════════════════════════════════════════════════════════════════ */
.brand-intro {
  position: fixed; inset: 0; z-index: 10001;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  overflow: hidden;
}
.brand-intro-logo {
  width: clamp(110px, 15vw, 170px);
  height: auto;
  opacity: 0; /* nascosto finché il JS non lo posiziona (evita il flash iniziale) */
  will-change: transform, opacity, filter;
}