/* CHI SIAMO — pagina disegnata (anteprima/chi-siamo.html). Mobile-first: la
   base e' 390, il tablet entra da 760, il desktop da 1040. Solo i token di
   v2.css; nessuna libreria. Il movimento (sigillo e orbita) e' LENTO per
   scelta della Direzione — un'orbita veloce e' gia' stata bocciata — e si
   spegne con prefers-reduced-motion. */

.cs-corpo { background: var(--notte) }
.cs .testa p { font-size: 15.5px }

/* reveal: solo se chi-siamo.js mette .cs-js (cioe' se il movimento e' gradito) */
.cs-js .rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1) }
.cs-js .rv.in { opacity: 1; transform: none }

.cs-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: grid; place-items: center; background: rgba(22, 99, 224, .1); color: var(--blu) }
.cs-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.notte .cs-ico { background: rgba(34, 211, 238, .1); color: var(--ciano) }

/* ============ 1 · APERTURA ============ */
.cs-apertura { padding-block: 34px 44px; overflow: hidden; isolation: isolate }
.cs-cielo { position: absolute; inset: 0; z-index: -1; pointer-events: none }
.cs-cielo i { position: absolute; border-radius: 50%; filter: blur(70px) }
.cs-cielo .a { width: 360px; height: 360px; right: -140px; top: 40px; background: rgba(47, 123, 255, .35) }
.cs-cielo .b { width: 260px; height: 260px; left: -120px; bottom: -80px; background: rgba(34, 211, 238, .16) }
.cs-apertura-griglia { display: grid; gap: 26px; align-items: center; position: relative }
.cs-claim { display: grid; gap: 16px }
.cs-claim h1 { font-size: clamp(38px, 11vw, 74px); line-height: 1.02; letter-spacing: -.035em }
.cs-claim h1 span { display: block; background: linear-gradient(100deg, #7FB2FF 0%, #22D3EE 70%); -webkit-background-clip: text; background-clip: text; color: transparent }
.cs-sotto { font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .8); max-width: 54ch }
.cs-claim .cta-row { margin-top: 4px }
.cs-numeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin-top: 8px; border-radius: var(--r); overflow: hidden; background: var(--linea-notte); border: 1px solid var(--linea-notte) }
.cs-numeri div { background: rgba(11, 18, 38, .92); padding: 14px 16px; display: grid; gap: 2px }
.cs-numeri b { font-family: var(--display); font-size: 26px; letter-spacing: -.02em; line-height: 1.1 }
.cs-numeri small { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .72) }

.cs-sigillo { position: relative; width: min(100%, 330px); aspect-ratio: 1; justify-self: center; order: -1 }
.cs-sigillo svg { width: 100%; height: 100%; overflow: visible }
.cs-sigillo text { font-family: var(--mono); font-size: 13.2px; letter-spacing: .18em; font-weight: 600 }
.cs-giro-fuori text { fill: rgba(255, 255, 255, .78) }
.cs-giro-dentro text { fill: #7FE6F5; font-size: 12.4px }
.cs-giro { transform-origin: 200px 200px; transform-box: view-box }
.cs-scintille circle { fill: var(--ciano); filter: drop-shadow(0 0 6px rgba(34, 211, 238, .9)) }
.cs-cuore { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; text-align: center }
.cs-cuore img { width: 34%; height: auto }
.cs-cuore span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); line-height: 1.5 }

@media (prefers-reduced-motion: no-preference) {
  .cs-giro-fuori { animation: cs-gira 90s linear infinite }
  .cs-giro-dentro { animation: cs-gira 120s linear infinite reverse }
  .cs-scintille { animation: cs-brilla 4s ease-in-out infinite }
}
@keyframes cs-gira { to { transform: rotate(360deg) } }
@keyframes cs-brilla { 50% { opacity: .35 } }

