/* 4ISP – foglio di stile unico. Colori del marchio: viola #8C4FD3, ciano #00D9EC */
:root {
  --notte: #0d0f1a;
  --notte-2: #151827;
  --notte-3: #1f2336;
  --viola: #8c4fd3;
  --viola-chiaro: #a978e6;
  --ciano: #00d9ec;
  --testo: #1c1f2b;
  --testo-2: #555b6e;
  --bordo: #e3e5ee;
  --tenue: #f5f6fa;
  --bianco: #fff;
  --raggio: 14px;
  --ombra: 0 1px 2px rgb(13 15 26 / .06), 0 8px 24px rgb(13 15 26 / .06);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.65;
  color: var(--testo); background: var(--bianco); -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--viola); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: #6d33b5; }
h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -.015em; margin: 0 0 .6em; color: var(--notte); }
h1 { font-size: clamp(2rem, 4.5vw, 3.4rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 750; }
h3, .h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.centro { text-align: center; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; background: #fff; padding: 8px 12px; }
:focus-visible { outline: 2px solid var(--ciano); outline-offset: 2px; }

/* Bottoni */
.btn {
  display: inline-flex; align-items: center; gap: .5em; padding: .8em 1.4em; border-radius: 999px;
  background: var(--viola); color: #fff; font-weight: 650; font-size: .95rem; text-decoration: none;
  border: 1.5px solid var(--viola); cursor: pointer; transition: background .15s, transform .15s; font-family: inherit;
}
.btn:hover { background: #7a3dc2; color: #fff; transform: translateY(-1px); }
.btn--chiaro { background: #fff; color: var(--notte); border-color: var(--bordo); }
.btn--chiaro:hover { background: var(--tenue); color: var(--notte); }
.btn--vuoto { background: transparent; color: #fff; border-color: rgb(255 255 255 / .35); }
.btn--vuoto:hover { background: rgb(255 255 255 / .08); }
.btn--piccolo { padding: .55em 1.1em; font-size: .88rem; }
.link { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.link-freccia, .card__link { display: inline-flex; align-items: center; gap: .4em; font-weight: 650; text-decoration: none; }

/* Testata */
.testata { background: var(--notte); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid rgb(255 255 255 / .06); }
.testata__riga { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.logo img { width: 118px; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.menu ul a { color: #d7d9e4; text-decoration: none; font-weight: 550; font-size: .97rem; padding: 6px 0; border-bottom: 2px solid transparent; }
.menu ul a:hover, .menu ul a[aria-current] { color: #fff; border-bottom-color: var(--ciano); }
.menu-btn { display: none; background: none; border: 0; padding: 10px; cursor: pointer; }
.menu-btn span { display: block; width: 24px; height: 2px; background: #fff; margin: 5px 0; transition: transform .2s, opacity .2s; }

@media (max-width: 860px) {
  .menu-btn { display: block; }
  .menu {
    position: fixed; inset: 76px 0 auto 0; background: var(--notte); flex-direction: column; align-items: stretch;
    gap: 0; padding: 8px 20px 24px; transform: translateY(-120%); transition: transform .25s; z-index: -1;
    border-bottom: 1px solid rgb(255 255 255 / .08);
  }
  .menu ul { flex-direction: column; gap: 0; }
  .menu ul a { display: block; padding: 14px 0; border-bottom: 1px solid rgb(255 255 255 / .08); font-size: 1.05rem; }
  .menu .btn { margin-top: 18px; justify-content: center; }
  .menu-aperto .menu { transform: none; }
  .menu-aperto .menu-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-aperto .menu-btn span:nth-child(2) { opacity: 0; }
  .menu-aperto .menu-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* Hero home */
.hero {
  background:
    radial-gradient(900px 500px at 85% 10%, rgb(140 79 211 / .35), transparent 60%),
    radial-gradient(700px 400px at 10% 110%, rgb(0 217 236 / .16), transparent 60%),
    var(--notte);
  color: #cfd2df; padding: clamp(56px, 9vw, 112px) 0 clamp(56px, 8vw, 96px); overflow: hidden;
}
.hero h1 { color: #fff; max-width: 13em; }
.evidenza { background: linear-gradient(90deg, var(--ciano), var(--viola-chiaro)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__griglia { display: grid; grid-template-columns: 1.25fr 1fr; gap: 56px; align-items: center; }
.hero__lead { font-size: 1.2rem; max-width: 34em; margin-bottom: 2em; }
.hero__azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__pilastri { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.hero__pilastri a {
  display: flex; gap: 16px; align-items: center; padding: 18px 20px; border-radius: var(--raggio);
  background: rgb(255 255 255 / .04); border: 1px solid rgb(255 255 255 / .09); color: #fff; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.hero__pilastri a:hover { background: rgb(255 255 255 / .08); border-color: rgb(0 217 236 / .5); }
.hero__pilastri .ico { width: 28px; height: 28px; color: var(--ciano); }
.hero__pilastri span { display: flex; flex-direction: column; font-size: .9rem; color: #a9adbf; }
.hero__pilastri strong { color: #fff; font-size: 1.05rem; font-weight: 650; }
.occhiello { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--viola); margin-bottom: .8em; }
.hero .occhiello { color: var(--ciano); }
@media (max-width: 900px) { .hero__griglia { grid-template-columns: 1fr; gap: 40px; } }

/* Numeri */
.numeri { background: var(--notte-2); color: #fff; padding: 36px 0; }
.numeri__griglia { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.numeri strong { display: block; font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800; line-height: 1.1; color: var(--ciano); }
.numeri span { color: #a9adbf; font-size: .9rem; }
@media (max-width: 640px) { .numeri__griglia { grid-template-columns: repeat(2, 1fr); row-gap: 28px; } }

/* Sezioni */
.sezione { padding: clamp(56px, 8vw, 96px) 0; }
.sezione--tenue { background: var(--tenue); }
.titolo-sezione { margin-bottom: 1.3em; }
.due-colonne { display: grid; grid-template-columns: 1fr 1.3fr; gap: 56px; align-items: start; }
@media (max-width: 800px) { .due-colonne { grid-template-columns: 1fr; gap: 24px; } }

/* Griglie e card */
.griglia { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 24px; }
.griglia--2 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.griglia--4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--bordo); border-radius: var(--raggio);
  overflow: hidden; text-decoration: none; color: var(--testo); box-shadow: var(--ombra); transition: transform .18s, box-shadow .18s;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgb(13 15 26 / .06), 0 16px 36px rgb(13 15 26 / .1); color: var(--testo); }
.card__img { aspect-ratio: 16 / 10; background: var(--notte-3); overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.card:hover .card__img img { transform: scale(1.04); }
.card__corpo { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.card__corpo h3 { margin-bottom: .4em; }
.card__corpo p { color: var(--testo-2); font-size: .95rem; flex: 1; }
.card__link { color: var(--viola); font-size: .92rem; margin-top: auto; }

.area {
  display: flex; flex-direction: column; padding: 28px; border-radius: var(--raggio); background: #fff;
  border: 1px solid var(--bordo); text-decoration: none; color: var(--testo); transition: border-color .15s, transform .15s, box-shadow .15s;
}
.area:hover { border-color: var(--viola); transform: translateY(-3px); box-shadow: var(--ombra); color: var(--testo); }
.area p { color: var(--testo-2); font-size: .95rem; }
.area__ico {
  width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px;
  background: linear-gradient(135deg, rgb(140 79 211 / .14), rgb(0 217 236 / .14)); color: var(--viola);
}
.area__ico .ico { width: 26px; height: 26px; }
.area__voci { font-size: .85rem !important; color: var(--testo-2); border-top: 1px solid var(--bordo); padding-top: 12px; }
.area .card__link { margin-top: auto; }

/* Intestazione pagine interne */
.intesta {
  position: relative; background: radial-gradient(800px 400px at 90% 0%, rgb(140 79 211 / .3), transparent 60%), var(--notte);
  color: #cfd2df; padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px); overflow: hidden;
}
.intesta h1 { color: #fff; max-width: 18em; position: relative; }
.intesta--img .intesta__sfondo { position: absolute; inset: 0; opacity: .22; }
.intesta--img .intesta__sfondo img { width: 100%; height: 100%; object-fit: cover; }
.intesta--img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--notte) 30%, rgb(13 15 26 / .6)); }
.intesta .wrap { position: relative; z-index: 1; }
.intesta__lead { font-size: 1.15rem; max-width: 40em; margin: 0; }
.intesta__meta { margin: 0; color: #a9adbf; }
.briciole { font-size: .88rem; color: #8d92a8; margin-bottom: 1.2em; }
.briciole a { color: #c4c7d6; text-decoration: none; }
.briciole a:hover { color: var(--ciano); }

/* Testo lungo */
.prosa { max-width: 780px; padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 72px); }
.prosa--nuda { padding: 0; }
.prosa h2 { font-size: 1.6rem; margin-top: 1.6em; }
.prosa h3, .prosa h4, .prosa h5 { margin-top: 1.4em; }
.prosa ul, .prosa ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prosa li { margin-bottom: .45em; }
.prosa li::marker { color: var(--viola); }
.prosa strong { color: var(--notte); }
.prosa img { display: inline-block; max-height: 90px; width: auto; margin: 8px 16px 8px 0; vertical-align: middle; }
.prosa table { width: 100%; border-collapse: collapse; font-size: .92rem; margin-bottom: 1.5em; display: block; overflow-x: auto; }
.prosa th, .prosa td { border: 1px solid var(--bordo); padding: 8px 10px; text-align: left; vertical-align: top; }
.prosa > p:first-child { font-size: 1.12rem; }

.lista-link { list-style: none; padding: 0 !important; }
.lista-link a { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--bordo); text-decoration: none; font-weight: 550; }
.lista-link--colonne { columns: 2 340px; column-gap: 40px; }
.lista-link--colonne li { break-inside: avoid; }
.zone { list-style: none; padding: 0; margin: 0 0 56px; display: flex; flex-wrap: wrap; gap: 10px; }
.zone a { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border-radius: 999px; background: var(--tenue); border: 1px solid var(--bordo); text-decoration: none; color: var(--notte); font-weight: 600; }
.zone a:hover { border-color: var(--viola); color: var(--viola); }

/* Chi siamo */
.soci { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.soci a { display: flex; gap: 16px; align-items: center; padding: 14px 16px; border: 1px solid var(--bordo); border-radius: var(--raggio); text-decoration: none; color: var(--notte); font-weight: 650; }
.soci a:hover { border-color: var(--viola); }
.soci span:last-child { display: flex; flex-direction: column; }
.soci small { color: var(--testo-2); font-weight: 500; display: inline-flex; gap: 4px; align-items: center; }
.soci__iniziali { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; background: linear-gradient(135deg, var(--viola), var(--ciano)); flex: none; }

/* Contatti */
.contatti { margin-bottom: 24px; }
.contatto { display: flex; gap: 18px; align-items: flex-start; padding: 26px; border: 1px solid var(--bordo); border-radius: var(--raggio); text-decoration: none; color: var(--notte); font-size: 1.1rem; font-weight: 600; }
a.contatto:hover { border-color: var(--viola); color: var(--notte); }
.contatto .ico { width: 28px; height: 28px; color: var(--viola); margin-top: 4px; }
.contatto small { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--testo-2); font-weight: 600; margin-top: 4px; }
.contatto span { font-weight: 550; }

/* Brand */
.brand { padding: 56px 0; border-top: 1px solid var(--bordo); }
.brand__lista { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 22px 40px; }
.brand__lista img { height: 40px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1); opacity: .7; transition: filter .2s, opacity .2s; mix-blend-mode: multiply; }
.brand__lista img:hover { filter: none; opacity: 1; }

/* CTA e piede */
.cta-finale { padding: 0 0 72px; background: var(--bianco); }
.home .cta-finale, .cta-finale { padding-top: 8px; }
.cta-finale__box {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px;
  background: linear-gradient(120deg, var(--viola), #5d2d9c 60%, #1d6f9b); color: #eee6fb;
  border-radius: 20px; padding: clamp(28px, 5vw, 48px);
  max-width: calc(var(--wrap) - 40px);
}
.cta-finale h2 { color: #fff; margin-bottom: .3em; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.cta-finale p { margin: 0; }
.cta-finale__azioni { display: flex; flex-wrap: wrap; gap: 12px; }
.cta-finale .btn { background: #fff; color: var(--notte); border-color: #fff; }
.cta-finale .btn--chiaro { background: transparent; color: #fff; border-color: rgb(255 255 255 / .5); }
@media (max-width: 640px) { .cta-finale__box { margin: 0 16px; width: auto; } }

.piede { background: var(--notte); color: #a9adbf; padding: 64px 0 0; font-size: .93rem; }
.piede__griglia { display: grid; grid-template-columns: 1.3fr 1.2fr 1fr 1fr; gap: 40px; }
.piede h3 { color: #fff; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 1.2em; }
.piede a, .piede .link { color: #d7d9e4; text-decoration: none; }
.piede a:hover, .piede .link:hover { color: var(--ciano); }
.piede ul { list-style: none; padding: 0; margin: 0; }
.piede li { margin-bottom: .5em; }
.piede strong { color: #d7d9e4; font-weight: 600; }
.piede img { width: 110px; margin-bottom: 18px; }
.piede__social { display: flex; gap: 14px; }
.piede__social .ico { width: 22px; height: 22px; }
.piede__fondo { border-top: 1px solid rgb(255 255 255 / .08); margin-top: 48px; padding-top: 22px; padding-bottom: 28px; font-size: .85rem; }
@media (max-width: 900px) { .piede__griglia { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .piede__griglia { grid-template-columns: 1fr; } }

/* Banner cookie */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin-left: auto;
  background: var(--notte-2); color: #d7d9e4; border: 1px solid rgb(255 255 255 / .1); border-radius: var(--raggio);
  padding: 18px 20px; box-shadow: 0 16px 40px rgb(0 0 0 / .35); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: .92rem;
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; flex: 1 1 260px; }
.cookie a { color: var(--ciano); }
.cookie div { display: flex; gap: 8px; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }
.card__corpo p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 14px; }
.prosa { overflow-wrap: anywhere; }
.prosa table { overflow-wrap: normal; }
.piede__fondo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; }
.piede__fondo p { margin: 0; }