/* SYSAP Software - foglio di stile unico del sito statico.
   Valori ripresi dal tema originale (prime-fse): palette, scala tipografica fluida, spaziature.
   Indice: 1 font · 2 token · 3 base · 4 layout · 6 pulsanti · 7 header e menu · 8 fascia titolo
           9 componenti · 10 footer · 11 utilità · 12 responsive · 13 accessibilità */

/* 1. Font: Sora (SIL OFL 1.1), servito in locale ------------------------------------------- */
@font-face { font-family: Sora; font-style: normal; font-weight: 400; font-display: fallback; src: url("../fonts/sora-400.woff2") format("woff2"); }
@font-face { font-family: Sora; font-style: normal; font-weight: 500; font-display: fallback; src: url("../fonts/sora-500.woff2") format("woff2"); }
@font-face { font-family: Sora; font-style: normal; font-weight: 600; font-display: fallback; src: url("../fonts/sora-600.woff2") format("woff2"); }
@font-face { font-family: Sora; font-style: normal; font-weight: 700; font-display: fallback; src: url("../fonts/sora-700.woff2") format("woff2"); }

/* 2. Token ----------------------------------------------------------------------------- */
:root {
  --c-primary: #0066cc;
  --c-dark: #0e0e0e;
  --c-yellow: #fbed6e;
  --c-light: #f3f3f3;
  --c-line: #0e0e0e33;
  --c-white: #ffffff;
  --c-text: #575757;
  --c-card-border: #dddddd;
  --c-white-soft: #ffffffcc;

  /* scala fluida: minimo a 320 px di viewport, massimo a 1160 px */
  --fs-small: 14px;
  --fs-normal: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.238), 16px);
  --fs-medium: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.476), 18px);
  --fs-large: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.714), 20px);
  --fs-big: clamp(16.293px, 1.018rem + ((1vw - 3.2px) * 1.037), 25px);
  --fs-huge: clamp(22.041px, 1.378rem + ((1vw - 3.2px) * 1.662), 36px);
  --fs-x-large: clamp(25.014px, 1.563rem + ((1vw - 3.2px) * 2.022), 42px);
  --fs-x-huge: clamp(33.419px, 2.089rem + ((1vw - 3.2px) * 3.164), 60px);
  --fs-xx-huge: clamp(50px, 3.125rem + ((1vw - 3.2px) * 5.952), 100px);
  --fs-cta: clamp(42.068px, 2.629rem + ((1vw - 3.2px) * 4.516), 80px);
  --fs-75: clamp(39.963px, 2.498rem + ((1vw - 3.2px) * 4.171), 75px);
  --fs-brand: clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.314), 30px);

  --sp-small: 10px;
  --sp-medium: 20px;
  --sp-normal: 30px;
  --sp-large: 40px;
  --sp-x-large: 50px;

  --content: 760px;
  --wide: 1160px;
  --gutter: 30px;
  --radius: 6px;
}

/* 3. Base ------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--c-white);
  color: var(--c-text);
  font-family: Sora, sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

img { max-width: 100%; height: auto; }

a { color: var(--c-primary); }
a:hover { text-decoration: none; }
a, button { transition: .3s; }

h1, h2, h3, h4, h5, h6 { color: var(--c-dark); font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--fs-huge); }
h2 { font-size: var(--fs-big); }
h3 { font-size: var(--fs-large); }
h4 { font-size: var(--fs-medium); }
h5 { font-size: var(--fs-normal); }
h6 { font-size: var(--fs-small); text-transform: uppercase; }

hr { height: 1px; border: 0; background: var(--c-line); margin: 0; }

figure { margin: 0; }
:where(figure) img { vertical-align: middle; border-radius: var(--radius); }

/* 4. Layout ------------------------------------------------------------------------------
   .stack    figli in colonna distanziati da --gap (30 px di base), come il flusso dei blocchi
   .contain  figli larghi al massimo 760 px (o quanto dice .cw-N), centrati; .wide fino a 1160 px,
             .full a tutta larghezza (esce dal padding del contenitore); --end / --start li allineano
             a un lato
   .row      elementi affiancati che vanno a capo, centrati in verticale, distanza 30 px
   .cols     colonne affiancate da 782 px in su, impilate sotto; .col--wNN fissa la larghezza
   .band     fascia con 30 px di margine e contenuto largo fino a 1160 px (home)
   Le distanze si cambiano con .gap-N (righe) e .cgap-N (colonne), vedi le utilità in fondo.
   In .stack la distanza (--sg) la imposta il genitore sui figli, così un figlio che è a sua volta
   un contenitore non la sovrascrive. */
