/* ChampTeam — il sito di vendita.
 *
 * Stessi colori e stessi caratteri dell'applicazione, di proposito: chi arriva
 * dall'annuncio e poi apre la prova deve trovarsi nello stesso posto. Un sito
 * che promette una cosa e un prodotto che ne sembra un altro è il modo più
 * veloce per perdere la fiducia prima ancora di cominciare.
 *
 * Il motivo che torna è il QUADRANTE: l'anello sottile color champagne che
 * nell'app pulsa intorno all'orologio della timbratura. Qui diventa lo sfondo
 * del titolo, il segno delle liste e il numero dei passaggi. Una cosa sola,
 * ripetuta, invece di tre decorazioni diverse.
 */

@font-face {
  font-family: 'Geist';
  src: url('/assets/fonts/geist.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('/assets/fonts/geist-mono.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/assets/fonts/instrument-serif-italic.woff2') format('woff2');
  font-weight: 400; font-style: italic; font-display: swap;
}

:root {
  --bg:        #1B1C1F;
  --surface:   #232529;
  --surface-2: #2C2F34;
  --border:    #383B41;
  --text:      #ECE8E1;
  --soft:      #A09C95;
  --brand:     #D2B06E;
  --ok:        #86BC9F;
  --font:      'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:      'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif:     'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --misura:    1180px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-weight: 350; font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height: auto, insieme a width e height scritti nell'HTML: il browser riserva
   lo spazio giusto prima che l'immagine arrivi (niente pagina che salta) e
   poi la scala senza deformarla. Senza questa riga l'altezza dell'attributo
   vinceva sulla larghezza della colonna, e le foto uscivano stirate. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.misura { max-width: var(--misura); margin: 0 auto; padding: 0 22px; }
.sezione { padding: 92px 0; border-top: 1px solid var(--border); }
.sezione:first-of-type { border-top: 0; }

/* ---------------------------------------------------------- tipografia -- */
h1, h2, h3 { font-weight: 400; letter-spacing: -.02em; line-height: 1.12; margin: 0; }
h1 { font-size: clamp(2.5rem, 6vw, 4.2rem); }
h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); }
h3 { font-size: 1.12rem; font-weight: 500; letter-spacing: -.01em; }
p  { margin: 0 0 1em; }
.sopra {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 18px;
}
.serif { font-family: var(--serif); font-style: italic; color: var(--brand); }
.soft { color: var(--soft); }
.largo { max-width: 46ch; }
.guida { font-size: 1.12rem; color: var(--soft); max-width: 54ch; }

