/* MicroBeTech: la home. Fondamenta in style.css, movimento in motion.css; la sezione del report sta in fondo a questo file
   (era home-report.css: unito il 3 novembre 2026, un foglio in meno da aspettare). Ogni blocco dichiara il suo tema
   (data-theme) e usa solo i token di superficie. */

/* La pagina non rimbalza oltre i bordi (richiesta di Mirko): tirando in su dall'hero si vedeva una fascia nera sopra il video.
   Dove il browser non lo rispetta, oltre i bordi si vede comunque il nero verde dell'hero e del footer. */
html.home { background: var(--night); overscroll-behavior-y: none; }
/* Senza JavaScript la barra non diventa mai bianca: sulle sezioni chiare le voci bianche non si leggerebbero. */
@media (scripting: none) { .nav { position: absolute; } }

/* I disegni al tratto dei componenti (react/src/components/step-scenes.jsx) prendono i colori dalla superficie su cui stanno. */
:root, [data-theme="light"], [data-theme="mist"] { --sc-base: var(--ink); --sc-lit: var(--g-700); --sc-on: var(--paper); }
[data-theme="dark"] { --sc-base: var(--snow); --sc-lit: var(--g-200); --sc-on: var(--night); }

/* ---------- Asse ---------- */

/* Dal 15 ottobre 2026 (skill design-taste-frontend, direzione «The printed annual», la stessa delle pagine interne) le teste
   di sezione si appoggiano a un asse al 42% della colonna: a sinistra la nota a margine (il nome della sezione, in tondo e
   senza numeri), sull'asse il titolo e la frase di accompagnamento. Sul telefono l'asse va al margine e la nota scende sotto il titolo. */
.side { font-family: var(--font); font-size: var(--t-lead); font-weight: 500; line-height: 1.3; letter-spacing: -0.005em; color: var(--brand); }
/* Dal 2 novembre 2026 (Mattia e Daniele: «troppo piccola e tralasciata») la nota ha la misura del testo introduttivo e
   davanti il quadratino verde delle etichette (.label--dot). */
.side::before { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-right: 0.55em; vertical-align: 0.1em; background: currentColor; }
.hhead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; }
.hhead > .side { grid-column: 1 / span 4; grid-row: 1; align-self: baseline; }
.hhead > h2, .hhead > .hhead__lead { grid-column: 6 / -1; max-width: 16em; text-wrap: balance; }
.hhead > h2 { align-self: baseline; }
.hhead__lead { max-width: 34em !important; margin-top: clamp(16px, 1.6vw, 24px); font-size: var(--t-lead); line-height: 1.45; color: var(--fg-2); text-wrap: pretty !important; }
@media (max-width: 900px) {
  .hhead { display: flex; flex-direction: column; align-items: flex-start; }
  .hhead > .side { order: 2; margin-top: 12px; padding-top: 0; }
  .hhead > .hhead__lead { order: 3; }
}

/* ---------- Hero ---------- */

/* L'hero è alto quanto la finestra: video, titolo, testo, due pulsanti e il lettore in basso. Il blocco del titolo è ancorato in alto,
   come nell'hero di mirage.app: il titolo comincia al 20% dell'altezza della finestra, poi 36 px fino al testo e altri 36 fino ai
   pulsanti. La metà bassa resta al video. */
.hero { position: relative; }
/* Il blocco del titolo sta a metà tra la barra e la fascia di lettere in fondo: --strip-b e --strip-h sono lo stacco dal fondo
   e l'altezza della fascia, usati anche dal componente React (Strands, in react/src/main.jsx). Lo spazio si conta su ciò che
   si vede: dal fondo dei controlli della barra alla cima delle maiuscole del titolo (per questo il margine negativo dell'h1),
   dal fondo dei pulsanti alla prima riga di lettere (che sta circa 8 px dentro la fascia). */