.stack > * { --sg: 30px; margin-block: 0; }
.stack > * + * { margin-block-start: var(--sg); }

.contain > * { --pxp: 0px; max-width: var(--content); margin-inline: auto; }
.contain > .wide { max-width: var(--wide); }
.contain > .full { max-width: none; margin-inline: calc(var(--pxp) * -1); }
.contain--end > :not(.full) { margin-inline: auto 0; }
.contain--start > :not(.full) { margin-inline: 0 auto; }

.band { padding: var(--sp-normal); }
.band > * { max-width: var(--wide); margin-inline: auto; }
.wide { max-width: var(--wide); margin-inline: auto; }

.row {
  --gap: 30px;
  --cgap: var(--gap);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap) var(--cgap);
}
.row > * { margin: 0; }
.row--col { flex-direction: column; }
.row--end { justify-content: flex-end; }

.cols {
  --gap: var(--sp-large);
  --cgap: var(--gap);
  display: flex;
  flex-wrap: nowrap;
  align-items: normal;
  gap: var(--gap) var(--cgap);
}
.cols > * { margin: 0; }
.cols--middle { align-items: center; }
.col { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; }
.col--middle { align-self: center; }
.col[class*="col--w"] { flex-grow: 0; }
.col--w33 { flex-basis: 33%; }
.col--w40px { flex-basis: 40px; }
.col--w40 { flex-basis: 40%; }
.col--w45 { flex-basis: 45%; }
.col--w50 { flex-basis: 50%; }
.col--w51 { flex-basis: 51%; }
.col--w55 { flex-basis: 55%; }
.col--w60 { flex-basis: 60%; }
.col--w67 { flex-basis: 67%; }
.col--w70 { flex-basis: 70%; }
.col--w85 { flex-basis: 85%; }
.col--w100 { flex-basis: 100%; }

/* immagini */
.fig-center { display: table; margin-inline: auto; }
.align-right { float: right; margin-left: 2em; }
.center-x { margin-inline: auto; width: fit-content; }
.spacer { display: block; }

/* figura disegnata come sfondo (proporzioni fissate dal padding in percentuale) */
.bg-figure { position: relative; }
.bg-figure__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 50%; border-radius: 0; }

/* 6. Pulsanti ---------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 17px 30px;
  border: 0;
  border-radius: var(--radius);
  background-color: var(--c-primary);
  color: var(--c-white);
  font: inherit;
  font-weight: 600;
  line-height: 1.6;
  text-align: center;
  text-decoration: none;
  word-break: break-word;
  cursor: pointer;
}
.btn:hover { background-color: var(--c-dark); }

.btn--outline {
  padding: 15px 30px;
  border: 2px solid currentColor;
  background: transparent;
  color: var(--c-primary);
}
.btn--outline.c-white { color: var(--c-white); }
.btn--outline:hover { background-color: var(--c-dark); border-color: var(--c-dark); color: var(--c-white) !important; }

.btn--underline {
  padding: 6px 0;
  border-top: 1px solid transparent;
  border-bottom: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--c-primary);
  font-weight: 400;
}
.btn--underline:hover { padding-bottom: 0; background: transparent; }

.btn--sm { padding: 6px 10px; font-size: var(--fs-normal); }

/* 7. Header e menu ----------------------------------------------------------------------- */
.site-header {
  --header-pad: 20px;
  position: relative;
  z-index: 50;
  padding: var(--header-pad) var(--gutter);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-white);
}
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: var(--wide);
  margin-inline: auto;
}

.brand { display: flex; align-items: center; gap: 6px; color: var(--c-dark); text-decoration: none; }
.brand__logo { display: block; }
.brand__name { font-size: var(--fs-brand); font-weight: 700; line-height: 1.25; }