/* ============ 2 · IL CREDO ============ */
.cs-credo { padding-block: 48px }
.cs-credo-griglia { display: grid; gap: 16px }
.cs-promessa { position: relative; border-radius: 22px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--linea); background: #fff; box-shadow: 0 30px 60px -48px rgba(10, 21, 38, .45); overflow: hidden }
.cs-promessa::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--grad) }
.cs-fedelta { background: linear-gradient(180deg, #F2FBFE 0%, #fff 55%) }
.cs-indice { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--blu) }
.cs-indice span { font-family: var(--display); font-weight: 800; font-size: 13px; color: #fff; background: var(--inchiostro); border-radius: 8px; padding: 3px 7px; letter-spacing: 0 }
.cs-promessa h3 { font-size: clamp(25px, 6.6vw, 34px) }
.cs-promessa-sotto { color: var(--testo-2); font-size: 15.5px }

/* micro-grafico: il foglio scritto prima */
.cs-foglio { margin-top: 4px; border-radius: 16px; background: var(--carta); border: 1px solid var(--linea); padding: 14px; display: grid; gap: 8px; position: relative }
.cs-foglio-testa { display: flex; align-items: center; gap: 8px; font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--inchiostro) }
.cs-foglio-testa i { width: 9px; height: 9px; border-radius: 50%; background: var(--verde); box-shadow: 0 0 0 4px rgba(34, 197, 94, .18) }
.cs-foglio-testa em { margin-left: auto; font-style: normal; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--blu); border-radius: 999px; padding: 4px 8px }
.cs-foglio-riga { display: flex; justify-content: space-between; gap: 10px; align-items: center; background: #fff; border-radius: 10px; padding: 10px 12px; font-size: 14px; color: var(--testo-2); border: 1px solid var(--linea) }
.cs-foglio-riga b { font-family: var(--display); font-size: 13px; color: var(--inchiostro); white-space: nowrap }
.cs-foglio-riga b.cs-ok::before { content: "✓"; display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; background: rgba(34, 197, 94, .16); color: #15803D; font-size: 11px }
.cs-foglio-timbro { justify-self: end; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--blu); border: 1.5px dashed rgba(22, 99, 224, .5); border-radius: 8px; padding: 5px 9px; transform: rotate(-2deg) }

/* micro-grafico: la linea del tempo, accesa DOPO la consegna */
.cs-tempo { list-style: none; margin: 4px 0 0; padding: 18px 14px 14px; border-radius: 16px; background: var(--notte); display: grid; grid-template-columns: repeat(4, 1fr); position: relative; overflow: hidden }
.cs-tempo::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 26px; height: 2px; background: rgba(255, 255, 255, .18) }
.cs-tempo::after { content: ""; position: absolute; left: 62.5%; right: 0; top: 25px; height: 4px; border-radius: 4px; background: var(--grad); box-shadow: 0 0 16px rgba(34, 211, 238, .7) }
.cs-tempo li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; text-align: center; font-size: 12px; line-height: 1.25; color: rgba(255, 255, 255, .72) }
.cs-tempo i { width: 18px; height: 18px; border-radius: 50%; background: var(--notte-3); border: 2px solid rgba(255, 255, 255, .35) }
.cs-tempo-consegna i { background: #fff; border-color: #fff }
.cs-tempo-dopo i { background: var(--ciano); border-color: var(--ciano); box-shadow: 0 0 0 6px rgba(34, 211, 238, .18) }
.cs-tempo-dopo span { color: #fff; font-weight: 700 }
@media (prefers-reduced-motion: no-preference) {
  .cs-tempo-dopo i { animation: cs-pulsa 2.6s ease-in-out infinite }
}
@keyframes cs-pulsa { 50% { box-shadow: 0 0 0 11px rgba(34, 211, 238, .05) } }

.cs-prove { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px }
.cs-prove li { display: flex; gap: 12px; align-items: flex-start }
.cs-prove p { font-size: 15px; line-height: 1.5; color: var(--testo-2); padding-top: 2px }
.cs-prove b { color: var(--inchiostro) }

/* ============ 3 · L'ECOSISTEMA ============ */
.cs-eco { padding-block: 48px; overflow: hidden }
.cs-eco-griglia { display: grid; gap: 26px; align-items: center }
.cs-orbita { --r: 128px; --nodo: 46px; position: relative; width: calc(var(--r) * 2 + var(--nodo) + 8px); aspect-ratio: 1; justify-self: center; max-width: 100% }
.cs-orbita-guida { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none }
.cs-orbita-guida.g1 { width: calc(var(--r) * 2); height: calc(var(--r) * 2); border: 1px dashed rgba(34, 211, 238, .35) }
.cs-orbita-guida.g2 { width: calc(var(--r) * 1.1); height: calc(var(--r) * 1.1); border: 1px solid rgba(255, 255, 255, .08); background: radial-gradient(circle, rgba(47, 123, 255, .28), transparent 70%) }
.cs-anello { position: absolute; left: 50%; top: 50%; width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1) }
.cs-raggi { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible }
.cs-raggi line { stroke: rgba(127, 178, 255, .22); stroke-width: .35; vector-effect: non-scaling-stroke; stroke-dasharray: 3 4 }
.cs-nodo { position: absolute; left: 50%; top: 50%; width: var(--nodo); height: var(--nodo); transform: translate(-50%, -50%) rotate(calc(var(--i) * 40deg - 90deg)) translateX(var(--r)) rotate(calc(90deg - var(--i) * 40deg)); outline: none }
.cs-nodo-dentro { display: grid; justify-items: center; width: 100%; height: 100% }
.cs-nodo i { width: var(--nodo); height: var(--nodo); border-radius: 50%; display: grid; place-items: center; background: var(--notte-2); border: 1.5px solid var(--c); color: var(--c); box-shadow: 0 0 0 5px rgba(11, 18, 38, .9), 0 0 22px -4px var(--c); transition: transform .3s ease, background .3s ease }
.cs-nodo i svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round }
.cs-nodo b { display: none }
.cs-nodo.acceso i, .cs-nodo:hover i { transform: scale(1.14); background: var(--c); color: var(--notte) }
.prima { --c: #6FA6FF }
.dopo { --c: #22D3EE }
.territorio { --c: #E2B65A }
.cs-orbita-centro { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(var(--r) * .86); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; justify-items: center; gap: 2px; background: radial-gradient(circle at 35% 30%, #23366A, var(--notte) 72%); border: 1px solid rgba(127, 178, 255, .4); box-shadow: 0 0 60px -10px rgba(47, 123, 255, .8) }
.cs-orbita-centro img { width: calc(var(--r) * .5); height: auto }
.cs-orbita-centro span { font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--ciano) }
@media (prefers-reduced-motion: no-preference) {
  /* 80 secondi a giro: si vede che si muove, non si insegue con gli occhi */
  .cs-anello { animation: cs-gira 80s linear infinite }
  .cs-nodo-dentro { animation: cs-gira 80s linear infinite reverse }
  .cs-orbita.ferma .cs-anello, .cs-orbita.ferma .cs-nodo-dentro { animation-play-state: paused }
}

.cs-mappa { display: grid; gap: 18px }
.cs-gruppo { display: grid; gap: 8px; align-content: start }
.cs-gruppo-titolo { display: flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--c) }
.cs-gruppo-titolo i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c) }
.cs-gruppo ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.cs-gruppo a { display: grid; gap: 2px; padding: 12px 40px 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--linea-notte); border-left: 3px solid var(--c); position: relative; transition: background .25s ease, transform .25s ease }
.cs-gruppo a::after { content: "→"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--c); font-weight: 700 }
.cs-gruppo a:hover, .cs-gruppo a.acceso { background: rgba(255, 255, 255, .09); transform: translateX(3px) }
.cs-gruppo b { font-family: var(--display); font-size: 15.5px }
.cs-gruppo small { font-size: 13.5px; color: rgba(255, 255, 255, .72) }