.hero__pin { --strip-b: clamp(20px, 4vh, 36px); --strip-h: clamp(52px, 8vh, 72px); position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh + 1px); min-height: calc(100svh + 1px); padding: calc(var(--nav-h) - var(--nav-pad-end) + 24px) var(--edge) calc(var(--strip-b) + var(--strip-h) + 16px); overflow: hidden; background: var(--night) url("../media/hero-poster.jpg") center / cover no-repeat; }
@supports (height: 1svh) { .hero__pin { --strip-b: clamp(20px, 4svh, 36px); --strip-h: clamp(52px, 8svh, 72px); } }
@media (max-height: 539px) { .hero__pin { --strip-b: 0px; --strip-h: 0px; } }
.hero__video { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); }
/* Senza script i video non partono e il browser mostrerebbe i suoi comandi. */
@media (scripting: none) { .hero__video, .how__scene video { display: none; } }
/* Il lettore in fondo all'hero (reader.js), largo quanto il contenuto e senza fondo: sta direttamente sul video. Da sinistra: la riga
   di lettere che scorre e sfuma ai due lati (i gruppi riconosciuti si accendono passando la testina, al 72% della riga) e il marcatore
   con il nome riconosciuto. Scorrendo svanisce (--p), prima che la fascia dei riquadri le salga sopra. Dove l'hero è basso non c'è posto. */
.reader { position: absolute; left: var(--edge); right: var(--edge); bottom: var(--strip-b); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; height: var(--strip-h); font-size: 0.9375rem; pointer-events: none; }
.reader__track { font-family: var(--code); position: relative; align-self: stretch; display: flex; align-items: center; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 30%, #000 86%, transparent); }
.reader__track::after { content: ""; position: absolute; left: 72%; top: 12px; bottom: 12px; width: 2px; background: var(--g-200); }
.reader__run { letter-spacing: 0.08em; display: flex; column-gap: 1.6em; white-space: nowrap; color: color-mix(in srgb, var(--snow) 56%, transparent); will-change: transform; }
.reader__run span { flex: none; transition: color 0.5s var(--ease); }
.reader__run .is-hit { color: var(--g-200); }
/* Larghezza fissa, quanto il nome più lungo: se cambiasse con il nome, la riga delle lettere cambierebbe misura a ogni lettura. */
.reader__out { display: flex; align-items: baseline; gap: 10px; width: 33ch; white-space: nowrap; color: var(--snow); }
.reader__marker { font-weight: 500; color: var(--g-200); }
.reader__arrow { color: var(--snow-2); }
.reader__out.is-new .reader__name { animation: reader-in 0.5s var(--ease); }
@keyframes reader-in { from { opacity: 0; transform: translateX(-6px); } }
@media (max-height: 539px) { .reader { display: none; } }
/* Telefono: sopra le lettere a tutta larghezza, sotto il nome riconosciuto. */
@media (max-width: 760px) {
  .reader { grid-template-columns: minmax(0, 1fr); grid-template-rows: 36px 32px; gap: 0; height: auto; font-size: 0.875rem; }
  .reader__track::after { top: 6px; bottom: 6px; }
  .reader__out { width: auto; }
}

.hero__text { position: relative; max-width: 66rem; }
.hero h1 { max-width: 10.5em; margin-top: -0.157em; }
.hero h1 .hero__key { color: var(--brand); }
/* Quando il componente Tech Text disegna «DNA» sopra il titolo (react/src/main.jsx, KeyWord), la parola vera resta
   al suo posto ma non si vede. */
.hero.has-tech h1 .hero__key { color: transparent; }
.hero__lead { margin-top: clamp(24px, 4.2vh, 36px); max-width: 30em; font-size: var(--t-lead); line-height: 1.4; color: var(--snow); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 4.2vh, 36px); }

/* ---------- Perché ---------- */

/* La nota a margine a sinistra; sull'asse una frase sola, grande, che si accende parola per parola (data-m="read", motion.js). */
/* Sotto, 13 px in meno: tanti quanti ne aggiunge al collegamento della fonte la sua area di tocco. */
.say { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start; padding: var(--space-l) var(--edge) calc(var(--space-l) - 13px); }
.say > .side { grid-column: 1 / span 4; padding-top: 0.5em; }
.say__text, .say__src { grid-column: 6 / -1; }
.say__text { max-width: 22em; font-size: clamp(1.625rem, 1.1rem + 1.6vw, 2.5rem); line-height: 1.18; letter-spacing: -0.02em; text-wrap: pretty; color: var(--fg); }
.say__text .manifest__num { color: var(--brand); }
.say__text .fn { margin-left: 0.12em; font-size: max(12px, 0.36em); font-weight: 500; line-height: 0; letter-spacing: 0; vertical-align: 1.2em; color: var(--brand); }
.say__text .fn a { padding: 16px 20px; margin: -16px -20px; color: inherit; text-decoration: none; }
.say__text .fn a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* La fonte della cifra: una riga piccola e grigia sotto la frase, come una nota a piè di pagina, con il collegamento
   allo studio. */