.nav__toggle,
.nav__sub-toggle {
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.nav__toggle { display: none; align-items: center; gap: 5px; padding: 1px 6px; font-size: 18px; line-height: normal; color: var(--c-dark); }
.nav__toggle .icon { width: 20px; height: 20px; fill: currentColor; }

.nav__menu { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; }
.nav__item { margin: 0 15px; }
.nav__link {
  display: flex;
  align-items: center;
  padding: 10px 15px;
  color: var(--c-dark);
  font-weight: 600;
  line-height: 1.6;
  text-decoration: none;
}
.nav__link:hover, .nav__item--mega:hover > .nav__link { color: var(--c-primary); }
.nav__sub-toggle { padding-right: 0; }
.nav__sub-toggle .icon { width: 20px; height: 20px; fill: currentColor; }

/* pannello "Soluzioni": parte dal fondo dell'header, largo come il contenuto */
.mega { display: none; position: absolute; left: 0; right: 0; top: calc(100% - var(--header-pad)); padding-top: calc(var(--header-pad) + 1px); }
.nav__item--mega:hover .mega,
.nav__item--mega:focus-within .mega,
.nav__item--mega.is-open .mega { display: block; }
.nav__item--mega.is-dismissed .mega { display: none; }
.mega__inner {
  display: flex;
  max-width: var(--wide);
  margin-inline: auto;
  border-radius: 0 0 10px 10px;
  background: var(--c-white);
  box-shadow: 0 4px 20px rgba(0, 0, 0, .1);
}
.mega__col { flex: 1 1 0; min-width: 0; padding: 50px 30px; }
.mega__col:first-child { border-right: 1px solid var(--c-line); }
.mega__title { display: flex; align-items: center; gap: 20px; margin: 0; color: var(--c-primary); font-size: var(--fs-large); }
.mega__title a { color: inherit; }
.mega__icon { display: block; width: 25px; height: 25px; line-height: 0; }
.mega__icon .icon { width: 25px; height: 25px; overflow: visible; fill: currentColor; }
.mega__list { margin: 20px 0 0; padding: 0; list-style: none; }
.mega__list li { display: flex; padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.mega__list li:last-child { border: 0; }
.mega__list a { color: inherit; text-decoration: none; }
.mega__list a:hover { color: var(--c-primary); }

/* 8. Fascia titolo delle pagine interne -------------------------------------------------- */
.page-title {
  margin-bottom: 90px;
  padding: 60px var(--gutter);
  border-bottom: 1px solid var(--c-line);
  text-align: center;
}
.page-title__heading { max-width: var(--content); margin: 0 auto; }
.breadcrumbs { max-width: var(--content); margin: 15px auto 0; font-size: 14px; }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.page--spaced .site-footer { margin-top: 140px; }

/* 9. Componenti -------------------------------------------------------------------------- */

/* hero della home: occupa l'80% dell'altezza dello schermo, contenuto centrato */
.hero { display: flex; flex-direction: column; justify-content: center; min-height: 80vh; }
.hero > * { width: 100%; }
.hero .band { padding-block: var(--sp-x-large); }
.hero__lead { margin-right: 20% !important; margin-bottom: 30px !important; }

/* elenco con spunta in pillola blu */
.check { display: flex; flex-wrap: nowrap; align-items: center; gap: 20px; }
.check__pill { flex-shrink: 0; padding: 3px 9px; border-radius: 9999px; background: var(--c-primary); line-height: 1.6; }
.check__pill img { width: 13px; }
.check__title { color: var(--c-dark); font-weight: 600; }

/* card con bordo (app) */
.card { padding: 30px; border: 1px solid var(--c-card-border); border-radius: 8px; background: var(--c-white); }

/* badge degli store: riquadri fissi come nell'originale */
.badges { display: flex; flex-wrap: wrap; gap: 12px; }
.badges a { display: block; }
.badge { height: 50px; object-fit: contain; }
.badge--apple { width: 150px; }
.badge--google { width: 170px; }
.badges--lg .badge { height: 60px; }
.badges--lg .badge--apple { width: 180px; }
.badges--lg .badge--google { width: 200px; }

/* cover: immagine di sfondo a dimensione naturale, contenuto centrato in verticale */
.cover {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 1em;
}
.cover__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: none;
  object-position: 50% 50%;
  border-radius: 0;
}
.cover__content { position: relative; z-index: 1; width: 100%; }

/* sezioni della home */
.home main { margin-top: 30px; }
.cta { padding-block: 100px; }
.cta__title { margin: 0; font-size: var(--fs-cta); font-weight: 700; line-height: 1; letter-spacing: -2px; text-transform: uppercase; }
.apps { padding-block: 130px; }
.apps__title { margin-bottom: 90px !important; }

/* 10. Footer ----------------------------------------------------------------------------- */
.site-footer {
  padding: 90px var(--gutter) 120px;
  border-top: 1px solid var(--c-line);
  background: var(--c-white);
}
.site-footer__inner { display: flex; gap: var(--sp-large); max-width: var(--wide); margin-inline: auto; }
.site-footer__col { flex: 1 1 0; min-width: 0; }
.site-footer .site-footer__col > * { margin-block: 0; }
.site-footer .site-footer__col > * + * { margin-block-start: 30px; }
.site-footer .site-footer__col--legal > * + * { margin-block-start: 33px; }
.site-footer__title strong { font-weight: 700; }
.site-footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.site-footer__brand > * { margin: 0; }
.site-footer__nav { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-normal); }
.site-footer__nav a { color: inherit; text-decoration: none; }
.site-footer__nav a:hover { color: var(--c-primary); }
.site-footer__row { display: flex; flex-wrap: nowrap; align-items: center; gap: 20px; }
.site-footer__row > * { margin: 0; }
.site-footer__row img { display: block; width: 20px; border-radius: var(--radius); }
.social { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 20px; }
.social a { display: inline-block; padding: .75em; line-height: 0; color: var(--c-primary); }
.social a:hover { color: var(--c-text); }
.social .icon { width: 1em; height: 1em; overflow: visible; fill: currentColor; }
.site-footer__copy { margin: 40px 0 0; text-align: center; }

