/* SharKom — hero animata in SVG (generato da build.py: non modificare a mano) */
.hero__svg .lem__loop { fill: none; stroke: #b7cddc; stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.hero__svg .lem__label { font: 400 28px/1 var(--font-sans, Inter, system-ui, sans-serif); fill: var(--c-accent-mist); letter-spacing: .02em; }
.hero__svg .lem__cons { font: 800 28px/1 var(--font-sans, Inter, system-ui, sans-serif); fill: #fff; letter-spacing: .1em; }
.hero__svg .cons__ring { fill: none; stroke: #fff; stroke-width: 3; }
.hero__svg .cons__dot { fill: #fff; }
.hero__svg .orb__name { font: 800 30px/1 var(--font-sans, Inter, system-ui, sans-serif); fill: #fff; letter-spacing: .08em; }
.hero__svg .lem__rule { stroke: var(--c-accent-mist); stroke-width: 1.5; }
.hero__svg .orb__arc path { fill: none; stroke: var(--c-accent-mist); stroke-width: 13; stroke-linecap: butt; }
.hero__svg .orb__arc path:last-child { stroke-linecap: round; }
.hero__svg .orb__hit { fill: transparent; stroke: none; }
.hero__svg .orb__link, .hero__svg .orb__arrow { cursor: pointer; outline: none; }
.hero__svg .orb__link .orb__icon { transition: stroke .2s; }
.hero__svg .orb__link:hover .orb__icon, .hero__svg .orb__link:focus-visible .orb__icon { stroke: #fff; }
.hero__svg .orb__tip { font: 700 20px/1 var(--font-sans, Inter, system-ui, sans-serif); fill: var(--c-accent-mist); letter-spacing: .08em; transition: fill .2s, opacity .2s; pointer-events: none; }
.hero__svg .orb__link:hover .orb__tip, .hero__svg .orb__link:focus-visible .orb__tip { fill: #fff; opacity: 1 !important; }
.hero__svg .orb__arrow-h { fill: none; stroke: var(--c-accent-mist); stroke-width: 13; stroke-linecap: butt; }
.hero__svg .orb__arrow-w { stroke-linecap: round; }
.hero__svg .orb__arrow.is-on .orb__arrow-h { animation: orb-arrow 1.6s ease-in-out infinite; }
.hero__svg .orb__icon { fill: none; stroke: var(--c-accent-mist); stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.hero__svg--m .lem__loop, .hero__svg--m .orb__arc path { stroke-width: 7; }
.hero__svg--m .lem__label { font-size: 15px; }
.hero__svg--m .lem__cons { font-size: 15px; }
.hero__svg--m .cons__ring { stroke-width: 2; }
.hero__svg--m .orb__name { font-size: 15px; }
.hero__svg--m .orb__tip { font-size: 12px; letter-spacing: .04em; }
.hero__svg--m .lem__rule { stroke-width: 1; }
.hero__svg--m .orb__icon { stroke-width: 1.5; }
.hero__svg--m .orb__arrow-h { stroke-width: 7; }
.hero__svg .lbl-m { font-size: 14px; letter-spacing: .07em; }
.hero__svg { --bg-l: #eef3f8; --ink: #1a4466; --sky: #8fb8d4; --mist: #c8dae6; --shadow: #d3dfea; --ground: #dce6ef; --under: #cdd9e5; --green: #5cbf8a; --green2: #3f9f6f; --teal: #3bb3a4; --amber: #f2b84b; --sand: #f6d27a; --coral: #ef7d6a; }
.hero__svg .scn { opacity: 0; }
.hero__svg .o { stroke: var(--ink); stroke-width: 4; stroke-linejoin: round; stroke-linecap: round; }
.hero__svg .o3 { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.hero__svg .fw { fill: #fff; }
.hero__svg .fn { fill: var(--ink); }
.hero__svg .fb { fill: var(--c-brand); }
.hero__svg .fs { fill: var(--sky); }
.hero__svg .fm { fill: var(--mist); }
.hero__svg .fg { fill: var(--green); }
.hero__svg .fg2 { fill: var(--green2); }
.hero__svg .ft { fill: var(--teal); }
.hero__svg .fa { fill: var(--amber); }
.hero__svg .fsa { fill: var(--sand); }
.hero__svg .fc { fill: var(--coral); }
.hero__svg .fsh { fill: var(--shadow); }
.hero__svg .fgr { fill: var(--ground); }
.hero__svg .fun { fill: var(--under); }
.hero__svg .wipe { fill: var(--bg-l); }
.hero__svg .ln-s { fill: none; stroke: var(--sky); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hero__svg .ln-t { fill: none; stroke: var(--teal); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.hero__svg .ln-a { fill: none; stroke: var(--amber); stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; }
.hero__svg .ln-k { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.hero__svg .ln-w { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hero__svg .flow-w { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 20; }
.hero__svg .flow-t { fill: none; stroke: var(--teal); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 16; }
.hero__svg .dome { fill: rgba(143, 184, 212, .18); stroke: var(--teal); stroke-width: 5; }
.hero__svg .lbl { font: 800 22px/1 var(--font-sans, Inter, system-ui, sans-serif); fill: var(--ink); letter-spacing: .06em; }
.hero__svg .lbl.bad { fill: #c4513a; }
.hero__svg .lbl.ok { fill: #2f8a5c; }
.hero__svg .lbl.wip { fill: #b07a12; }
.hero__svg .lbl-title { font-size: 30px; letter-spacing: .08em; }
.hero__svg .is-night .lbl { fill: #fff; }
.hero__svg .is-night .lbl-line { stroke: #fff; }
.hero__svg .is-night .lbl-dot { fill: #fff; }
.hero__svg .lbl { transition: fill .6s; }
.hero__svg .lbl-line { fill: none; stroke: var(--ink); stroke-width: 2; }
.hero__svg .lbl-dot { fill: var(--ink); }
.hero__svg .ic-w { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hero__svg .pill-t { font: 800 17px/1 var(--font-sans, Inter, system-ui, sans-serif); fill: #fff; letter-spacing: .04em; }
.hero__svg .coin-t { font: 800 38px/1 var(--font-sans, Inter, system-ui, sans-serif); fill: var(--ink); }
.hero__svg [data-pop] { transform-box: fill-box; transform-origin: 50% 100%; }
.hero__svg [data-pop][data-o="c"] { transform-origin: 50% 50%; }
@font-face { font-family: 'Exo 2'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/fonts/exo2-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; }
.hero__stage, .stage { --font-sans: 'Exo 2', system-ui, sans-serif; }
@keyframes orb-arrow { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: .3; transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .orb__arrow.is-on .orb__arrow-h { animation: none; } }

/* --- Hero animata (sostituisce il video) ----------------------------------- */
.hero.hero--anim { display: block; min-height: 0; padding: calc(var(--sp-4) * 2 + 2.75rem) 0 0; background: var(--c-brand); }
/* Fasce ai lati dell'animazione: statiche, prendono il colore della scena (e del suo terreno) */
@property --band-bg     { syntax: '<color>'; inherits: false; initial-value: #225580; }
@property --band-ground { syntax: '<color>'; inherits: false; initial-value: #225580; }
@property --band-gy     { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
.hero--anim .hero__stage {
  width: 100%;
  background: linear-gradient(to bottom, var(--band-bg) 0 var(--band-gy), var(--band-ground) var(--band-gy) 100%);
  transition: --band-bg .6s ease, --band-ground .6s ease, --band-gy .6s ease;
}
.hero__svg { display: block; width: 100%; height: auto; margin: 0 auto; cursor: pointer; background: var(--c-brand); }
.hero__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hero__svg { -webkit-tap-highlight-color: transparent; outline: none; }
.hero__svg:focus, .hero__svg:focus-visible { outline: none; }
.hero__svg--d { width: min(100%, calc((100svh - 4.75rem) * 16 / 9)); aspect-ratio: 16 / 9; }
.hero__svg--m { display: none; aspect-ratio: 9 / 16; }
.hero--anim .hero__content { padding: var(--sp-8) var(--sp-6) 0; }
/* Illustrazioni animate nelle pagine servizio: più larghe del testo, centrate */
.service-figure { position: relative; left: 50%; transform: translateX(-50%); width: min(68rem, calc(100vw - 2rem)); margin: var(--sp-8) 0 var(--sp-12); border-radius: 12px; overflow: hidden; }
.service-figure .hero__svg--d, .service-figure .hero__svg--m { width: 100%; background: var(--c-bg-light); }
@media (max-width: 768px) {
  .hero.hero--anim { background: var(--c-brand); }
  .hero__svg--m { width: min(100%, calc((100svh - 4.75rem) * 9 / 16)); }
  .hero__svg--d { display: none; }
  .hero__svg--m { display: block; }
}
/* Hero a schermo intero in qualsiasi formato: la sezione è alta quanto lo schermo e l'animazione sta al centro,
   alla dimensione massima che ci entra senza deformarsi (le coordinate interne non cambiano); intorno lo stesso
   blu dello sfondo dell'animazione. Schermi verticali → composizione verticale, orizzontali → 16:9. */
.hero.hero--anim { --hero-top: calc(var(--sp-4) * 2 + 2.75rem); display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100lvh; padding: var(--hero-top) 0 0; box-sizing: border-box; }   /* lvh: niente striscia della sezione sotto quando le barre del browser mobile si nascondono */
.hero--anim .hero__stage { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; }
.hero .hero__svg--d { width: min(100vw, calc((100svh - var(--hero-top)) * 16 / 9)); }
.hero .hero__svg--m { width: min(100vw, calc((100svh - var(--hero-top)) * 9 / 16)); }
@media (min-aspect-ratio: 1/1) { .hero .hero__svg--d { display: block; } .hero .hero__svg--m { display: none; } }
@media (max-aspect-ratio: 1/1) { .hero .hero__svg--d { display: none; } .hero .hero__svg--m { display: block; } }