/* ============ 4 · GLI IMPRENDITORI ============ */
.cs-fondatori { padding-block: 48px }
.cs-fond-griglia { display: grid; gap: 16px }
.cs-persona { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: center; background: #fff; border-radius: 22px; padding: 12px; border: 1px solid var(--linea); box-shadow: 0 24px 50px -44px rgba(10, 21, 38, .5) }
.cs-ritratto { aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: var(--notte-2) }
.cs-ritratto img { width: 100%; height: 100%; object-fit: cover }
.cs-ritratto-simone img { transform: scale(1.55); transform-origin: 42% 40% }
.cs-ritratto-ivan img { object-position: 62% 30% }
.cs-persona-testo { display: grid; gap: 4px; align-content: center }
.cs-dal { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blu) }
.cs-dal b { font-family: var(--display); font-size: 13px; letter-spacing: 0 }
.cs-persona h3 { font-size: 22px }
.cs-ruolo { font-weight: 700; font-size: 14px; color: var(--inchiostro) }
.cs-persona-testo p:last-child { font-size: 14.5px; color: var(--testo-2); line-height: 1.45 }
.cs-visione { margin: 0; border-radius: 22px; padding: 24px 22px; background: var(--notte); color: #fff; display: grid; gap: 14px; position: relative; overflow: hidden }
.cs-visione::after { content: ""; position: absolute; right: -60px; bottom: -80px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(34, 211, 238, .28), transparent 70%); pointer-events: none }
.cs-virgolette { width: 36px; height: 27px; fill: var(--ciano) }
.cs-visione blockquote { margin: 0 }
.cs-visione blockquote p { font-family: var(--display); font-weight: 700; font-size: clamp(21px, 5.6vw, 28px); line-height: 1.22; letter-spacing: -.02em }
.cs-visione figcaption { font-size: 14px; color: rgba(255, 255, 255, .75); line-height: 1.5 }
.cs-visione figcaption b { color: #fff }
.cs-link { justify-self: start; font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ciano); position: relative; z-index: 1; padding: 6px 0 }
.cs-link:hover { text-decoration: underline; text-underline-offset: 4px }
.cs-link-chiaro { color: var(--blu); margin-top: auto; padding-top: 10px }