.say__src { margin-top: clamp(16px, 2vw, 28px); font-size: var(--t-small); line-height: 1.4; color: var(--fg-2); }
.say__src sup { font-size: 0.75rem; line-height: 0; }
.say__src a { display: inline-block; padding-block: 13px; color: inherit; text-decoration: none; }
.say__src a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }

/* Il confronto: due metà a tutta larghezza, chiara a sinistra (l'analisi chimica) e scura a destra (quella del microbioma).
   In testa a ogni metà una fotografia (.cmp__scene): le provette di un'analisi chimica, le colonie di una piastra.
   Il componente React mette un segno davanti a ogni voce. */
.cmp { display: grid; grid-template-columns: minmax(0, 1fr); }
.cmp__half { display: flex; flex-direction: column; }
.cmp__scene { position: relative; flex: none; height: clamp(140px, 18vw, 280px); overflow: hidden; background: var(--bg-2); }
.cmp__scene picture { display: contents; }
.cmp__scene img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cmp__body { flex: 1; padding: clamp(36px, 4.6vw, 72px) var(--page-edge) clamp(48px, 6vw, 96px); }
.cmp__body h3 { max-width: 12em; font-size: var(--t-h3-l); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.cmp__body ul { list-style: none; margin: clamp(24px, 3vw, 44px) 0 0; padding: 0; }
.cmp__body li { display: flex; align-items: baseline; gap: 14px; padding-block: 12px; font-size: var(--t-lead); line-height: 1.35; color: var(--fg-2); text-wrap: pretty; }
.cmp__body li:last-child { padding-bottom: 0; }
.cmp__half--b li { color: var(--fg); }
.cmp__mark { flex: none; align-self: center; display: flex; color: var(--fg-3); }
.cmp__half--b .cmp__mark { color: var(--brand); }
.cmp__mark svg { width: 1em; height: 1em; }
@media (min-width: 901px) {
  .cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cmp__half--a .cmp__body { padding-right: clamp(32px, 5vw, 88px); }
  .cmp__half--b .cmp__body { padding-left: clamp(32px, 5vw, 88px); }
  /* Le due metà condividono le righe (fascia, titolo, tre voci): ogni riga è alta quanto la più alta delle due,
     così titoli e voci stanno alla stessa altezza a sinistra e a destra. */
  .cmp__half, .cmp__body, .cmp__body ul { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; }
  .cmp__half { grid-row: span 5; }
  .cmp__body { grid-row: span 4; }
  .cmp__body ul { grid-row: span 3; }
  .cmp__body li { align-items: center; }
}

/* ---------- Come funziona ---------- */

.how { padding-block: var(--space-l); }
.how__head { padding-inline: var(--edge); }

/* Con JavaScript: quattro colonne senza scheda e senza filetti (react/src/main.jsx, Steps). In ognuna una scena
   disegnata al tratto, il nome del passaggio e il testo. Il passaggio acceso si riconosce dal nome verde e dalla scena a colori. */
.steps { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); margin: clamp(40px, 5vw, 72px) var(--edge) 0; padding: 0; }
.steps__item { position: relative; display: grid; grid-template-columns: clamp(104px, 30vw, 132px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 18px; row-gap: 6px; min-width: 0; padding-block: 24px; outline-offset: 4px; }
.steps__item:first-child { padding-top: 0; }
.steps__item:last-child { padding-bottom: 0; }
.steps__item.is-on .steps__text h3 { color: var(--brand); }
.steps__scene { position: relative; grid-area: 1 / 1 / 2 / 2; align-self: start; aspect-ratio: 1; transition: opacity 0.6s var(--ease), filter 0.6s var(--ease); }
.steps.is-live .steps__item:not(.is-on) .steps__scene { opacity: 0.55; filter: grayscale(1); }
.steps__text { grid-column: 2; min-width: 0; }
.steps__text h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); line-height: 1.14; letter-spacing: -0.015em; transition: color 0.4s var(--ease); }
.steps__text p { margin-top: 10px; color: var(--fg-2); text-wrap: pretty; }
.steps__text a { color: var(--fg); text-underline-offset: 3px; }
@media (min-width: 901px) {
  .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps__item { display: block; padding: 0 clamp(16px, 2vw, 32px); }
  .steps__item:first-child { padding-left: 0; }
  .steps__item:last-child { padding-right: 0; }
  /* Le colonne ai due estremi sono più strette (hanno il margine da un lato solo): l'altezza è fissa, così i nomi restano allineati. */
  .steps__scene { height: clamp(140px, 13.5vw, 200px); aspect-ratio: auto; margin-block: clamp(16px, 2vw, 28px) clamp(20px, 2.2vw, 32px); }
}

