/* ==========================================================================
   Mattia Santarelli — foglio di stile del sito

   Griglia "Swiss Grid - Website 1536" (Figma):
   12 colonne da 96, gutter 24, margini 60, campi da 96 + 24 (modulo 120).
   Unità di base 24: spazi e interlinee sono multipli di 24 (12 solo dentro
   i componenti). I valori in px riproducono Figma a 1536 di larghezza.

   Indice
   1. Font            6. Intestazione e menu    11. Divulgazione
   2. Token e temi    7. Hero                   12. Servizi (home)
   3. Base            8. Sezioni e titoli       13. Feedback e FAQ
   4. Stili di testo  9. Problemi               14. Footer
   5. Griglia/maglia  10. Metodo e casi studio  15. Pagina Servizi
                                                16. Schermi più piccoli
   ========================================================================== */


/* 1. Font ------------------------------------------------------------------ */

@font-face {
  font-family: "Pure Swiss Display";
  src: url("../fonts/PureSwissDisplay-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Pure Swiss Display";
  src: url("../fonts/PureSwissDisplay-450.woff2") format("woff2");
  font-weight: 450;
  font-display: swap;
}
@font-face {
  font-family: "Pure Swiss Text";
  src: url("../fonts/PureSwissText-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}


/* 2. Token e temi ------------------------------------------------------------ */

:root {
  --margin: 60px;
  --gutter: 24px;
  --content: 1416px;

  --display: "Pure Swiss Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --text: "Pure Swiss Text", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Dimensioni degli stili che cambiano sugli schermi più piccoli (vedi 16) */
  --h90: 90px; --h90-lh: 96px;
  --h64: 64px; --h64-lh: 72px;
  --h40: 40px; --h40-lh: 48px;
  --h32: 32px; --h32-lh: 36px;

  --orange: #FD4E00;
}

/* Brand: tema predefinito (verde acqua) */
:root,
:root[data-theme="brand"] {
  --bg: #4F6D6C;
  --ink: #FFFFFF;        /* testo, filetti di sezione, contorni */
  --ink-2: #EDF0F0;      /* testo secondario (numeri 01–09 dei servizi) */
  --num: #688181;        /* numeri grandi 01 02 03 */
  --rule: #8DA09F;       /* filetti sottili */
  --card: #455F5F;       /* fondo card (oggi non usato, vedi 9) */
  --btn-label: #090B0C;  /* testo del pulsante arancione */
  --mesh: rgb(255 255 255 / 0.08);
}

:root[data-theme="light"] {
  --bg: #F9FBFB;
  --ink: #090B0C;
  --ink-2: #4B585B;
  --num: #E3E7E8;
  --rule: #9CA8AB;
  --card: #F1F3F3;
  --btn-label: #F9FBFB;
  --mesh: rgb(9 11 12 / 0.07);
}

:root[data-theme="dark"] {
  --bg: #090B0C;
  --ink: #F9FBFB;
  --ink-2: #9CA8AB;
  --num: #22292B;
  --rule: #4B585B;
  --card: #161B1D;
  --btn-label: #090B0C;
  --mesh: rgb(249 251 251 / 0.07);
}


/* 3. Base ------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}

body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/24px var(--text);
  letter-spacing: -0.015em;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color .3s ease, color .3s ease;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}


/* 4. Stili di testo (nomi come in Figma) ------------------------------------ */

.t-h90 { font: 450 var(--h90)/var(--h90-lh) var(--display); letter-spacing: -0.03em; }
.t-h64 { font: 450 var(--h64)/var(--h64-lh) var(--display); letter-spacing: -0.03em; }
.t-h40 { font: 450 var(--h40)/var(--h40-lh) var(--display); letter-spacing: -0.03em; }
.t-h32 { font: 400 var(--h32)/var(--h32-lh) var(--display); letter-spacing: -0.03em; }
.t-h24 { font: 400 24px/24px var(--display); letter-spacing: -0.025em; }
.t-h20 { font: 400 20px/24px var(--display); letter-spacing: -0.025em; }
.t-copy18 { font: 400 18px/24px var(--text); letter-spacing: -0.02em; }
.t-copy16 { font: 400 16px/24px var(--text); letter-spacing: -0.015em; }
.t-label16 { font: 400 16px/24px var(--text); letter-spacing: -0.015em; text-transform: lowercase; }
.t-label13 { font: 400 13px/24px var(--text); letter-spacing: 0; }

/* Allineamento ottico dei titoli grandi: sito.js sposta il testo del margine
   laterale della prima lettera, così il segno cade sulla colonna (come in Figma). */
.t-h90, .t-h64, .t-h40 { translate: var(--ox, 0) 0; }

/* Spaziatura tra paragrafi dei Copy: 24 */
.t-copy18 p + p,
.t-copy16 p + p,
.t-copy16 p + ul { margin-top: 24px; }

.num { color: var(--num); }


/* 5. Griglia, maglia e utilità ---------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--margin));
  margin-inline: auto;
  padding-inline: var(--margin);
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
}

/* Maglia 120: una linea all'inizio di ogni colonna (più il bordo destro)
   e una ogni 120 a partire da y 60. Sta dietro ai contenuti. */
.mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--mesh) 1px, transparent 1px);
  background-size: 100% 120px;
  background-position: 0 60px;
}
.mesh .wrap, .mesh .grid { height: 100%; }
.mesh span { border-left: 1px solid var(--mesh); }
.mesh span:last-child { border-right: 1px solid var(--mesh); }

