/* ============================================================================
   STUDIO COROCHER — le basi condivise da tutte le pagine del sito.
   ⭐ ESISTE PER UNA RAGIONE SOLA: i colori e i font sono scritti QUI e in nessun
   altro posto. Con quattro pagine che ripetono la stessa tavolozza, alla seconda
   correzione una resta indietro e nessuno se ne accorge finché non le si vede
   accostate. Le impaginazioni invece restano dentro ogni pagina: sono diverse
   per definizione, e centralizzarle non risolverebbe niente.
   ============================================================================ */

/* ---- FONT: self-hosted, una sola famiglia. ⛔ Mai un <link> a Google Fonts. --- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/inter-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 800;font-display:swap;
  src:url(fonts/inter-var-latinext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* fondo e superfici — acciaio, non verde */
  --bg1:#141D22; --bg2:#0A0E11;
  --glow1:rgba(110,143,151,.15); --glow2:rgba(70,98,110,.14);
  --panel:rgba(22,31,36,.72); --panel-2:rgba(30,42,48,.7); --panel-solid:#151E23;
  --ink:#D8DCDE; --ink-bright:#F0F3F4; --ink-soft:#93A3AB; --ink-dim:#61737D;
  --line:#1E2A31; --line-strong:#2E3F48;

  /* ⛔ i nomi dicono ACCIAIO perché il contenuto è acciaio: una variabile che si
     chiama --teal e contiene grigio-blu è una bugia che qualcuno crederà. */
  --steel:#6E8F97; --steel-lift:#9AB4BB; --steel-deep:#46626E;

  /* ⭐ L'UNICO ACCENTO: l'oro. Bordeaux e borgogna sono stati provati e scartati
     (📄 brand/accento.html, brand/borgogna.html). 8,6:1 sul fondo scuro.
     ⛔ Marca l'IMPORTANZA, mai lo STATO: per gli errori serve un colore suo, o
     «importante» e «sbagliato» diventano la stessa cosa. */
  --oro:#D9A441; --oro-deep:#B8862C;

  /* i colori dei PRODOTTI — vivono solo nel quadrato del marchio e sulla loro scheda.
     ⚠️ invex e helixos sono SEGNAPOSTO: nessuno li ha ancora decisi. */
  --telaio:#149186; --sartorai:#A98B5D; --invex:#C9821F; --helixos:#2E86C1;

  --amber:#C9A227;   /* SOLO per i segnaposto — non è un colore del marchio */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased;
  background:radial-gradient(circle at 12% -5%,var(--glow1),transparent 40%),
             radial-gradient(circle at 90% 4%,var(--glow2),transparent 42%),
             linear-gradient(180deg,var(--bg1),var(--bg2));
  background-attachment:fixed;line-height:1.6;overflow-x:hidden}

/* ⛔⛔ MAI UNA PAROLA SOLA SU UNA RIGA. `text-wrap` si EREDITA, quindi `pretty` sul
   body copre ogni testo — comprese le <span> dentro le schede, che è proprio quella
   che era sfuggita elencando le classi a mano. `balance` sui titoli: pareggia tutte
   le righe invece di curare solo l'ultima.
   ⛔ E mai un <br> per andare a capo: spezza il paragrafo in due tronconi e OGNUNO
   può orfanare la sua ultima parola. Serve una frase per riga? `.riga`, che è un
   blocco e si bilancia per conto suo. */
body{text-wrap:pretty}
h1,h2,h3,h4,.tit,.nm,.wm,.riga{text-wrap:balance}
.riga{display:block}

/* ---- tipografia ---- */
h1,h2,h3,.stat b,.wm{font-weight:800;letter-spacing:-.025em}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem);line-height:1.06;color:var(--ink-bright)}
h2{font-size:clamp(1.6rem,3.3vw,2.4rem);line-height:1.14;color:var(--ink-bright);margin-bottom:.35em}
h3{font-size:1.2rem;line-height:1.25;color:var(--ink-bright)}
.kicker{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.18em;
  color:var(--ink-soft);margin-bottom:16px}
.lead{font-size:clamp(1.02rem,1.7vw,1.24rem);color:var(--ink-soft);line-height:1.55;max-width:80ch}
em{font-style:italic;color:var(--ink-bright)}
strong{color:var(--ink-bright);font-weight:600}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
section{padding:60px 0}
.softrule{width:110px;height:1px;margin:0 auto;background:rgba(255,255,255,.6)}

/* ---- bottoni ---- */
.btn{font-family:var(--sans);border:none;border-radius:12px;padding:13px 24px;font-size:15px;
  font-weight:600;cursor:pointer;text-decoration:none;display:inline-block;transition:.16s;white-space:nowrap}
.btn-primary{background:linear-gradient(150deg,var(--oro),var(--oro-deep));color:#20180A;font-weight:700}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--panel);border:1px solid var(--line-strong);color:var(--ink-bright)}
.btn-ghost:hover{border-color:var(--steel)}
.btn-sm{padding:9px 17px;font-size:13.5px}

/* ---- barra in alto ---- */
.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(12px);
  background:rgba(10,14,17,.62);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
.brand svg{width:31px;height:31px;display:block;flex:none}
.wm{font-size:17px;text-transform:uppercase;letter-spacing:0;color:var(--ink-bright);white-space:nowrap}
.nav-r{display:flex;align-items:center;gap:22px}
.nav-r a.lnk{font-size:14px;color:var(--ink-soft);text-decoration:none;transition:.15s}
.nav-r a.lnk:hover{color:var(--ink-bright)}
@media(max-width:820px){.nav-r a.lnk{display:none}}

/* ---- piede ---- */
footer{border-top:1px solid var(--line);padding:34px 0;color:var(--ink-soft);font-size:13px;margin-top:20px}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
footer .legal{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);
  font-size:12px;opacity:.72;line-height:1.6}

/* ---- il quadrato del marchio, riusato come segno del sito ----
   ⭐ Stessa forma e stesso raggio del quadrato dentro la C: 30% del lato.
   Cambiano solo misura e colore. 📄 brand/sistema.html */
.sq{display:inline-block;flex:none;width:var(--s,12px);height:var(--s,12px);
  border-radius:calc(var(--s,12px) * .3);background:var(--c,var(--oro))}


/* ---- la firma nel piede: il marchio, non una parola ----
   ⭐ Cliccabile e riporta alla home. ⚠️ Il gradiente dentro l'SVG ha un id UNICO per pagina:
   due <linearGradient> con lo stesso id e il browser usa sempre il primo, quindi il secondo
   marchio della pagina resterebbe invisibile — un difetto che non dà nessun errore. */
footer .firma{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  color:var(--ink-bright);font-weight:700;font-size:14px;transition:.16s}
footer .firma svg{width:22px;height:22px;display:block;flex:none}
footer .firma:hover{color:var(--oro)}
footer .legal a{color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
footer .legal a:hover{color:var(--ink-bright)}