/* Senza JavaScript: i quattro passaggi con il loro fotogramma, uno sotto l'altro (da 981 px testo a sinistra e immagine a destra). */
.how__grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; margin: clamp(40px, 5vw, 72px) var(--edge) 0; }
.how__scene { position: relative; margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: var(--night) var(--pos, center) / cover no-repeat; }
.how__scene video { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.how__step { align-self: center; margin-bottom: clamp(32px, 6vw, 56px); }
.how__step:last-child { margin-bottom: 0; }
.how__step h3 { font-size: var(--t-h3-l); line-height: 1.1; letter-spacing: -0.02em; }
.how__step p { max-width: 38ch; margin-top: 12px; font-size: var(--t-lead); line-height: 1.4; color: var(--fg-2); }
.how__step a { color: var(--fg); text-underline-offset: 3px; }
@media (min-width: 981px) {
  .how__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(48px, 6vw, 96px); align-items: center; }
  .how__scene { grid-column: 7 / -1; grid-row: var(--n); }
  .how__step { grid-column: 1 / span 5; grid-row: var(--n); margin: 0; }
}

/* ---------- Tecnologia ---------- */

/* Precede il report sullo stesso fondo scuro e lo specchia: qui l'immagine sta a sinistra (la pila di tre lastre, Card Swap)
   e il testo a destra, centrato in verticale. */
.tech__band { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(32px, 5vw, 56px); padding: var(--space-l) var(--edge); }
/* Il report segue le tecnologie sullo stesso fondo: tra i due basta lo spazio in fondo al primo. */
.tech + .rep { padding-top: 0; }
.tech__copy h2 { max-width: 12em; text-wrap: balance; }
.tech__lead { max-width: 30em; margin-top: clamp(16px, 1.6vw, 24px); font-size: var(--t-lead); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }
.tech__more { margin-top: clamp(28px, 3vw, 44px); }
/* Senza JavaScript: le tre tecnologie in un elenco a righe. */
.tech__list { list-style: none; display: grid; gap: 32px; margin: 0; padding: 0; }
.tech__list li { display: grid; gap: 6px; }
.tech__list img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; margin-bottom: 8px; }
.tech__list h3 { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.625rem); line-height: 1.14; letter-spacing: -0.015em; }
.tech__list p { color: var(--fg-2); }
@media (min-width: 1101px) {
  .tech__band { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
  .tech__copy { grid-column: 6 / -1; grid-row: 1; }
  .tech__band > .tech__list, .tech__band > .isl > * { grid-column: 1 / span 5; grid-row: 1; }
}

/* ---------- Chi siamo ---------- */

/* Stesso fondo bianco della ricerca, senza filetto in mezzo: le stacca lo spazio. Una sezione breve, sul modello di «The Arsenale Collective»:
   a destra titolo, un paragrafo e il collegamento alla pagina Team; a sinistra i sei ritratti senza nomi né ruoli, accostati
   in un mosaico 3 × 2 che si legge come una foto di gruppo (Focus Cards). È lo specchio della ricerca, che ha il testo a sinistra. Nomi e ruoli stanno nella pagina Team. */
.about { padding: var(--space-l) var(--edge); }
.about__in { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(32px, 5vw, 56px); }
.about__head h2 { max-width: 9em; }
.about__lead { max-width: 34em; margin-top: clamp(16px, 1.6vw, 24px); font-size: var(--t-lead); line-height: 1.45; color: var(--fg-2); }
.about__cta { margin-top: clamp(28px, 3vw, 44px); }
.about__team { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; }
.about__team img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: grayscale(1); }
/* Sotto, una riga sottile con i due riconoscimenti: i loghi in nero e una frase ciascuno, allineati alle due colonne di sopra. */
.about__awards { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 16px; margin: 0; padding: 0; }
.about__awards li { display: flex; align-items: center; gap: 18px; }
.about__plate { --m1: var(--ink); --m2: color-mix(in srgb, var(--ink) 76%, var(--bg)); --m3: color-mix(in srgb, var(--ink) 54%, var(--bg)); --m4: color-mix(in srgb, var(--ink) 37%, var(--bg)); --m5: color-mix(in srgb, var(--ink) 20%, var(--bg)); flex: none; display: flex; align-items: center; justify-content: flex-start; width: 131px; height: 48px; }
.about__plate svg { width: auto; height: auto; max-width: 100%; max-height: 100%; }
.about__awards p { max-width: 44ch; font-size: var(--t-body); line-height: 1.4; color: var(--fg-2); text-wrap: pretty; }
.about__year { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--fg); }
/* Il primo riconoscimento ha i loghi delle due Start Cup in un solo disegno: quello di Catania resta grande come quando era da solo.
   Sullo schermo medio tutte le targhette sono larghe come questa, così le due frasi partono alla stessa altezza;
   da telefono i loghi stanno sopra la frase, che così ha tutta la larghezza. */
