/* Sito di presentazione.
   Colori, caratteri, spazio e durate stanno in app/css/tokens.css, che e' la
   sorgente della design language: qui c'e' solo quello che riguarda il sito e
   non il prodotto. Se serve un colore, si aggiunge la' e si usa qui. */

:root {
  --max: 1000px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ghisa); color: var(--magnesite);
  font-family: var(--sans); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 22px; }

/* --------------------------------------------------------------- testata */

/* Fondo pieno, non vetro sfocato: con il blur sopra la fotografia impeccable
   misurava il marchio a 1.1:1. Una barra che sta ferma in cima non ha bisogno
   di far vedere cosa ci passa sotto. */
.top { position: sticky; top: 0; z-index: 30;
       background: var(--ghisa); border-bottom: 1px solid var(--linea); }
.top__in { display: flex; align-items: center; justify-content: space-between;
           gap: 16px; padding: 14px 22px; }
.brand { display: inline-flex; align-items: center; gap: 9px;
         font: var(--t-etichetta); letter-spacing: var(--tracking-etichetta);
         text-transform: uppercase; color: var(--magnesite); text-decoration: none; }
.brand .marchio { width: 22px; height: 22px; flex: 0 0 auto; display: block; }
.brand b { font-weight: inherit; }

.langs { display: flex; gap: 4px; }
.langs button {
  background: none; border: 1px solid var(--linea); color: var(--fumo);
  font: var(--t-etichetta); letter-spacing: 0.1em;
  padding: 5px 10px; border-radius: var(--r-tondo); cursor: pointer;
}
.langs button[aria-pressed="true"] {
  background: var(--ruggine-piena); border-color: var(--ruggine-piena); color: #fff;
}

/* ------------------------------------------------------------------ hero */

/* Il testo sta su fondo pieno e la fotografia occupa la sua meta': impeccable
   misurava 1.1:1 sul sottotitolo, perche' sopra un'immagine il contrasto
   dipende da quali pixel capitano sotto quali lettere, e nessuna sfumatura lo
   rende affidabile. Cosi' invece e' una proprieta' del layout, non una
   speranza. */
.hero { position: relative; overflow: hidden; }
.hero__in { position: relative; z-index: 1; padding: 104px 22px 72px; max-width: var(--max);
            margin: 0 auto; }
.hero__sfondo {
  position: absolute; top: 0; right: 0; bottom: 0; width: 52%;
  object-fit: cover; object-position: 44% 45%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
}
.hero h1 {
  font-size: clamp(2.1rem, 4.6vw, 3.5rem); line-height: 1.05;
  letter-spacing: var(--tracking-display); font-weight: 700;
  margin: 0 0 16px; max-width: 15ch; text-wrap: balance;
}
.lead { font-size: 1.08rem; color: var(--fumo); margin: 0 0 26px; max-width: 38ch; }

.cta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.btn {
  display: inline-block; padding: 13px 22px; border-radius: var(--r-scheda);
  text-decoration: none; font-weight: 600; border: 1px solid var(--linea);
  color: var(--magnesite); background: var(--ghisa-2);
}
.btn--primary { background: var(--ruggine-piena); border-color: var(--ruggine-piena); color: #fff; }

/* Sotto gli 860 px la fotografia va sopra al testo, a tutta larghezza, e sfuma
   verso il basso: sovrapporli su uno schermo stretto vuol dire per forza testo
   sopra immagine, cioe' il difetto di partenza. */
@media (max-width: 860px) {
  .hero__sfondo {
    position: relative; width: 100%; height: 260px; display: block;
    -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 55%, transparent 100%);
  }
  .hero__in { padding-top: 26px; }
}

/* --------------------------------------------------------------- sezioni */

section { padding: 62px 0; }
.fondo { background: var(--ghisa-2); border-top: 1px solid var(--linea);
         border-bottom: 1px solid var(--linea); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: var(--tracking-titolo);
     margin: 0 0 12px; font-weight: 650; max-width: 30ch; text-wrap: pretty; }
