/* ============================================================
   Yaada Labs overlay — additive only (chat + language switch).
   Non tocca il design/animazioni del sito v0/Next.js.
   ============================================================ */
:root{
  --yl-accent:#eca8d6;
  --yl-accent2:#c597eb;
  --yl-accent3:#79cdf9;
  --yl-bg:#0d0a0c;
  --yl-panel:rgba(20,16,20,.92);
  --yl-border:rgba(255,255,255,.12);
  --yl-text:#f5f0f3;
  --yl-muted:rgba(245,240,243,.55);
}

/* ---------- Language switch (inline, nel nav bar) ---------- */
#yl-lang{
  display:inline-flex; align-items:center; gap:2px; vertical-align:middle;
  background:rgba(255,255,255,.06);
  border:1px solid var(--yl-border); border-radius:999px;
  padding:3px; font-family:ui-monospace,"JetBrains Mono",monospace;
  z-index:60; flex:none;
}
#yl-lang.yl-lang-mobile{ margin-left:auto; margin-right:6px; }
/* fallback: se il nav non è pronto, resta flottante in alto a destra */
#yl-lang.yl-float{
  position:fixed; top:22px; right:210px; z-index:2147483000;
  background:var(--yl-panel); backdrop-filter:blur(12px);
  box-shadow:0 8px 30px rgba(0,0,0,.45);
}
#yl-lang button{
  border:0; cursor:pointer; background:transparent; color:var(--yl-muted);
  font:inherit; font-size:11px; letter-spacing:.04em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px; transition:all .18s; line-height:1;
}
#yl-lang button.active{ background:var(--yl-accent); color:#1a0f18; font-weight:700; }
#yl-lang button:not(.active):hover{ color:var(--yl-text); }

/* ---------- Chat launcher (bottom-right) ---------- */
#yl-fab{
  position:fixed; right:20px; bottom:20px; z-index:2147483000;
  display:flex; align-items:center; gap:10px; cursor:pointer;
  background:linear-gradient(135deg,var(--yl-accent),var(--yl-accent2));
  color:#180f16; border:0; border-radius:999px; padding:12px 18px 12px 14px;
  font-family:ui-sans-serif,system-ui,sans-serif; font-size:14px; font-weight:600;
  box-shadow:0 10px 34px rgba(236,168,214,.45); transition:transform .18s, box-shadow .18s;
}
#yl-fab:hover{ transform:translateY(-2px); box-shadow:0 14px 40px rgba(236,168,214,.6); }
#yl-fab .yl-dot{ width:9px; height:9px; border-radius:50%; background:#1c8f4a;
  box-shadow:0 0 0 0 rgba(28,143,74,.7); animation:yl-pulse 2s infinite; }
#yl-fab svg{ width:20px; height:20px; }
@keyframes yl-pulse{ 0%{box-shadow:0 0 0 0 rgba(28,143,74,.6)} 70%{box-shadow:0 0 0 8px rgba(28,143,74,0)} 100%{box-shadow:0 0 0 0 rgba(28,143,74,0)} }
#yl-fab.hidden{ display:none; }

/* ---------- Chat panel ---------- */
#yl-chat{
  position:fixed; right:20px; bottom:20px; z-index:2147483001;
  width:380px; max-width:calc(100vw - 40px); height:560px; max-height:calc(100vh - 40px);
  display:none; flex-direction:column; overflow:hidden;
  background:var(--yl-panel); backdrop-filter:blur(18px);
  border:1px solid var(--yl-border); border-radius:20px;
  box-shadow:0 24px 70px rgba(0,0,0,.6);
  font-family:ui-sans-serif,system-ui,sans-serif; color:var(--yl-text);
  animation:yl-in .25s ease;
}
#yl-chat.open{ display:flex; }
@keyframes yl-in{ from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none} }

.yl-head{ display:flex; align-items:center; gap:12px; padding:16px 16px 14px;
  border-bottom:1px solid var(--yl-border);
  background:linear-gradient(180deg,rgba(236,168,214,.10),transparent); }