.about__plate.about__plate--pair { width: 131px; max-width: none; }
.about__plate.about__plate--pair svg { width: 100%; height: auto; }
@media (max-width: 640px) {
  .about__awards { row-gap: 24px; }
  .about__awards li { flex-direction: column; align-items: flex-start; gap: 10px; }
  .about__plate { width: 76px; }
}
@media (min-width: 901px) {
  .about__in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
  .about__awards { grid-column: 1 / -1; grid-row: 2; grid-template-columns: subgrid; }
  .about__awards li:first-child { grid-column: 1 / span 5; }
  .about__awards li:last-child { grid-column: 6 / -1; }
  /* Affiancati, ogni riconoscimento sta su una riga: il logo occupa solo la sua larghezza e la frase tutta la colonna. */
  .about__plate { width: auto; max-width: 76px; }
  .about__plate svg { height: 100%; }
  .about__awards p { max-width: none; }
  .about__head { grid-column: 6 / -1; grid-row: 1; }
  .about__in > .about__team, .about__in > .isl > * { grid-column: 1 / span 5; grid-row: 1; }
}

/* ---------- Servizi ---------- */

/* Nota a margine, titolo e frase sull'asse; sotto, tre schede: il nome del servizio, per chi è, che cosa fa e il collegamento.
   MicroBeValue chiude la sezione in una fascia verde piena. */
.svc { padding: var(--space-l) var(--edge); }
/* Tre schede scure senza filetti. In testa a ognuna una fotografia a tutta larghezza con il bordo netto (mani con la terra,
   laboratorio, piantine in vassoio), sotto i testi sul fondo pieno della scheda: nessuna sfumatura sopra la foto. Ogni scheda
   è una griglia di cinque righe; da desktop le righe sono in comune tra le tre (subgrid) e titoli e pulsanti restano allineati. */
.svc__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(40px, 5vw, 72px); }
.svc__cell { --pad: clamp(20px, 2.2vw, 32px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(5, auto); justify-items: start; min-width: 0; padding: var(--pad); overflow: hidden; }
.svc__ph { justify-self: stretch; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) var(--pad); aspect-ratio: 6 / 5; overflow: hidden; background: var(--bg-2); }
.svc__ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 0.9s var(--ease); }
@media (hover: hover) and (pointer: fine) { .svc__cell:hover .svc__ph img { scale: 1.04; } }
.svc__claim { margin-top: 8px; font-weight: 500; color: var(--brand); }
.svc__cell h3 { font-size: clamp(1.375rem, 1rem + 0.8vw, 1.75rem); line-height: 1.1; letter-spacing: -0.02em; }
.svc__text { max-width: 36ch; margin-block: 14px clamp(20px, 2.2vw, 28px); color: var(--fg-2); text-wrap: pretty; }
@media (min-width: 901px) {
  .svc__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); row-gap: 0; }
  .svc__cell { grid-row: 1 / -1; grid-template-rows: subgrid; }
}
.svc__value { display: flex; align-items: center; justify-content: space-between; gap: 20px clamp(24px, 4vw, 64px); margin-top: clamp(32px, 4vw, 56px); padding: clamp(24px, 2.8vw, 44px); background: var(--g-700); color: var(--snow); --head: var(--snow); --focus: var(--snow); }
.svc__value h3 { font-size: clamp(1.5rem, 1.15rem + 0.9vw, 2rem); line-height: 1.1; letter-spacing: -0.02em; }
.svc__value p { max-width: 62ch; margin-top: 10px; text-wrap: pretty; }
.svc__value .btn { flex: none; }