/* ---------------------------------------------------------------- menu -- */
.testata {
  position: sticky; top: 0; z-index: 40;
  background: rgba(27,28,31,.82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.testata-in { display: flex; align-items: center; gap: 26px; height: 66px; }
.testata img { height: 26px; width: auto; }
.menu { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.menu a { color: var(--soft); font-size: .95rem; }
.menu a:hover { color: var(--text); text-decoration: none; }
/* Il pulsante dentro al menù: senza questa riga vinceva «.menu a», che è più
   specifica di «.btn», e il testo restava grigio chiaro sopra il champagne —
   illeggibile proprio sul pulsante che deve farsi premere. */
.menu a.btn { color: #1B1C1F; }
.menu a.btn:hover { color: #1B1C1F; }
/* «Accedi» accanto a «Provala»: stesso peso visivo ma contornato, perché
   l'azione principale del sito resta la prova. */
.menu a.btn-ghost, .menu a.btn-ghost:hover { color: var(--text); }
.menu .btn { padding: 10px 20px; }

/* ------------------------------------------------------------ pulsanti -- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 26px; border-radius: 999px; border: 1px solid var(--brand);
  background: var(--brand); color: #1B1C1F; font: inherit; font-weight: 500;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(210,176,110,.22); }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--border); }
.btn-ghost:hover { border-color: var(--brand); box-shadow: none; }
.btn-grande { padding: 17px 34px; font-size: 1.05rem; }
.contatto-diretto { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* ---------------------------------------------------------------- hero -- */
.hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--border); }
.hero-foto {
  position: absolute; inset: 0; background-size: cover; background-position: center 42%;
  opacity: .5;
}
.hero-velo {
  position: absolute; inset: 0;
  background:
    radial-gradient(1100px 620px at 72% 18%, rgba(210,176,110,.13), transparent 62%),
    linear-gradient(180deg, rgba(27,28,31,.72) 0%, rgba(27,28,31,.9) 58%, var(--bg) 100%);
}
/* Il quadrante: l'anello dell'orologio della timbratura, in grande, dietro al
   titolo. È il segno che lega il sito al prodotto. */
.hero-anello {
  position: absolute; right: -170px; top: 50%; transform: translateY(-50%);
  width: 680px; height: 680px; border-radius: 50%;
  border: 1px solid rgba(210,176,110,.22);
  box-shadow: inset 0 0 0 1px rgba(210,176,110,.07), 0 0 120px rgba(210,176,110,.05);
  pointer-events: none;
}
.hero-anello::after {
  content: ''; position: absolute; inset: 64px; border-radius: 50%;
  border: 1px solid rgba(210,176,110,.1);
}
/* Solo sopra e sotto: «padding: 112px 0» azzerava il margine laterale di
   .misura, e sul telefono il testo toccava il bordo dello schermo. */
.hero-in { position: relative; padding-top: 112px; padding-bottom: 96px; }
.hero h1 { max-width: 17ch; }
.hero .guida { margin-top: 26px; font-size: 1.2rem; }
.azioni { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.prova-sociale {
  margin-top: 46px; padding-top: 22px; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: 10px 30px; color: var(--soft); font-size: .92rem;
  max-width: 760px;
}
.prova-sociale b { color: var(--text); font-weight: 500; }

/* ------------------------------------------------------------- griglie -- */
.griglia { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }

.scheda {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 28px;
}
.scheda h3 { margin-bottom: 10px; }
.scheda p:last-child { margin-bottom: 0; }

/* Il segno delle liste è un quadrante in miniatura. */
.punti { list-style: none; margin: 0; padding: 0; }
.punti li { position: relative; padding-left: 30px; margin-bottom: 14px; color: var(--soft); }
.punti li::before {
  content: ''; position: absolute; left: 0; top: .44em;
  width: 13px; height: 13px; border-radius: 50%;
  border: 1px solid var(--brand); opacity: .75;
}
.punti li::after {
  content: ''; position: absolute; left: 6px; top: .62em;
  width: 4px; height: 1px; background: var(--brand);
}
.punti b { color: var(--text); font-weight: 500; }

/* ------------------------------------------------------------ schermate -- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.tab {
  padding: 9px 17px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--soft); font: inherit; font-size: .94rem;
  cursor: pointer;
}
.tab[aria-selected="true"] { border-color: var(--brand); color: var(--brand);
  background: rgba(210,176,110,.08); }
.pannello[hidden] { display: none; }
.pannello { display: grid; grid-template-columns: 1.55fr 1fr; gap: 34px; align-items: start; }
/* La schermata del telefono è alta e stretta: con le stesse proporzioni delle
   altre lascerebbe mezza riga vuota a destra. */
.pannello.telefono { grid-template-columns: 360px 1fr; gap: 54px; align-items: center; }
.cornice {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  background: var(--surface); box-shadow: 0 26px 70px rgba(0,0,0,.45);
}
.cornice img { width: 100%; }
.cornice-vuota {
  aspect-ratio: 16 / 10; display: grid; place-items: center;
  color: var(--soft); font-family: var(--mono); font-size: .8rem; text-align: center;
  padding: 20px;
}

/* -------------------------------------------------------------- prezzi -- */
.listino { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fascia { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 30px; }
.fascia.spicca { border-color: var(--brand); box-shadow: 0 0 0 1px rgba(210,176,110,.25); }
.fascia .nome { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); }
.fascia .cifra { font-size: 3rem; font-weight: 300; letter-spacing: -.03em; margin: 14px 0 2px; }
.fascia .cifra span { font-size: 1rem; color: var(--soft); font-weight: 400; }
.fascia .quanti { color: var(--soft); margin-bottom: 18px; }
.nota-prezzi { margin-top: 26px; color: var(--soft); font-size: .95rem; }
.fondatori { margin: 0 0 26px; padding: 22px 26px; border-radius: 16px;
  border: 1px solid var(--brand); background: rgba(210,176,110,.08); }
.fondatori .etichetta { font-family: var(--mono); font-size: .76rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand); }
.fondatori .grande { font-size: 1.35rem; line-height: 1.35; margin: 8px 0 6px; }
.fondatori .grande b { color: var(--brand); font-weight: 500; }
.fondatori .serif { font-family: var(--serif); font-style: italic; font-size: 1.1em; }
.fondatori p.soft { margin: 0; color: var(--soft); }
.fondatori.chiusa { border-color: var(--border); background: var(--surface); }

/* --------------------------------------------------------------- passi -- */
.passi { counter-reset: passo; display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.passo { position: relative; padding-top: 58px; }
.passo::before {
  counter-increment: passo; content: counter(passo);
  position: absolute; top: 0; left: 0; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--brand); color: var(--brand);
  display: grid; place-items: center; font-family: var(--mono); font-size: .95rem;
}

/* ------------------------------------------------------------- domande -- */
.domanda { border-top: 1px solid var(--border); padding: 22px 0; }
.domanda summary { cursor: pointer; font-size: 1.1rem; font-weight: 450; list-style: none; }
.domanda summary::-webkit-details-marker { display: none; }
.domanda summary::after { content: '+'; float: right; color: var(--brand); font-size: 1.3rem; line-height: 1; }
.domanda[open] summary::after { content: '–'; }
.domanda p { color: var(--soft); margin: 14px 0 0; max-width: 72ch; }

/* --------------------------------------------------------------- forma -- */
.forma { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 34px; }
.campo { margin-bottom: 18px; }
.campo label { display: block; font-size: .88rem; color: var(--soft); margin-bottom: 7px; }
.campo input, .campo select, .campo textarea {
  width: 100%; padding: 13px 15px; border-radius: 10px; background: var(--bg);
  border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 1rem;
}
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(210,176,110,.14);
}
.campo textarea { min-height: 96px; resize: vertical; }
.due { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.esito { border-radius: 12px; padding: 16px 18px; margin-bottom: 20px; }
.esito-ok { background: rgba(134,188,159,.12); border: 1px solid var(--ok); color: var(--ok); }
.esito-no { background: rgba(220,127,114,.12); border: 1px solid #DC7F72; color: #DC7F72; }
.privacy { color: var(--soft); font-size: .86rem; margin-top: 14px; }

/* --------------------------------------------------------------- firma -- */
.firma { border-top: 1px solid var(--border); padding: 40px 0 60px; color: var(--soft); font-size: .9rem; }
.firma-in { display: flex; flex-wrap: wrap; gap: 16px 34px; align-items: center; }
.firma img { height: 22px; opacity: .85; }

/* ------------------------------------------------------------- telefono -- */
@media (max-width: 900px) {
  .pannello { grid-template-columns: 1fr; }
  .due { grid-template-columns: 1fr; }
  .hero-anello { width: 420px; height: 420px; right: -190px; opacity: .6; }
  .sezione { padding: 64px 0; }
  .hero-in { padding-top: 72px; padding-bottom: 64px; }
  .menu a:not(.btn) { display: none; }
  .menu { gap: 10px; }
  .menu .btn { padding: 9px 16px; font-size: .9rem; }
}

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

/* I collegamenti alle pagine dedicate, in fondo a ogni pagina. */
.firma-temi { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 26px;
  padding-bottom: 22px; border-bottom: 1px solid var(--border); font-size: .92rem; }
.firma-temi a { color: var(--soft); }
.firma-temi a:hover { color: var(--brand); }

/* ------------------------------------------------------ pagine dedicate -- */
/* Nessuna foto in testa: la pagina dedicata la apre chi arriva da Google con
   una domanda precisa, e la risposta deve stare subito sotto il titolo. */
.hero-tema .hero-in { padding-top: 86px; padding-bottom: 70px; }
.hero-tema h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); max-width: 20ch; }
.briciola { color: var(--brand); }
.tema-corpo { display: grid; grid-template-columns: 1.3fr 1fr; gap: 50px; align-items: start; }
.tema-corpo.stretta { grid-template-columns: 340px 1fr; }
.tema-blocco + .tema-blocco { margin-top: 38px; }
.h2-tema { font-size: 1.55rem; margin-bottom: 14px; }
.chiusa { text-align: center; }
.chiusa .guida { margin-left: auto; margin-right: auto; }

/* ---------------------------------------------------------- fiducia -- */
/* Le cinque cose che un titolare vuole sapere prima di mettere i dati dei
   suoi dipendenti in un'app: dove stanno, chi li vede, se è legale. */
.fiducia { display: grid; gap: 14px 26px; margin-top: 46px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.fiducia div { border-left: 1px solid var(--brand); padding: 2px 0 2px 14px; }
.fiducia b { display: block; color: var(--text); font-weight: 500; }
.fiducia span { color: var(--soft); font-size: .9rem; }

/* ------------------------------------------------------ conto a testa -- */
.conto { margin-top: 30px; display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.conto .scheda { padding: 22px 24px; }
.conto .persone { font-family: var(--mono); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--soft); }
.conto .testa { font-size: 2.1rem; font-weight: 300; margin: 6px 0 2px; }
.conto .testa span { font-size: .95rem; color: var(--soft); }

@media (max-width: 900px) {
  .tema-corpo, .tema-corpo.stretta { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------- calcolatore -- */
.calcolo { display: grid; grid-template-columns: 420px 1fr; gap: 46px; align-items: start; }
.cifre { display: grid; gap: 14px; margin-top: 8px; }
.cifra-voce { background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  padding: 18px 22px; display: grid; gap: 2px; }
.cifra-voce.spicca { border-color: var(--brand); box-shadow: 0 0 0 1px rgba(210,176,110,.22); }
.cifra-voce .etichetta { font-family: var(--mono); font-size: .74rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--soft); }
.cifra-voce .valore { font-size: 2.3rem; font-weight: 300; letter-spacing: -.02em; }
@media (max-width: 900px) {
  .calcolo { grid-template-columns: 1fr; }
}

/* I pulsanti ufficiali degli store: alti uguali, mai ridisegnati. */
.store-badge { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.store-badge a { display: block; line-height: 0; }
.store-badge img { height: 40px; width: auto; display: block; }
.store-hero { margin-top: 26px; }
.store-firma { margin: 0 0 22px; }