/* ============ 5 · I PARTNER ============ */
.cs-partner { padding-block: 48px }
.cs-partner-testa { display: grid; gap: 4px; margin-bottom: 18px }
.cs-partner-testa .testa { margin: 0 }
.cs-strade { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.cs-strade a { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "ico n freccia" "ico b freccia" "ico s freccia"; column-gap: 14px; row-gap: 2px; align-items: center; padding: 16px; border-radius: 18px; border: 1px solid var(--linea); background: #fff; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease }
.cs-strade a:hover { border-color: rgba(22, 99, 224, .45); box-shadow: 0 20px 40px -30px rgba(22, 99, 224, .6); transform: translateY(-2px) }
.cs-strade .cs-ico { grid-area: ico; width: 46px; height: 46px }
.cs-strada-n { grid-area: n; font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--blu) }
.cs-strade b { grid-area: b; font-family: var(--display); font-size: 16.5px; color: var(--inchiostro); line-height: 1.2 }
.cs-strade small { grid-area: s; font-size: 14px; color: var(--testo-2) }
.cs-strade .cs-freccia { grid-area: freccia; color: var(--blu); font-weight: 700; font-size: 18px }

/* ============ 6 · CHIUSURA ============ */
.cs-chiusura { padding-block: 48px 40px }
.cs-porte { display: grid; gap: 10px }
.cs-porte a { display: flex; align-items: center; gap: 14px; padding: 15px 16px; border-radius: 18px; background: linear-gradient(160deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)); border: 1px solid rgba(255, 255, 255, .14); transition: background .25s ease }
.cs-porte a:hover { background: rgba(255, 255, 255, .12) }
.cs-porte a > span:nth-child(2) { display: grid; gap: 2px; flex: 1 }
.cs-porte b { font-family: var(--display); font-size: 16px }
.cs-porte small { font-size: 13.5px; color: rgba(255, 255, 255, .72) }
.cs-porte .cs-freccia { color: var(--ciano); font-weight: 700 }
.cs-mail { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; font-size: 15px }
.cs-mail a { color: var(--ciano); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(34, 211, 238, .4); overflow-wrap: anywhere }
.cs-societa { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linea-notte); font-size: 12.5px; line-height: 1.6; color: rgba(255, 255, 255, .68) }