/* ---------- Ultimi articoli ---------- */

/* Testa sull'asse, come le altre sezioni; il pulsante sotto la prima scheda; testi delle schede alla misura del corpo. Sul telefono le quattro schede stanno in
   colonna, con la foto piccola a sinistra: niente fila che scorre di lato. */
.arts--home .arts__head { display: grid; justify-items: stretch; text-align: left; }
.arts--home .arts__all { justify-content: flex-start; }
.arts--home .acard__x { font-size: var(--t-body); }
@media (max-width: 900px) {
  .arts--home .arts__head { display: flex; }
}
@media (max-width: 640px) {
  .arts--home .arts__list { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-inline: 0; padding-inline: 0; overflow: visible; }
  .arts--home .acard { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 16px; align-items: start; }
  .arts--home .acard > * { grid-column: 2; }
  .arts--home .acard__ph { grid-column: 1; grid-row: 1 / span 3; aspect-ratio: 1; }
  .arts--home .acard__meta { margin-top: 0; }
  .arts--home .acard__x { display: none; }
}

/* ---------- Domande frequenti ---------- */

/* Stesso fondo dei servizi: basta lo spazio in fondo a quelli. Titolo e invito a scrivere a sinistra, domande sull'asse,
   staccate solo dallo spazio. */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: var(--gap); row-gap: clamp(28px, 4vw, 48px); align-items: start; padding: 0 var(--edge) var(--space-l); }
.faq h2 { grid-column: 1 / span 5; text-wrap: balance; }
.faq__list { grid-area: 1 / 6 / 3 / -1; margin-top: -14px; }
.faq__aside { grid-column: 1 / span 5; }
.faq__aside p { max-width: 26em; font-size: var(--t-lead); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }
.faq__aside .btn { margin-top: clamp(20px, 2.2vw, 32px); }
.faq summary { position: relative; display: flex; align-items: center; min-height: 64px; padding: 14px 44px 14px 0; font-size: var(--t-lead); line-height: 1.3; letter-spacing: -0.01em; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
/* Il segno più: due tratti, quello verticale ruota e sparisce quando la risposta è aperta. */
.faq summary::before, .faq summary::after { content: ""; position: absolute; top: 50%; right: 4px; width: 16px; height: 1.5px; margin-top: -0.75px; background: currentColor; transition: rotate 0.3s var(--ease), opacity 0.3s var(--ease); }
.faq summary::after { rotate: 90deg; }
.faq details[open] summary::after { rotate: 0deg; opacity: 0; }
.faq summary:hover { color: var(--brand); }
.faq details p { max-width: 58ch; padding: 0 44px 22px 0; color: var(--fg-2); text-wrap: pretty; }


/* ---------- Footer ---------- */

/* Foto che sfuma dalla pagina (scura), card dei contatti al centro, link agli angoli e il nome grande tagliato dal bordo. */
.footer--photo { padding-block: var(--space-l) clamp(28px, 3vw, 44px); overflow: hidden; background: var(--night); --head: currentColor; }
.footer__bg { position: absolute; inset: -6% 0; z-index: -2; }
.footer__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; }
.footer__fade { position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, transparent 36%, color-mix(in srgb, var(--night) 66%, transparent) 62%, color-mix(in srgb, var(--night) 94%, transparent) 100%); }
/* In cima la fotografia sfuma dal fondo chiaro della sezione che la precede. Il blocco dichiara il tema chiaro,
   così la barra resta chiara finché ci passa sopra (site.js legge il data-theme). */
.footer__rise { position: absolute; inset: 0 0 auto; z-index: -1; height: clamp(180px, 22vw, 340px); background: linear-gradient(180deg, var(--mist), color-mix(in srgb, var(--mist) 78%, transparent) 30%, color-mix(in srgb, var(--mist) 34%, transparent) 64%, transparent); }
.footer__card { width: min(560px, 100%); padding: 26px 30px 28px; scroll-margin-top: 24px; --focus: var(--ink); }
.footer__card h2 { font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.875rem); text-align: center; }
.footer__card > p { margin: 6px auto 18px; max-width: 44ch; font-size: var(--t-small); color: var(--ink-2); text-align: center; }
/* «Oppure contattaci telefonicamente» sotto l'invito (3 novembre 2026): stretto all'invito, sopra il modulo. Il collegamento
   chiama il numero di Daniele, che sulla pagina non si legge; il margine verticale porta il bersaglio a 44 px. */