h3 { font-size: 1.15rem; margin: 0 0 6px; letter-spacing: var(--tracking-titolo); }
section > .wrap > p.lead { max-width: 46ch; }

/* ------------------------------------------------------------ le tre cose */

.tre { display: grid; gap: 40px; margin-top: 36px; }
.tre__voce { display: grid; gap: 26px; align-items: center;
             grid-template-columns: 1fr; }
@media (min-width: 820px) {
  .tre__voce { grid-template-columns: 1fr 290px; gap: 44px; }
  .tre__voce--rov { grid-template-columns: 300px 1fr; }
  .tre__voce--rov .tre__testo { order: 2; }
  .tre__voce--rov .scatto { order: 1; }
}
.num { font: var(--t-etichetta); letter-spacing: var(--tracking-etichetta);
       color: var(--fumo); margin: 0 0 6px; }
.tre__testo p { color: var(--fumo); margin: 0 0 8px; max-width: 46ch; }
.tre__testo h3 { color: var(--magnesite); }

/* Le catture sono VERE: 390x844 a 3x, fatte da tools/screenshot.py con
   Playwright. Il telaio del telefono e' disegnato qui intorno, ma il contenuto
   dentro e' il prodotto, non una ricostruzione. */
.scatto { margin: 0; justify-self: center; }
.scatto img {
  width: 100%; max-width: 280px; height: auto; display: block;
  border-radius: 30px; border: 1px solid var(--linea-viva);
  background: var(--ghisa);
}

/* -------------------------------------------------------------- confronto */

.tabella-scorre { overflow-x: auto; margin: 28px 0 14px; -webkit-overflow-scrolling: touch; }
.conf { border-collapse: collapse; width: 100%; min-width: 620px; font-size: 0.94rem; }
.conf th, .conf td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--linea); }
.conf thead th {
  font: var(--t-etichetta); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--fumo); white-space: nowrap; vertical-align: bottom;
}
.conf thead th.noi { color: var(--ruggine); }
.conf tbody th { font-weight: 500; color: var(--magnesite); white-space: nowrap; }
.conf td { color: var(--fumo); text-align: center; }
.conf td.noi { color: var(--magnesite); background: var(--ruggine-velo); font-weight: 600; }
.conf .si { color: var(--riposo); }
.conf .no { color: var(--fumo); }
.conf .boh { color: var(--fumo); opacity: .7; font-style: italic; }
/* un fatto e' un fatto: niente corsivo, che qui vuol dire «non lo dichiarano» */
.conf .fatto { color: var(--magnesite); }

.cards { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card { background: var(--ghisa-2); border: 1px solid var(--linea);
        border-radius: var(--r-scheda); padding: 20px; }
.fondo .card { background: var(--ghisa-3); }
.card p { margin: 0; color: var(--fumo); font-size: 0.95rem; }

/* ------------------------------------------------------------- installare */

.steps { counter-reset: p; display: grid; gap: 12px; margin: 24px 0; padding: 0; list-style: none; }
.steps li {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--ghisa-3); border: 1px solid var(--linea);
  border-radius: var(--r-scheda); padding: 15px 18px;
}
.steps li::before {
  counter-increment: p; content: counter(p);
  flex: 0 0 26px; height: 26px; border-radius: 50%;
  background: var(--ruggine-velo); color: var(--ruggine);
  display: grid; place-items: center;
  font: var(--t-etichetta); letter-spacing: 0;
}

/* ------------------------------------------------------------------ note */

.fine { font-size: 0.88rem; color: var(--fumo); margin: 10px 0 0; max-width: 54ch; }
.fine strong { color: var(--magnesite); }
.fine a { color: var(--ruggine); }

footer { padding: 34px 0 56px; border-top: 1px solid var(--linea); }
footer p { font-size: 0.85rem; color: var(--fumo); margin: 0 0 8px; }
footer a { color: var(--ruggine); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }