/*
 * Il sito di KeelOps: essenziale, statico, senza dipendenze.
 *
 * I colori sono quelli del prodotto (website/COLORI-E-LOGO.md): guscio neutro,
 * il viola solo come accento. Chiaro e scuro seguono il sistema — qui non c'è
 * una scelta da ricordare, siamo su una pagina pubblica.
 * Nessun webfont: lo stack di sistema, come nell'applicazione.
 */
:root {
  --fondo: #ffffff;
  --testo: #0a0a0a;
  --tenue: #737373;
  --filo: #e5e5e5;
  --rilievo: #fafafa;
  --accento: #7c3aed;
  --accento-fondo: #f3e8ff;
  --accento-testo: #5b21b6;
  --raggio: 10px;
  --ombra: 0 1px 3px rgba(0, 0, 0, 0.06), 0 8px 24px rgba(0, 0, 0, 0.06);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0a0a0a;
    --testo: #fafafa;
    --tenue: #a1a1a1;
    --filo: #262626;
    --rilievo: #171717;
    --accento: #a78bfa;
    --accento-fondo: #2e1065;
    --accento-testo: #ddd6fe;
    --ombra: 0 1px 3px rgba(0, 0, 0, 0.5), 0 8px 24px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--testo);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accento); text-decoration: none; }
a:hover { text-decoration: underline; }
.contenitore { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

/* ---- testata ---- */
header.barra {
  position: sticky; top: 0; z-index: 10;
  background: color-mix(in srgb, var(--fondo) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--filo);
}
.barra .contenitore { display: flex; align-items: center; gap: 16px; height: 60px; }
.marchio { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--testo); }
.marchio svg { height: 24px; width: auto; }
.barra nav { margin-left: auto; display: flex; align-items: center; gap: 20px; font-size: 15px; }
.barra nav a { color: var(--tenue); }
.barra nav a:hover { color: var(--testo); text-decoration: none; }
.lingue { display: flex; gap: 6px; font-size: 14px; }
.lingue a { color: var(--tenue); }
.lingue a[aria-current="true"] { color: var(--testo); font-weight: 600; }
@media (max-width: 720px) { .barra nav .solo-largo { display: none; } }
/* Sul telefono la fila «Aggiornamenti + cinque lingue» sfora di un paio di
   pixel e la pagina scorre di lato: il nav si stringe invece di spingere. */
@media (max-width: 480px) {
  .barra .contenitore { gap: 10px; }
  .barra nav { gap: 12px; font-size: 14px; min-width: 0; }
  .lingue { gap: 5px; }
}

/* ---- sezioni ---- */
section { padding: 88px 0; border-bottom: 1px solid var(--filo); }
section:last-of-type { border-bottom: 0; }
/* Una banda su due ha il suo fondo: sette sezioni tutte bianche si leggono
   come un unico muro di testo. */
section.banda { background: var(--rilievo); }
/* La sezione dell'AI è scura anche di giorno: è il punto in cui il discorso
   cambia, e si vede prima di leggerlo. */
section.scura {
  --fondo: #0a0a0a; --testo: #fafafa; --tenue: #a1a1a1; --filo: #262626;
  --rilievo: #171717; --accento: #a78bfa; --accento-fondo: #2e1065; --accento-testo: #ddd6fe;
  background: var(--fondo); color: var(--testo); border-bottom-color: #262626;
}
section.scura .scheda { background: #111; }
h1 { font-size: clamp(2rem, 5vw, 3rem); line-height: 1.15; margin: 0 0 16px; letter-spacing: -0.02em; text-wrap: balance; }
h2 { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 12px; letter-spacing: -0.01em; text-wrap: balance; }
h3 { font-size: 1.05rem; margin: 0 0 6px; }
p { margin: 0 0 16px; max-width: 68ch; }
.occhiello { text-transform: uppercase; letter-spacing: 0.08em; font-size: 13px; font-weight: 600; color: var(--accento); margin: 0 0 10px; }
.guida { font-size: 1.15rem; color: var(--tenue); max-width: 62ch; }
.tenue { color: var(--tenue); }
.piccolo { font-size: 14px; }

/* ---- apertura ---- */
.apertura {
  padding-top: 72px; padding-bottom: 0;
  background:
    radial-gradient(900px 420px at 78% -8%, color-mix(in srgb, var(--accento) 14%, transparent), transparent 70%),
    radial-gradient(700px 360px at 8% 12%, color-mix(in srgb, var(--accento) 8%, transparent), transparent 72%);
}
.apertura h1 { font-size: clamp(2.4rem, 6.2vw, 4rem); }
.apertura .guida { font-size: clamp(1.05rem, 2.2vw, 1.3rem); }
.apertura h1 span { color: var(--accento); }
.azioni { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 8px; }
.bottone {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 8px; font-weight: 600; font-size: 15px;
  background: var(--accento); color: #fff; border: 1px solid var(--accento);
}
.bottone:hover { text-decoration: none; filter: brightness(1.08); }
.bottone.vuoto { background: transparent; color: var(--testo); border-color: var(--filo); }
.bottone.vuoto:hover { background: var(--rilievo); }
.schermata {
  margin: 52px auto 0; max-width: 100%; width: 100%;
  border: 1px solid var(--filo); border-radius: 14px;
  overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 30px 60px -20px rgba(0,0,0,.28);
  background: var(--rilievo);
}
/* Fuori dal contenitore: larga quanto la finestra meno un margine. La
   schermata di apertura è il primo sguardo sul prodotto: a mille pixel non si
   legge, ed era il difetto che l'utente ha segnalato. */
.esce, .apertura .schermata {
  position: relative; left: 50%; width: min(1320px, calc(100vw - 48px));
  margin-left: calc(min(1320px, 100vw - 48px) / -2); max-width: none;
}
@media (max-width: 720px) { .esce, .apertura .schermata { width: calc(100vw - 32px); margin-left: calc((100vw - 32px) / -2); } }

/* Il contenitore delle sezioni con immagini è più largo: una schermata
   dell'applicazione a 600px non si legge, ed era il difetto principale. */
.contenitore.largo { max-width: 1280px; }

/* ---- griglie ---- */
.griglia { display: grid; gap: 20px; }
.griglia.tre { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.griglia.due { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
/* La figura non si stira per pareggiare la colonna di testo: restava mezza
   banda nera sotto l'immagine. Sta al centro, alta quanto è. */
#ai .griglia.due { align-items: center; }
#ai .griglia.due figure { margin: 0; }
.scheda { border: 1px solid var(--filo); border-radius: var(--raggio); padding: 20px; background: var(--rilievo); }
.scheda p { margin: 0; color: var(--tenue); font-size: 15px; }
.scheda .nota { display: block; margin-top: 10px; font-size: 13px; }

/* ---- aree con schermata ---- */
/* Senza JS (o su schermo stretto): testo e immagine grande, uno sotto l'altro,
   alternati a destra e a sinistra. */
.area { display: grid; gap: 24px; grid-template-columns: 1fr; margin-bottom: 72px; }
.area:last-child { margin-bottom: 0; }
.area .testo { max-width: 62ch; }
.area figure {
  margin: 0; border: 1px solid var(--filo); border-radius: 14px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 24px 50px -22px rgba(0,0,0,.3);
}
@media (min-width: 900px) {
  .area.rovescia .testo { margin-left: auto; text-align: right; }
}

/* Con JS, da tablet in su: le immagini si staccano dal testo e vivono in un
   riquadro che resta fermo mentre si scorre, cambiando quando cambia l'area.
   È il modo in cui una schermata si può guardare davvero: grande, e ferma. */
.scorrevole { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 900px) {
  .scorrevole { grid-template-columns: minmax(300px, 5fr) 7fr; gap: 56px; align-items: start; }
  /* Una guida verticale con il segno di dove si è: sei aree sono tante, e
     mentre si scorre bisogna capire a che punto della fila si è arrivati. */
  .scorrevole .colonna-testi { display: flex; flex-direction: column; position: relative; padding-left: 30px; }
  .scorrevole .colonna-testi::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--filo);
  }
  .segno {
    position: absolute; left: -1px; width: 4px; border-radius: 2px; background: var(--accento);
    transition: top .45s cubic-bezier(.22,.61,.36,1), height .45s cubic-bezier(.22,.61,.36,1);
  }
  /* Il testo di questa sezione porta il peso della pagina: più grande. */
  .scorrevole .area h3 { font-size: 1.5rem; margin-bottom: 10px; letter-spacing: -0.01em; }
  .scorrevole .area p { font-size: 1.08rem; }
  .scorrevole .area {
    display: flex; flex-direction: column; justify-content: center;
    margin: 0; min-height: 50vh;
    opacity: .32; transition: opacity .5s ease;
  }
  .scorrevole .area .testo { text-align: left; margin-left: 0; }
  .scorrevole .area.attiva { opacity: 1; }
  .scorrevole .area figure { display: none; }
  /* Il visore è alto quanto la finestra e tiene il telaio in mezzo: così la
     schermata resta centrata qualunque sia l'altezza dello schermo, senza
     numeri magici da rifare a ogni ritocco della testata. */
  .visore { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; }
  .telaio {
    /* Le proporzioni della schermata (2880×1800): ci sta tutta, nessuna
       colonna dell'applicazione resta tagliata fuori. */
    position: relative; width: 100%; aspect-ratio: 16 / 10;
    border: 1px solid var(--filo); border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.06), 0 30px 60px -24px rgba(0,0,0,.34);
    background: var(--rilievo);
  }
  .telaio img {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
    opacity: 0; transform: scale(1.03); transition: opacity .5s ease, transform .8s ease;
  }
  .telaio img.attiva { opacity: 1; transform: scale(1); }
}
@media (max-width: 899px) { .visore { display: none; } }

/* ---- tabella libero/pro ---- */
/* La tabella scorre nel suo riquadro: la pagina non scorre mai di lato. */
.scorre { overflow-x: auto; margin-top: 8px; -webkit-overflow-scrolling: touch; }
.tabella { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
.tabella th, .tabella td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--filo); vertical-align: top; }
.tabella thead th { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tenue); }
.tabella .pro { background: var(--accento-fondo); color: var(--accento-testo); }
.tabella tbody th { font-weight: 600; }
.pillola { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--filo); }
.pillola.si { border-color: var(--accento); color: var(--accento); }
.pillola.no { color: var(--tenue); }

/* ---- l'informativa: una colonna sola, da leggere ---- */
.contenitore.stretto { max-width: 760px; }
.testo-lungo h2 { margin-top: 40px; font-size: 1.15rem; }
.testo-lungo h2:first-child { margin-top: 0; }
.testo-lungo p { max-width: none; }

/* ---- iscrizione ---- */
/* Il campo che solo un robot compila: fuori dallo schermo, non nel flusso del
   tabulatore, e dichiarato nascosto a chi legge con la voce. Non `display:none`,
   che i robot riconoscono. */
.trappola {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.iscrizione { background: var(--rilievo); border: 1px solid var(--filo); border-radius: var(--raggio); padding: 28px; }
.iscrizione form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.iscrizione input {
  flex: 1 1 260px; min-width: 0; padding: 12px 14px; font: inherit; font-size: 15px;
  border: 1px solid var(--filo); border-radius: 8px; background: var(--fondo); color: var(--testo);
}
.iscrizione input:focus-visible, .bottone:focus-visible, a:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
.iscrizione button { border: 0; cursor: pointer; font: inherit; }
.esito { margin: 12px 0 0; font-size: 14px; min-height: 1.4em; }
.esito.ok { color: #15803d; }
.esito.ko { color: #b91c1c; }
@media (prefers-color-scheme: dark) { .esito.ok { color: #86efac; } .esito.ko { color: #fca5a5; } }

/* ---- piè di pagina ---- */
footer { padding: 40px 0 60px; color: var(--tenue); font-size: 14px; }
footer .contenitore { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
footer nav { margin-left: auto; display: flex; gap: 18px; flex-wrap: wrap; }

/* ---- il dipinto della nave (dominio pubblico, vedi LEGGIMI) ---- */
.dipinto { margin-top: 40px; margin-bottom: 0; }
.dipinto video, .dipinto img { max-height: min(70vh, 620px); object-fit: cover; }
.dipinto img,
.dipinto video {
  display: block; width: 100%; height: auto;
  border-radius: var(--raggio); border: 1px solid var(--filo); box-shadow: var(--ombra);
}
.dipinto figcaption { margin-top: 10px; }

/* ---- comparse: le cose entrano da sole, una volta sola ---- */
.rivela { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
.rivela.dentro { opacity: 1; transform: none; }
.rivela.da-sinistra { transform: translateX(-26px); }
.rivela.da-destra { transform: translateX(26px); }
.rivela.da-sinistra.dentro, .rivela.da-destra.dentro { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rivela, .telaio img, .scorrevole .area, .segno { transition: none; }
  .rivela { opacity: 1; transform: none; }
}