.footer__card > p:has(+ .contact__call) { margin-bottom: 4px; }
.contact__call a { padding-block: 14px; white-space: nowrap; }
.footer__card .form__send { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.footer__card .form__send .btn { flex: none; margin-top: 0; }
/* Il modulo dei contatti è più compatto di quelli delle altre pagine: campi da 44 px e meno spazio tra le righe. */
.footer__card .form { gap: 12px; }
.footer__card .field { gap: 4px; }
.footer__card .field input, .footer__card .field select { min-height: 44px; padding-block: 9px; }
.footer__card .field textarea { min-height: 64px; padding-block: 9px; }

/* ---------- Schermi più piccoli ---------- */

/* Con il testo molto ingrandito le parole lunghe (fitofarmaceutiche) vanno a capo invece di allargare la cella o la riga. */
.why, .tech, .how, .svc, .footer__card { overflow-wrap: anywhere; }

@media (max-width: 1180px) {
}
@media (max-width: 900px) {
  .faq h2, .faq__list, .faq__aside { grid-column: 1 / -1; grid-row: auto; }
  .faq__aside { order: 3; }
  .say { display: block; }
  .say > .side { margin-bottom: 12px; padding-top: 0; }
  .faq__list { margin-top: 0; }
  .svc__value { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  /* 16 px ai lati: a 390 px di larghezza i campi restano larghi 300 px, il minimo del riquadro anti-spam di Cloudflare. */
  .footer__card { padding: 26px 16px 24px; }
  .footer__card .form__send { flex-direction: column; align-items: stretch; }
}


/* La sezione «Il report».
   A sinistra titolo, testo e pulsanti; a destra il report di esempio dentro un portatile e un telefono
   disegnati in CSS. Le schermate sono fotografie dell'area di esempio (area.html), in italiano e in inglese:
   assets/js/home-report.js le scambia con la lingua. */

.rep { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(40px, 5vw, 64px); align-items: center; padding: var(--space-l) var(--edge); overflow: hidden; }
.rep__intro { grid-column: 1 / span 6; }
.rep__intro h2 { text-wrap: balance; }
.rep__lead { max-width: 30em; margin-top: clamp(16px, 1.6vw, 24px); font-size: var(--t-lead); line-height: 1.45; color: var(--fg-2); text-wrap: pretty; }
.rep__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(28px, 3vw, 44px); }

/* Il telefono sta davanti al portatile, in basso a destra; i margini tengono base e telefono dentro la colonna. */
.rep__devices { --bezel: color-mix(in srgb, var(--paper) 16%, var(--night)); --edge-hi: color-mix(in srgb, var(--paper) 30%, var(--night)); grid-column: 7 / -1; position: relative; margin: 0; padding: 0 9% 3% 6.2%; }
.rep__devices img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.rep__screen { aspect-ratio: 16 / 10; padding: 1.6%; border: 1px solid var(--edge-hi); border-bottom: 0; border-radius: clamp(10px, 1.3vw, 18px) clamp(10px, 1.3vw, 18px) 0 0; background: var(--bezel); }
.rep__screen img { border-radius: clamp(4px, 0.5vw, 7px); }
.rep__base { position: relative; height: clamp(8px, 1vw, 14px); margin-inline: -7%; border-radius: 0 0 clamp(8px, 1vw, 14px) clamp(8px, 1vw, 14px); background: linear-gradient(to bottom, var(--edge-hi), var(--bezel)); }
.rep__base::before { content: ""; position: absolute; top: 0; left: 50%; width: 14%; height: 38%; translate: -50% 0; border-radius: 0 0 6px 6px; background: var(--night); }
.rep__phone { position: absolute; right: 0; bottom: 0; width: 21%; aspect-ratio: 540 / 1170; padding: 1.1%; border: 1px solid var(--edge-hi); border-radius: clamp(12px, 1.7vw, 24px); background: var(--bezel); }
/* Sopra la schermata resta una fascia vuota, come sotto la barra di stato: l'angolo arrotondato non copre il testo. */
.rep__phone img { box-sizing: border-box; padding-top: 7%; background: var(--paper); border-radius: clamp(8px, 1.2vw, 17px); }
.rep__devices .tag { margin-bottom: 12px; }

@media (max-width: 1100px) {
  .rep__intro, .rep__devices { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .rep__devices { padding-inline: 6.2% 8%; }
  .rep__phone { width: 24%; }
}