/* ============ TABLET ≥ 760 ============ */
@media (min-width: 760px) {
  .cs-apertura { padding-block: 56px 64px }
  .cs-apertura-griglia { grid-template-columns: 1.15fr .85fr; gap: 32px }
  .cs-sigillo { order: 0; width: 100% }
  .cs-numeri { grid-template-columns: repeat(4, 1fr) }
  .cs-credo, .cs-eco, .cs-fondatori, .cs-partner, .cs-chiusura { padding-block: 72px }
  .cs-credo-griglia { grid-template-columns: 1fr 1fr; gap: 20px }
  .cs-promessa { padding: 28px 26px 26px }
  .cs-orbita { --r: 168px; --nodo: 54px }
  .cs-mappa { grid-template-columns: 1fr 1fr; gap: 20px }
  .cs-gruppo.dopo { grid-row: span 2 }
  .cs-fond-griglia { grid-template-columns: 1fr 1fr }
  .cs-persona { grid-template-columns: 1fr; padding: 12px 12px 20px; align-content: start }
  .cs-persona-testo { padding-inline: 8px }
  .cs-ritratto { aspect-ratio: 1 }
  .cs-visione { grid-column: 1 / -1; padding: 32px }
  .cs-partner-testa { grid-template-columns: 1fr auto; align-items: end; gap: 24px; margin-bottom: 24px }
  .cs-strade { grid-template-columns: 1fr 1fr; gap: 14px }
  .cs-porte { grid-template-columns: repeat(3, 1fr) }
}

/* ============ DESKTOP ≥ 1040 ============ */
@media (min-width: 1040px) {
  .cs-apertura { padding-block: 72px 84px; min-height: 620px; display: grid; align-items: center }
  .cs-apertura-griglia { grid-template-columns: 1.1fr .9fr; gap: 48px }
  .cs-eco-griglia { grid-template-columns: 1.05fr .95fr; gap: 40px }
  .cs-orbita { --r: 200px; --nodo: 56px; width: calc(var(--r) * 2 + 150px) }
  /* sul desktop i nodi dicono il loro nome: 9 nodi su un raggio di 200 px
     stanno a 137 px l'uno dall'altro, le etichette ne occupano al piu' 112 */
  .cs-nodo b { display: block; margin-top: 8px; max-width: 112px; padding: 3px 9px; border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 12.5px; line-height: 1.2; text-align: center; white-space: nowrap; color: #fff; background: rgba(17, 27, 52, .92); border: 1px solid rgba(255, 255, 255, .14) }
  .cs-mappa { grid-template-columns: 1fr; gap: 16px }
  .cs-gruppo.dopo { grid-row: auto }
  .cs-gruppo ul { grid-template-columns: 1fr 1fr }
  .cs-gruppo a { padding: 11px 34px 11px 13px }
  .cs-fond-griglia { grid-template-columns: 1fr 1fr 1.2fr; align-items: stretch }
  .cs-visione { grid-column: auto; align-content: center }
  .cs-strade { grid-template-columns: repeat(4, 1fr) }
  .cs-strade a { grid-template-columns: 1fr; grid-template-rows: auto auto auto 1fr auto; grid-template-areas: "ico" "n" "b" "s" "freccia"; row-gap: 6px; align-items: start; padding: 20px; height: 100% }
  .cs-strade .cs-ico { margin-bottom: 8px }
  .cs-strade .cs-freccia { margin-top: 6px }
}