/* 11. Utilità ----------------------------------------------------------------------------
   Valori ripresi dal sito originale. Vengono dopo i componenti per avere la precedenza;
   i margini sono !important perché devono vincere anche sulle regole di .stack. */
.fs-small { font-size: var(--fs-small); }
.fs-normal { font-size: var(--fs-normal); }
.fs-medium { font-size: var(--fs-medium); }
.fs-large { font-size: var(--fs-large); }
.fs-big { font-size: var(--fs-big); }
.fs-huge { font-size: var(--fs-huge); }
.fs-x-large { font-size: var(--fs-x-large); }
.fs-x-huge { font-size: var(--fs-x-huge); }
.fs-xx-huge { font-size: var(--fs-xx-huge); }
.fs-cta { font-size: var(--fs-cta); }
.fs-75 { font-size: var(--fs-75); }
.display { font-weight: 700; line-height: 1; text-transform: uppercase; }
.upper { text-transform: uppercase; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.lh-1 { line-height: 1; }
.lh-116 { line-height: 1.16; }
.ls-n2 { letter-spacing: -2px; }
.ta-left { text-align: left; }
.ta-center { text-align: center; }
.ta-right { text-align: right; }

.c-primary { color: var(--c-primary); }
.c-dark { color: var(--c-dark); }
.c-white { color: var(--c-white); }
.c-white-soft { color: var(--c-white-soft); }
.lc-dark a { color: var(--c-dark); }
.lc-white a { color: var(--c-white); }
.lc-white-soft a { color: var(--c-white-soft); }
.bg-primary { background-color: var(--c-primary); }
.bg-light { background-color: var(--c-light); }
.bg-white { background-color: var(--c-white); }

.gap-0 { --gap: 0px; }
.gap-0 > * { --sg: 0px; }
.gap-5 { --gap: 5px; }
.gap-5 > * { --sg: 5px; }
.gap-10 { --gap: 10px; }
.gap-10 > * { --sg: 10px; }
.gap-13 { --gap: 13px; }
.gap-13 > * { --sg: 13px; }
.gap-15 { --gap: 15px; }
.gap-15 > * { --sg: 15px; }
.gap-20 { --gap: 20px; }
.gap-20 > * { --sg: 20px; }
.gap-24 { --gap: 24px; }
.gap-24 > * { --sg: 24px; }
.gap-35 { --gap: 35px; }
.gap-35 > * { --sg: 35px; }
.gap-40 { --gap: 40px; }
.gap-40 > * { --sg: 40px; }
.gap-60 { --gap: 60px; }
.gap-60 > * { --sg: 60px; }
.gap-70 { --gap: 70px; }
.gap-70 > * { --sg: 70px; }
.gap-90 { --gap: 90px; }
.gap-90 > * { --sg: 90px; }
.cgap-60 { --cgap: 60px; }
.cgap-100 { --cgap: 100px; }
.cgap-140 { --cgap: 140px; }
.nowrap { flex-wrap: nowrap; }
.grow { flex-grow: 1; }
.flow-root { display: flow-root; }
.basis-42 { flex-basis: 42%; }
.jc-center { justify-content: center; }
.jc-end { justify-content: flex-end; }
.jc-between { justify-content: space-between; }
.cw-460 > * { max-width: 460px; }
.cw-550 > * { max-width: 550px; }
.cw-584 > * { max-width: 584px; }
.cw-640 > * { max-width: 640px; }
.cw-660 > * { max-width: 660px; }
.cw-700 > * { max-width: 700px; }
.cw-1160 > * { max-width: 1160px; }

.mt-0 { margin-top: 0 !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-60 { margin-top: 60px !important; }
.mb-24 { margin-bottom: 24px !important; }
.mb-25 { margin-bottom: 25px !important; }
.mb-30 { margin-bottom: 30px !important; }
.mb-40 { margin-bottom: 40px !important; }
.mb-90 { margin-bottom: 90px !important; }

.p-16 { padding: 16px; }
.p-16 > * { --pxp: 16px; }
.p-30 { padding: 30px; }
.p-30 > * { --pxp: 30px; }
.p-40 { padding: 40px; }
.p-40 > * { --pxp: 40px; }
.px-0pc { padding-inline: 0; }
.px-0pc > * { --pxp: 0px; }
.px-10 { padding-inline: 10px; }
.px-10 > * { --pxp: 10px; }
.px-16 { padding-inline: 16px; }
.px-16 > * { --pxp: 16px; }
.px-30 { padding-inline: 30px; }
.px-30 > * { --pxp: 30px; }
.py-40 { padding-block: 40px; }
.py-50 { padding-block: 50px; }
.py-100 { padding-block: 100px; }
.py-130 { padding-block: 130px; }
.pt-9 { padding-top: 9px; }
.pt-30 { padding-top: 30px; }
.pt-45 { padding-top: 45px; }
.pt-54pc { padding-top: 54%; }
.pt-100 { padding-top: 100px; }
.pt-130 { padding-top: 130px; }
.pb-0pc { padding-bottom: 0; }
.pb-30 { padding-bottom: 30px; }
.pb-90 { padding-bottom: 90px; }
.pb-120 { padding-bottom: 120px; }
.pb-140 { padding-bottom: 140px; }
.pb-150 { padding-bottom: 150px; }
.pb-270 { padding-bottom: 270px; }
.pr-10pc { padding-right: 10%; }

.min-h-80vh { min-height: 80vh; }
.min-h-100vh { min-height: 100vh; }
.min-h-100pc { min-height: 100%; }
.min-h-505 { min-height: 505px; }
.min-h-508 { min-height: 508px; }
.min-h-527 { min-height: 527px; }
.min-h-661 { min-height: 661px; }
.min-h-825 { min-height: 825px; }
.h-52 { height: 52px; }
.h-100 { height: 100px; }
.img-h-135 { width: auto; height: 135px; }
.r-6 { border-radius: 6px; }
.r-8 { border-radius: 8px; }
.r-24 { border-radius: 24px; }
.r-pill { border-radius: 9999px; }
.ar-0-75 { aspect-ratio: .75; }
.ar-3-4 { aspect-ratio: 3 / 4; }
.ar-4-3 { aspect-ratio: 4 / 3; }
.fit-cover { object-fit: cover; }
.fit-contain { object-fit: contain; }
.op-50-100 { object-position: 50% 100%; }

/* 12. Responsive ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .site-footer__nav { gap: 15px; }
}

@media (max-width: 781px) {
  .cols, .site-footer__inner { flex-wrap: wrap; }
  .cols:not(.cols--keep) > .col, .site-footer__col { flex-basis: 100% !important; }
  .cols--keep { flex-wrap: nowrap; }
}

@media (max-width: 782px) {
  .nav__toggle { display: flex; }
  .nav__menu {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 100;
    padding: 0 max(var(--gutter), calc((100% - 600px) / 2));
    background: var(--c-white);
    box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .05);
  }
  .nav.is-open .nav__menu { display: block; }
  .nav__item { margin: 0 15px; }
  .nav__link { width: 100%; }
  .mega { position: static; padding: 0; }
  .nav__item--mega:hover .mega,
  .nav__item--mega:focus-within .mega { display: none; }
  .nav__item--mega.is-open .mega { display: block; }
  .mega__inner { flex-wrap: wrap; box-shadow: none; }
  .mega__col { flex-basis: 100%; }
  .mega__col:first-child { border-right: 0; }
}

/* 13. Accessibilità ---------------------------------------------------------------------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: 10px;
  z-index: 1000;
  padding: 10px 15px;
  background: var(--c-white);
  color: var(--c-primary);
}
.skip-link:focus { top: 10px; }

:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; }
.bg-primary :focus-visible, .cover :focus-visible { outline-color: var(--c-white); }

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