.yl-ava{ width:40px; height:40px; border-radius:12px; flex:none;
  background:linear-gradient(135deg,var(--yl-accent),var(--yl-accent3));
  display:flex; align-items:center; justify-content:center; color:#180f16; font-weight:800; font-size:18px; }
.yl-head .yl-t{ font-weight:700; font-size:15px; line-height:1.1; }
.yl-head .yl-s{ font-size:11px; color:var(--yl-muted); display:flex; align-items:center; gap:6px; margin-top:3px;
  font-family:ui-monospace,monospace; }
.yl-head .yl-s .yl-on{ width:7px; height:7px; border-radius:50%; background:#1c8f4a; }
.yl-x{ margin-left:auto; background:transparent; border:0; color:var(--yl-muted); cursor:pointer;
  font-size:22px; line-height:1; padding:4px 8px; border-radius:8px; }
.yl-x:hover{ color:var(--yl-text); background:rgba(255,255,255,.06); }

.yl-body{ flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:12px;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
.yl-body::-webkit-scrollbar{ width:6px; } .yl-body::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); border-radius:3px; }

.yl-msg{ max-width:82%; padding:11px 14px; border-radius:16px; font-size:14px; line-height:1.5; white-space:pre-wrap; word-wrap:break-word; }
.yl-msg.bot{ align-self:flex-start; background:rgba(255,255,255,.06); border:1px solid var(--yl-border); border-bottom-left-radius:5px; }
.yl-msg.me{ align-self:flex-end; background:linear-gradient(135deg,var(--yl-accent),var(--yl-accent2)); color:#180f16; border-bottom-right-radius:5px; font-weight:500; }
.yl-msg a{ color:var(--yl-accent); font-weight:600; }
.yl-msg.me a{ color:#180f16; text-decoration:underline; }

.yl-typing{ align-self:flex-start; display:flex; gap:4px; padding:13px 15px; background:rgba(255,255,255,.06);
  border:1px solid var(--yl-border); border-radius:16px; border-bottom-left-radius:5px; }
.yl-typing span{ width:7px; height:7px; border-radius:50%; background:var(--yl-muted); animation:yl-bounce 1.2s infinite; }
.yl-typing span:nth-child(2){ animation-delay:.15s } .yl-typing span:nth-child(3){ animation-delay:.3s }
@keyframes yl-bounce{ 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }

.yl-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 16px 12px; }
.yl-chip{ background:rgba(236,168,214,.10); border:1px solid rgba(236,168,214,.35); color:var(--yl-accent);
  border-radius:999px; padding:7px 13px; font-size:12.5px; cursor:pointer; transition:all .18s; font-family:inherit; }
.yl-chip:hover{ background:var(--yl-accent); color:#180f16; }

.yl-foot{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--yl-border); background:rgba(0,0,0,.2); }
.yl-foot input{ flex:1; background:rgba(255,255,255,.06); border:1px solid var(--yl-border); border-radius:12px;
  color:var(--yl-text); font:inherit; font-size:14px; padding:11px 14px; outline:none; }
.yl-foot input:focus{ border-color:var(--yl-accent); }
.yl-foot input::placeholder{ color:var(--yl-muted); }
.yl-send{ flex:none; width:44px; border:0; border-radius:12px; cursor:pointer;
  background:linear-gradient(135deg,var(--yl-accent),var(--yl-accent2)); color:#180f16;
  display:flex; align-items:center; justify-content:center; transition:transform .15s; }
.yl-send:hover{ transform:scale(1.06); } .yl-send svg{ width:19px; height:19px; }

/* ---------- Mobile ---------- */
@media (max-width:560px){
  #yl-chat{ right:0; bottom:0; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; border-radius:0; }
  #yl-fab{ right:14px; bottom:14px; padding:11px 16px 11px 13px; }
  #yl-fab .yl-label{ display:none; }
  #yl-fab{ border-radius:50%; padding:14px; }
}

/* ============================================================
   HERO AI CHAT CARD — ripreso dal concept Yaada (localhost:5173)
   Chat animata scenografica incastonata nella hero.
   ============================================================ */
#yl-herochat{ --acid:#b9f227; --cink:#080b0a; position:absolute; right:4.5vw; transform:translateY(-50%); z-index:5; perspective:1200px; width:min(430px,38vw); font-family:ui-sans-serif,system-ui,sans-serif; }
#yl-herochat .chat-aura{ position:absolute; inset:8%; border-radius:50%; background:radial-gradient(circle, rgba(185,242,39,.28), transparent 66%); filter:blur(60px); z-index:0; }
#yl-herochat .chat-card{ position:relative; z-index:1; min-height:498px; overflow:hidden; border-radius:28px; border:1px solid rgba(255,255,255,.14); background:linear-gradient(155deg, rgba(30,36,31,.97), rgba(9,12,10,.97)); box-shadow:0 45px 100px rgba(0,0,0,.55), inset 0 1px rgba(255,255,255,.08); }
#yl-herochat .chat-head{ height:72px; border-bottom:1px solid rgba(255,255,255,.09); padding:0 18px; display:flex; align-items:center; gap:12px; }
#yl-herochat .assistant-avatar{ width:40px; height:40px; display:grid; place-items:center; border-radius:13px; background:rgba(185,242,39,.1); border:1px solid rgba(185,242,39,.22); flex:none; }
#yl-herochat .assistant-avatar svg{ width:26px; }
#yl-herochat .chat-head strong{ display:block; font-size:13px; color:#f5f0f3; }
#yl-herochat .chat-head .yl-sub{ display:block; font-size:10px; color:#7c857e; margin-top:4px; }
#yl-herochat .chat-head .yl-sub i{ display:inline-block; width:5px; height:5px; background:var(--acid); border-radius:50%; margin-right:4px; }
#yl-herochat .chat-pulse{ margin-left:auto; display:flex; align-items:center; gap:6px; border:1px solid rgba(185,242,39,.2); color:var(--acid); background:rgba(185,242,39,.06); padding:6px 9px; border-radius:999px; font-size:9px; font-weight:700; letter-spacing:.1em; flex:none; }
#yl-herochat .chat-pulse svg{ width:13px; height:13px; }
#yl-herochat .chat-body{ padding:24px 18px; display:flex; flex-direction:column; gap:11px; min-height:338px; }
#yl-herochat .message{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; line-height:1.45; max-width:88%; color:#e9e6df; animation:yl-msgin .35s ease; }
#yl-herochat .message.user{ align-self:flex-end; padding:12px 15px; background:var(--acid); color:var(--cink); border-radius:16px 16px 4px 16px; font-weight:600; }
#yl-herochat .message.assistant{ padding:13px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.09); border-radius:4px 16px 16px 16px; }
#yl-herochat .message.thinking{ color:#798079; align-items:center; }
#yl-herochat .message.tool{ color:#a8b0a9; padding:10px 12px; border:1px dashed rgba(185,242,39,.22); background:rgba(185,242,39,.04); border-radius:10px; }
#yl-herochat .message.tool svg{ width:14px; height:14px; color:var(--acid); flex:0 0 auto; }
#yl-herochat .message .mini svg{ width:15px; height:15px; }
#yl-herochat .thinking-dots{ display:flex; gap:3px; }
#yl-herochat .thinking-dots i{ width:5px; height:5px; border-radius:50%; background:var(--acid); animation:yl-cdot 1s infinite alternate; }
#yl-herochat .thinking-dots i:nth-child(2){ animation-delay:.2s } #yl-herochat .thinking-dots i:nth-child(3){ animation-delay:.4s }
#yl-herochat .chat-input{ margin:0 16px 16px; height:50px; border:1px solid rgba(255,255,255,.11); background:rgba(0,0,0,.22); border-radius:15px; display:flex; align-items:center; justify-content:space-between; padding-left:16px; color:#5f675f; font-size:11px; }
#yl-herochat .chat-input button{ width:37px; height:37px; margin-right:6px; border:0; border-radius:11px; background:var(--acid); color:var(--cink); display:grid; place-items:center; cursor:default; }
#yl-herochat .chat-input button svg{ width:17px; height:17px; }
#yl-herochat .floating-chip{ position:absolute; z-index:3; display:flex; align-items:center; gap:7px; padding:10px 12px; border-radius:999px; background:rgba(247,246,239,.96); color:var(--cink); font-size:10px; font-weight:700; box-shadow:0 15px 35px rgba(0,0,0,.35); animation:yl-cfloat 3s ease-in-out infinite; white-space:nowrap; }
#yl-herochat .floating-chip svg{ width:14px; height:14px; }
/* chip flottanti: fuori dai bordi, in zone VUOTE (sinistra del msg utente in alto,
   destra di un msg assistente in basso) -> non coprono più header né input. */
#yl-herochat .chip-one{ top:90px; left:-13%; } #yl-herochat .chip-two{ bottom:98px; right:-11%; animation-delay:1.2s; }
@keyframes yl-cdot{ from{opacity:.3; transform:translateY(0)} to{opacity:1; transform:translateY(-3px)} }
@keyframes yl-cfloat{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes yl-msgin{ from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
/* posizionamento: desktop = incastonato a destra nella hero; mobile = in-flow, larghezza piena */
@media (max-width:1023px){
  /* card AUTONOMA sotto la hero: blocco a sé, niente overlap col contenuto della hero */
  #yl-herochat.yl-mobile{
    position:relative !important; transform:none !important; right:auto !important; left:auto !important;
    top:auto !important; width:min(430px,92vw) !important; margin:0 auto 2.5rem !important;
    perspective:none; z-index:6; display:block !important;
  }
  #yl-herochat.yl-mobile .chat-aura{ display:none; }
  #yl-herochat.yl-mobile .chat-card{ min-height:auto; }
  #yl-herochat.yl-mobile .chat-body{ min-height:0; }
  /* i chip flottanti su mobile stanno stretti -> li teniamo dentro i bordi */
  #yl-herochat.yl-mobile .chip-one{ left:2%; top:82px; }
  #yl-herochat.yl-mobile .chip-two{ right:2%; bottom:86px; }
}

/* ============================================================
   MOBILE (<1024px): albero hero visibile + meno spazi sprecati
   ============================================================ */
@media (max-width:1023px){
  /* Hero MOBILE: teniamo il VIDEO (come su PC, in movimento). Il centro del video è
     nero e l'albero sta a DESTRA -> con object-center si vedeva "un pezzetto".
     Spostiamo l'inquadratura a destra così si vede l'albero. */
  section.min-h-screen video{ object-position:78% center !important; }
  /* scritte hero più in BASSO (sopra il prato, non sui rami luminosi):
     la hero allinea il contenuto verso il fondo invece che al centro. */
  section.min-h-screen{ min-height:92vh !important; justify-content:flex-end !important; padding-bottom:10vh !important; }

  /* titolo hero: va a capo invece di tagliarsi a destra (la parola rotante EN sforava) */
  h1 .whitespace-nowrap{ white-space:normal !important; }

  /* meno spazio: margini grandi ridotti su mobile */
  .mb-20{ margin-bottom:2rem !important; }   /* 80 -> 32 */
  .mb-16{ margin-bottom:1.75rem !important; }
  .mb-12{ margin-bottom:1.5rem !important; }
  .mt-12{ margin-top:1.5rem !important; }
  .gap-16{ gap:1.5rem !important; }
  .gap-8{ gap:1.25rem !important; }

  /* "SCALE" (Upscaled 13): era una fetta verticale 163px in un box absolute.
     La trasformiamo in una FASCIA GRANDE a tutta larghezza in fondo alla sezione. */
  div:has(> img[src*="OQ2DiR3ElVsUg8kTvTL1kC5A3Q6maM"]){
    position:relative !important; inset:auto !important; width:100% !important;
    height:auto !important; margin-top:1.5rem !important;
  }
  img[src*="OQ2DiR3ElVsUg8kTvTL1kC5A3Q6maM"]{
    position:relative !important; width:100% !important; height:220px !important;
    object-fit:cover !important; object-position:center !important;
  }

  /* SEZIONE "SDK / #developers" — era illeggibile su mobile.
     Causa: la colonna dei contenuti ha `max-w-[50%]` SENZA breakpoint (v0 la pensava
     solo per desktop) -> a 390px diventa larga 171px e la griglia `grid-cols-2`
     dentro di lei scende a 74px per cella: i titoli si spezzano lettera per lettera
     e si sovrappongono ("Full-Stack Architectu|re" sopra "Multi-Lingual Su|pport").
     Fix: colonna a larghezza piena + griglia a 1 colonna (2 da 600px in su),
     con le voci rese CARD come nel resto del sito. */
  #developers .max-w-\[50\%\]{ max-width:100% !important; }
  #developers .grid-cols-2{ grid-template-columns:1fr !important; gap:.75rem !important; }
  #developers .grid-cols-2 > div{
    border:1px solid rgba(255,255,255,.09); border-radius:14px;
    padding:14px 16px; background:rgba(255,255,255,.025);
  }
  #developers .grid-cols-2 > div h3{ margin-bottom:.3rem !important; }

  /* PRATO nel FOOTER (Upscaled 10): più GRANDE, riempie fino a sopra il titolo.
     (cover al posto di contain + contenitore più alto). */
  img[src*="UnDKstODkIENp5xqTYUEpt0Sm8tNOw"]{
    object-fit:cover !important; object-position:center !important;
  }
  footer .h-\[340px\]{ height:52vh !important; }
}

/* Da 600px in su la sezione SDK torna a 2 colonne (ma a larghezza piena). */
@media (min-width:600px) and (max-width:1023px){
  #developers .grid-cols-2{ grid-template-columns:1fr 1fr !important; gap:1rem !important; }
}

/* ---------- Layout "più grande": allarga il contenuto su desktop ----------
   (v0 limita a 1400px -> margini enormi su monitor larghi). Solo >=1024px,
   mobile/tablet restano come li ha progettati v0. */
@media (min-width:1024px){
  .max-w-\[1400px\]{ max-width:min(1760px, 93vw) !important; }
}
@media (min-width:1800px){
  .max-w-\[1400px\]{ max-width:1760px !important; }
}

/* ---------- Meno spazio verticale sprecato tra le sezioni ----------
   v0 usa padding enormi (py-32 lg:py-40 = 160px sopra+sotto; py-24 lg:py-32 = 128px)
   -> tra due sezioni si sommano fino a ~320px di nero. Li riduco ~a metà (additivo). */
.py-24{ padding-top:3rem !important; padding-bottom:3rem !important; }      /* 96 -> 48 */
.py-32{ padding-top:3.75rem !important; padding-bottom:3.75rem !important; } /* 128 -> 60 */
@media (min-width:1024px){
  .lg\:py-32{ padding-top:4rem !important; padding-bottom:4rem !important; }   /* 128 -> 64 */
  .lg\:py-40{ padding-top:5rem !important; padding-bottom:5rem !important; }   /* 160 -> 80 */
}

/* ---------- Fix intestazioni grandi tagliate (es. "Strategize.") ----------
   Le intestazioni di sezione usano lg:text-[128px] FISSO, ma stanno in una colonna
   a 2 blocchi che si stringe sotto i ~1440px -> in inglese "Strategize."/"everything."
   sforano e vengono tagliate dall'overflow-hidden. Le rendo responsive: 128px sui
   monitor larghi, e si riducono quel tanto che basta perché la parola più lunga entri. */
@media (min-width:1024px){
  .lg\:text-\[128px\]{ font-size: clamp(44px, 8.5vw, 128px) !important; }
}

/* ============================================================
   v25 — MOBILE: titoli respirabili + reveal-on-scroll disattivate
                 + niente pulsante "play" sul video hero (iOS)
   ============================================================ */

/* ---------- 1. TITOLI: line-height troppo strette ----------
   Le intestazioni usano leading-[0.85 … 0.95]. Su desktop, con font enormi e
   righe corte, funziona. Su mobile il font scende a 60px ma le righe restano
   compresse: le discendenti ("p" di "speed.", "g" di "engineered") finiscono
   sulla riga sotto e i titoli sembrano sovrapposti. Un filo d'aria in più. */
@media (max-width:1023px){
  .leading-\[0\.85\]{ line-height:1.00 !important; }
  .leading-\[0\.9\] { line-height:1.04 !important; }
  .leading-\[0\.92\]{ line-height:1.06 !important; }
  .leading-\[0\.95\]{ line-height:1.08 !important; }
}

/* ---------- 2. REVEAL-ON-SCROLL: spente su mobile ----------
   Ogni sezione di v0 parte `opacity-0 translate-y-8` e viene rivelata da un
   IntersectionObserver (one-shot) con `transition-all duration-700/1000` +
   `delay-100/200/300/500`. Su iOS Safari le callback dell'IntersectionObserver
   vengono RINVIATE durante lo scroll inerziale e consegnate in blocco a scroll
   fermo -> il testo compare/sfuma proprio mentre lo stai leggendo, o resta
   invisibile se scorri veloce. (Riprodotto anche in Chrome scrollando in fretta:
   dopo una scrollata rapida di tutta la pagina, 8 blocchi restavano a opacity 0.)
   Su mobile quindi il contenuto è VISIBILE SUBITO, zero transizione: non c'è più
   niente che possa "riattivarsi". Desktop invariato, animazioni intatte. */
@media (max-width:1023px){
  /* ⚠️ `:not([class*="translate-x-1/2"])` NON è opzionale: le classi `translate-*`
     di Tailwind servono sia per ANIMARE sia per il LAYOUT. Il blocco full-bleed
     dell'immagine "Integrations" è `left-1/2 -translate-x-1/2 w-screen`: il -50%
     è ciò che lo RI-CENTRA. Azzerandolo (bug v25) l'immagine finiva mezzo schermo
     a destra, addosso al paragrafo. Le frazioni (1/2, 1/3, full) sono layout,
     i numeri interi (translate-y-8, translate-x-12…) sono le reveal. */
  /* ⚠️ `:not(.fixed)` NON è opzionale e NON basta l'eccezione più in basso: qui i
     `:not()` alzano la specificità (0,4,0) e batterebbero `.fixed.inset-0[…]`
     (0,3,0), lasciando il menu mobile CHIUSO a opacity 1 = un pannello nero su
     tutta la pagina. Escludendo `.fixed` alla radice il problema non si pone
     (i figli restano invisibili perché il padre è a opacity 0). Nel sito gli
     unici `.fixed` sono la navbar e questo overlay: nessuno dei due va rivelato. */
  [class*="transition-"][class*="opacity-0"]:not(.fixed):not([class*="group-hover"]):not([class*="translate-x-1/2"]),
  [class*="transition-"][class*="translate-y-"]:not(.fixed):not([class*="group-hover"]):not([class*="translate-y-1/2"]),
  [class*="transition-"][class*="translate-x-"]:not(.fixed):not([class*="group-hover"]):not([class*="translate-x-1/2"]){
    opacity:1 !important;
    translate:none !important;   /* Tailwind v4 usa la proprietà `translate`, non `transform` */
    transform:none !important; scale:none !important; filter:none !important;
    transition-property:none !important;
    transition-duration:0s !important; transition-delay:0s !important;
  }
  /* ECCEZIONE: il menu mobile a tutto schermo deve restare NASCOSTO da chiuso.
     Quando lo apri React gli toglie `opacity-0` -> questa regola non matcha più. */
  .fixed.inset-0[class*="opacity-0"],
  .fixed.inset-0[class*="opacity-0"] *{ opacity:0 !important; }
}

/* ---------- 3. VIDEO HERO: via il pulsante "play" di iOS ----------
   Su iPhone, se l'autoplay viene bloccato (Risparmio energetico, impostazione
   "Riproduzione automatica" del sito, poca batteria), Safari disegna il suo
   pulsante di avvio sopra al video: è quello che ha visto l'amico. Lo togliamo:
   se l'autoplay non parte si vede comunque il poster (l'albero), pulito.
   yaada.js poi ritenta il play al primo tocco/scroll. */
video::-webkit-media-controls-start-playback-button{
  display:none !important; -webkit-appearance:none !important;
}
video::-webkit-media-controls, video::-webkit-media-controls-panel{ display:none !important; }
video::-internal-media-controls-overlay-cast-button{ display:none !important; }

/* ---------- 4. "Integrations": immagine addosso al paragrafo (mobile) ----------
   Il blocco full-bleed dell'immagine ha `-mt-16` (margin-top -64px): su desktop
   l'occhiello è corto e il bordo alto dell'immagine è nero, quindi la
   sovrapposizione è voluta e non si nota. Su mobile il paragrafo va a 3 righe e
   l'immagine, rimpicciolita, ha il muschio proprio in alto -> finiva SOPRA il
   testo ("systems and CRMs." illeggibile). Su mobile il margine negativo va via. */
@media (max-width:1023px){
  #integrations [class*="-mt-16"]{ margin-top:1.25rem !important; }

  /* Il blocco full-bleed è escluso dalla regola §2 (per non perdere il -50% che
     lo centra), quindi gli va dato a mano lo stesso trattamento: visibile subito,
     zero transizione — MA conservando il translate di layout. */
  [class*="transition-"][class*="translate-x-1\/2"]{
    opacity:1 !important;
    translate:-50% 0 !important;
    transition-property:none !important;
    transition-duration:0s !important; transition-delay:0s !important;
  }
}

/* ---------- 5. TESTIMONIAL: niente più "scatto" ogni 8 secondi ----------
   Il carosello rimonta la <blockquote> ogni 8s. Su mobile le 4 citazioni non hanno
   la stessa lunghezza (5 righe vs 4 = 180px vs 144px), quindi a ogni giro il blocco
   cambia altezza e autore / riquadro "10x" / barre SALTANO di 36px.
   `yaada.js` (§4d) misura la citazione più lunga della lingua corrente e la scrive
   in `--yl-quote-h`; qui la riserviamo. Va su <html> e non inline perché React
   ricrea l'elemento a ogni slide (uno style inline verrebbe perso).
   Fallback `0px` = comportamento originale se il JS non gira. */
@media (max-width:1023px){
  blockquote{ min-height: var(--yl-quote-h, 0px); }
}