.page { position: relative; z-index: 1; }

/* Spazi verticali presi da Figma (solo da 1024 in su; sotto valgono i default) */
@media (min-width: 1024px) {
  .mt-48  { margin-top: 48px !important; }
  .mt-72  { margin-top: 72px !important; }
  .mt-96  { margin-top: 96px !important; }
  .mt-120 { margin-top: 120px !important; }
  .mt-144 { margin-top: 144px !important; }
  .pb-72  { padding-bottom: 72px !important; }
  .pb-96  { padding-bottom: 96px !important; }
  .pb-144 { padding-bottom: 144px !important; }
  .pb-168 { padding-bottom: 168px !important; }
  .pb-192 { padding-bottom: 192px !important; }
}


/* Componenti comuni: tag e pulsanti */

.tags { display: flex; flex-wrap: wrap; gap: 24px 12px; }

.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  white-space: nowrap;
}

.buttons { display: flex; flex-wrap: wrap; gap: 12px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 144px;
  height: 48px;
  border-radius: 999px;
  font: 400 20px/24px var(--display);
  letter-spacing: -0.025em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.btn--wide { width: 168px; }
.btn--primary { background: var(--orange); color: var(--btn-label); }
.btn--primary:hover { background: color-mix(in srgb, var(--orange) 88%, #000); }
.btn--outline { box-shadow: inset 0 0 0 2px var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: var(--bg); }


/* 6. Intestazione e menu ----------------------------------------------------- */

.site-header { padding-top: 60px; }

.nav { align-items: start; height: 48px; }

.brand {
  grid-column: 1 / span 4;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 15px;
  height: 24px;
  text-decoration: none;
}
.brand svg { display: block; width: 42px; height: 21px; flex: none; }
.brand span { font: 400 23px/24px var(--display); letter-spacing: -0.025em; white-space: nowrap; }

/* Voci del menu sulle colonne 9, 10, 11; interruttore sulla 12 */
.menu { grid-column: 9 / span 3; display: grid; grid-template-columns: subgrid; }
.menu a { text-decoration: none; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.menu a:hover, .menu a[aria-current="page"] { text-decoration-line: underline; }

/* Interruttore del tema: 96×48, pomello 24, icone ogni 24 */
.switch {
  grid-column: 12;
  justify-self: end;
  position: relative;
  display: flex;
  width: 96px;
  height: 48px;
  padding: 12px;
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px var(--ink);
}
.switch__knob {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--ink);
  transition: transform .25s ease;
}
:root[data-theme="brand"] .switch__knob { transform: translateX(24px); }
:root[data-theme="dark"] .switch__knob { transform: translateX(48px); }
.switch button { position: relative; width: 24px; height: 24px; color: var(--ink); transition: color .25s ease; }
.switch button svg { display: block; width: 24px; height: 24px; }
.switch button[aria-pressed="true"] { color: var(--bg); }
.switch button:focus-visible { outline-offset: 2px; border-radius: 50%; }


/* 7. Hero -------------------------------------------------------------------- */

.hero { margin-top: 192px; padding-bottom: 72px; row-gap: 24px; }
.hero__tag { grid-column: 1 / span 8; grid-row: 1; align-self: end; justify-self: start; }
.hero__photo { grid-column: 9 / span 2; grid-row: 1; width: 100%; max-width: 216px; aspect-ratio: 1; object-fit: cover; }
.hero__title { grid-column: 1 / span 8; grid-row: 2; }
.hero__aside { grid-column: 9 / span 4; grid-row: 2; }
.hero__aside .buttons { margin-top: 48px; }


/* 8. Sezioni e titoli ----------------------------------------------------------
   Ogni sezione inizia su un campo della griglia: titolo a 120 dal bordo,
   contenuto a 360 (la testata occupa due campi). */

.section { padding-top: 120px; padding-bottom: 72px; }

.head { min-height: 240px; align-content: start; }
.head__title { grid-column: 1 / span 8; }
.head__title--narrow { max-width: 13em; }
.head__intro { grid-column: 9 / span 4; }


/* 9. Problemi ------------------------------------------------------------------ */

.problem { border-top: 1px solid var(--rule); padding: 23px 0 24px; }
.problem h3 { grid-column: 1 / span 6; }
.problem p { grid-column: 7 / span 6; }

.alts-title { margin-top: 120px; }
.alts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: 24px;
}
/* In Figma le card hanno padding 24 ma il fondo è nascosto.
   Per mostrarlo: background: var(--card); */
.alt { padding: 24px; }
.alt h4 { margin-top: 12px; }
.alt h4 + p { margin-top: 24px; }


/* 10. Metodo e casi studio: tre colonne con righe allineate (subgrid) --------- */

.cols3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 24px;
}
.cols3 > * { display: grid; grid-row: span var(--rows, 4); grid-template-rows: subgrid; }

.activities .bullets { list-style: disc; padding-left: 24px; }

.clients {
  grid-template-rows: 24px;
  align-items: center;
  margin-top: 72px;
  padding-top: 23px;
  border-top: 1px solid var(--rule);
}
.clients p { grid-column: 1 / span 4; }
.client {
  justify-self: start;
  background: currentColor;
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}
.client--wishraiser { grid-column: 5 / span 2; width: 112px; height: 36px; --logo: url("../img/logo-wishraiser.png"); }
.client--truescreen { grid-column: 7 / span 2; width: 112px; height: 28px; --logo: url("../img/logo-truescreen.png"); }
.client--20tab { grid-column: 9 / span 2; width: 86px; height: 40px; --logo: url("../img/logo-20tab.png"); }


/* 11. Divulgazione ------------------------------------------------------------- */

.media__poster { grid-column: 1 / span 4; aspect-ratio: 1; }
.media__photo { grid-column: 5 / span 8; position: relative; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media__photo img { position: absolute; inset: 0; }

.facts4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 24px;
  margin-top: 24px;
}


/* 12. Servizi (home) -------------------------------------------------------- */

.svc .btn { margin-top: 24px; } /* 48 sopra il pulsante: gap 24 + 24 */
/* In Figma la descrizione è un box fisso di 5 righe: la durata parte sempre a 768 */
@media (min-width: 1024px) { .svc__desc { min-height: 120px; } }


/* 13. Feedback e FAQ ----------------------------------------------------------- */

.quote { align-items: start; }
.quote figcaption { grid-column: 1 / span 4; grid-row: 1; }
.quote blockquote { grid-column: 5 / span 6; grid-row: 1; }
.quote + .quote { margin-top: 72px; }

.faq {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 96px;
}
.faq p { margin-top: 24px; }


/* 14. Footer --------------------------------------------------------------------- */

.site-footer { padding-top: 120px; padding-bottom: 96px; }
.footer__cta { align-items: start; }
.footer__cta h2 { grid-column: 1 / span 8; }
.footer__cta .btn { grid-column: 11 / span 2; justify-self: end; }

.footer__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.footer__row--brand { margin-top: 192px; height: 24px; }
.footer__row--legal { margin-top: 96px; }

.brand--footer { gap: 16px; }
.brand--footer svg { width: 46px; height: 23px; }
.brand--footer span { font: 400 24px/24px var(--display); letter-spacing: -0.025em; }

.linkedin { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.linkedin:hover span { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
.linkedin i {
  width: 28px;
  height: 28px;
  background: currentColor;
  -webkit-mask: url("../img/logo-linkedin.png") center / contain no-repeat;
  mask: url("../img/logo-linkedin.png") center / contain no-repeat;
}


/* 15. Pagina Servizi --------------------------------------------------------------
   Colonna sinistra (1–4): titolo, prezzo, condizioni, pulsante.
   Colonna destra (5–12): introduzione e fasi. Ogni fase ha il nome sulle
   colonne 5–7 e le voci dalla colonna 8, con il numero 42 px a sinistra. */

.page-head { margin-top: 192px; padding-bottom: 24px; }
.page-head h1 { grid-column: 1 / span 6; }
.page-head p, .page-head__aside { grid-column: 9 / span 4; }
.page-head__aside .buttons { margin-top: 48px; }

.service { padding-top: 96px; padding-bottom: 72px; }
.service__grid { border-top: 1px solid var(--ink); padding-top: 23px; row-gap: 48px; }
.service__title { grid-column: 1 / span 4; grid-row: 1; }
.service__intro { grid-column: 5 / span 8; grid-row: 1; }

.service__side { grid-column: 1 / span 4; grid-row: 2; align-self: start; }
@media (min-width: 1024px) {
  .service__side { position: sticky; top: 48px; }
}
.price { display: flex; align-items: flex-end; gap: 24px; }
.conditions { margin-top: 24px; }
.conditions dd + dt { margin-top: 24px; }
.service__side .btn { margin-top: 96px; }

.service__phases { grid-column: 5 / span 8; grid-row: 2; display: grid; grid-template-columns: subgrid; }
.phase { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; }
.phase + .phase { margin-top: 96px; }
.phase__head { grid-column: 1 / span 3; max-width: 288px; }
.phase__items { grid-column: 4 / span 5; margin-left: -42px; }
.item { display: grid; grid-template-columns: 42px minmax(0, 1fr); }
.item + .item { margin-top: 24px; }
.item__num { grid-row: 1 / span 2; color: var(--ink-2); }
.item h4, .item p { grid-column: 2; }


/* 16. Schermi più piccoli ---------------------------------------------------------
   Sotto 1536 le colonne si restringono. Gli stili si riducono usando gli stili
   già esistenti in Figma (Heading/72, 48, 40, 32, 24): nessuno stile nuovo. */

/* Menu: sulle colonne serve spazio; sotto 1440 le voci si affiancano a destra */
@media (max-width: 1439px) {
  .nav { display: flex; justify-content: space-between; }
  .menu { display: flex; gap: 24px; margin-left: auto; margin-right: 48px; }
}

@media (max-width: 1279px) {
  :root { --h90: 72px; --h90-lh: 72px; --h64: 48px; --h64-lh: 48px; }
}

@media (max-width: 1023px) {
  :root {
    --margin: 48px;
    --h90: 48px; --h90-lh: 48px;
    --h64: 40px; --h64-lh: 48px;
    --h40: 32px; --h40-lh: 36px;
  }

  .mesh span:nth-child(2n) { border-left: 0; }

  .hero { margin-top: 96px; }
  .hero__photo { grid-column: 1 / span 12; grid-row: 1; width: 144px; }
  .hero__tag { grid-column: 1 / span 12; grid-row: 2; }
  .hero__title { grid-column: 1 / span 12; grid-row: 3; }
  .hero__aside { grid-column: 1 / span 8; grid-row: 4; }
  .hero__aside .buttons { margin-top: 24px; }

  .section { padding-top: 96px; }
  .head { min-height: 0; row-gap: 24px; margin-bottom: 48px; }
  .head__title, .head__intro { grid-column: 1 / span 12; }
  .head__intro { max-width: 552px; }

  .alts-title { margin-top: 72px; }
  .alts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
  .alt { padding: 0; }

  .cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 72px; }
  .cols3 > * { display: flex; flex-direction: column; gap: 24px; grid-row: auto; }

  .clients { grid-template-rows: none; row-gap: 24px; padding-top: 23px; }
  .clients p { grid-column: 1 / span 12; }
  .client--wishraiser { grid-column: 1 / span 4; }
  .client--truescreen { grid-column: 5 / span 4; }
  .client--20tab { grid-column: 9 / span 4; }

  .media { row-gap: 24px; }
  .media__poster { grid-column: 1 / span 6; }
  .media__photo { grid-column: 7 / span 6; }
  .facts4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .quote figcaption { grid-column: 1 / span 4; }
  .quote blockquote { grid-column: 5 / span 8; }
  .quote + .quote { margin-top: 48px; }

  .faq { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }

  .site-footer { padding-top: 96px; }
  .footer__cta { row-gap: 24px; }
  .footer__cta h2, .footer__cta .btn { grid-column: 1 / span 12; justify-self: start; }
  .footer__row--brand { margin-top: 96px; height: auto; }
  .footer__row--legal { margin-top: 48px; }

  .page-head { margin-top: 96px; row-gap: 24px; }
  .page-head h1, .page-head p, .page-head__aside { grid-column: 1 / span 12; }
  .page-head p { max-width: 552px; }

  .service { padding-top: 72px; }
  .service__grid { row-gap: 24px; }
  .service__title, .service__intro, .service__side, .service__phases { grid-column: 1 / span 12; grid-row: auto; }
  .service__side .btn { margin-top: 48px; }
  .service__phases { display: block; margin-top: 48px; }
  .phase { display: block; }
  .phase + .phase { margin-top: 72px; }
  .phase__head { max-width: none; margin-bottom: 24px; }
  .phase__items { margin-left: 0; }
}

@media (max-width: 767px) {
  .nav { flex-wrap: wrap; height: auto; row-gap: 24px; }
  .menu { order: 3; width: 100%; margin: 0; }
}

@media (max-width: 639px) {
  :root { --margin: 24px; --h32: 24px; --h32-lh: 24px; }

  .mesh span:nth-child(2n) { border-left: 1px solid var(--mesh); }
  .mesh span:not(:nth-child(3n+1)) { border-left: 0; }

  .problem h3, .problem p { grid-column: 1 / span 12; }
  .problem p { margin-top: 12px; }

  .alts, .cols3, .faq { grid-template-columns: minmax(0, 1fr); }
  .client--wishraiser, .client--truescreen, .client--20tab { grid-column: span 4; }

  .media__poster, .media__photo { grid-column: 1 / span 12; }
  .media__photo { aspect-ratio: 936 / 456; }

  .quote figcaption, .quote blockquote { grid-column: 1 / span 12; }
  .quote blockquote { grid-row: 2; margin-top: 12px; }

  .hero__aside { grid-column: 1 / span 12; }
  .footer__row { flex-direction: column; align-items: flex-start; }
}