/* HYSAD - Desktop 80% visual density patch
   ------------------------------------------------------------------
   Obiettivo: avere a browser 100% una resa desktop molto vicina allo
   zoom browser 80%, senza usare zoom/transform globali sulla .site.
   Motivo: lo zoom globale può creare shift laterali e comportamenti
   diversi tra Chrome/Edge/Safari. Questa patch riduce nativamente
   dimensioni, max-width, header, nav, hero e componenti principali.
   Mobile e tablet NON vengono toccati.
*/

@media (min-width:1181px) and (hover:hover) and (pointer:fine) {
  :root {
    --header: 58px !important;
    --max: 992px !important;
    --bubbleW: 186px !important;
  }

  /* overflow-x solo su html: su body creerebbe uno scroll container che rompe
     position:sticky (sezione .cinema); overflow-x:clip invece sopprime gli eventi scroll in Chromium */
  html {
    overflow-x: hidden !important;
  }

  html,
  body {
    max-width: 100% !important;
  }

  .site {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    transform: none !important;
    zoom: 1 !important;
  }

  .wrap,
  .hysadFooterInner {
    width: min(var(--max, 992px), calc(100% - 38px)) !important;
  }

  /* Header / navbar: resa compatta come browser 80% */
  .topbar {
    height: var(--header, 58px) !important;
  }

  .nav {
    height: var(--header, 58px) !important;
    gap: 14px !important;
  }

  .homeLogo {
    left: 19px !important;
    width: 120px !important;
    height: 38px !important;
  }

  .homeLogo img {
    max-width: 116px !important;
    max-height: 29px !important;
  }

  .navLinks {
    gap: 6px !important;
    padding: 6px !important;
    max-width: min(880px, calc(100vw - 185px)) !important;
    border-radius: 999px !important;
  }

  .navLinks a {
    font-size: 10px !important;
    padding: 10px 10.5px !important;
    border-radius: 999px !important;
  }

  /* Densità verticale generale */
  section,
  .section {
    padding-top: 77px !important;
    padding-bottom: 77px !important;
  }

  .sectionHead,
  .sectionHead.clean {
    margin-bottom: 34px !important;
  }

  .sectionHead h2,
  .head h2,
  h2 {
    font-size: clamp(27px, 4vw, 54px) !important;
  }

  /* HOME ---------------------------------------------------------------- */
  .heroWorld {
    min-height: 100vh !important;
    padding: calc(var(--header,58px) + 14px) 0 61px !important;
  }

  .worldWrap {
    width: min(792px, 80vw) !important;
    height: min(560px, calc(100vh - 122px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .worldCore {
    width: min(344px, 36vw) !important;
  }

  .worldCore img {
    max-height: 208px !important;
  }

  .orbit.o1 { width: 608px !important; height: 608px !important; }
  .orbit.o2 { width: 496px !important; height: 496px !important; }
  .orbit.o3 { width: 388px !important; height: 388px !important; }

  .servicePlanet {
    width: var(--bubbleW, 186px) !important;
    min-height: 54px !important;
    padding: 13px 14px !important;
    border-radius: 19px !important;
    font-size: 13px !important;
    line-height: 1.12 !important;
  }

  .p1 { left: calc(50% - (var(--bubbleW,186px)/2)) !important; top: 3.5% !important; }
  .p4 { left: calc(50% - (var(--bubbleW,186px)/2)) !important; bottom: 3.5% !important; }

  .spark {
    width: 5.6px !important;
    height: 5.6px !important;
  }

  .claim {
    margin-top: 50px !important;
  }

  .claim h1 {
    font-size: clamp(26px, 3.35vw, 46px) !important;
  }

  .protocolTitle {
    font-size: clamp(29px, 3.55vw, 50px) !important;
  }

  .protocolStage {
    border-radius: 30px !important;
    padding: 29px 29px 61px !important;
  }

  .phase {
    min-height: 240px !important;
    padding: 19px !important;
    border-radius: 22px !important;
  }

  .phase h3 {
    font-size: 22px !important;
  }

  .contactPanel {
    border-radius: 27px !important;
    padding: 22px !important;
  }

  /* HERO PAGINE SERVIZIO ------------------------------------------------ */
  .hero,
  .pageHero {
    min-height: 100vh !important;
  }

  .heroInner,
  .heroCenter {
    padding-top: calc(var(--header,58px) + 62px) !important;
    padding-bottom: 70px !important;
  }

  .hero h1,
  .pageHero h1,
  h1 {
    font-size: clamp(30px, 5.6vw, 78px) !important;
    line-height: .94 !important;
  }

  .heroSecondary {
    font-size: .72em !important;
  }

  .heroSub {
    max-width: 672px !important;
    margin-top: 23px !important;
    font-size: clamp(14.5px, 1.55vw, 18.5px) !important;
    line-height: 1.55 !important;
  }

  .serviceLabel,
  .heroServiceLabel,
  .label {
    padding: 11px 18px !important;
    margin-bottom: 24px !important;
    font-size: 13.6px !important;
  }

  /* Componenti hero specifici */
  .dash {
    width: min(784px, calc(100% - 38px)) !important;
    margin-top: 16px !important;
    padding: 14px !important;
    border-radius: 22px !important;
  }

  .metric {
    padding: 11px !important;
    border-radius: 14px !important;
  }

  .pmKanban {
    width: min(656px, 82vw) !important;
    margin-top: 27px !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 21px !important;
  }

  .pmKanbanCol {
    min-height: 114px !important;
    padding: 11px !important;
    border-radius: 14px !important;
  }

  .pmPostIt {
    min-height: 62px !important;
    padding: 11px !important;
    border-radius: 11px !important;
  }

  .pmPostIt strong { font-size: 14px !important; }
  .pmPostIt span { font-size: 10.5px !important; }

  .supportConstellation {
    width: min(608px, 80vw) !important;
    height: min(352px, 46vw) !important;
  }

  .partnerOrbit {
    min-height: 496px !important;
  }

  .hysadCore {
    width: 312px !important;
  }

  .r1 { width: 400px !important; height: 400px !important; }
  .r2 { width: 312px !important; height: 312px !important; }

  .orbitTab {
    min-width: 101px !important;
    padding: 10px 13px !important;
    font-size: 10px !important;
  }

  .techItem .num { font-size: clamp(38px, 3.84vw, 62px) !important; }
  .techItem .label { font-size: 9px !important; }

  /* Card / sezioni interne: riduzione nativa, non trasformata */
  .cards,
  .grid,
  .managedGrid,
  .interventionGrid,
  .stats,
  .attackCards,
  .useCards,
  .processRail,
  .opsGrid,
  .protocolGrid {
    gap: 14px !important;
  }

  .card,
  .securityCard,
  .managedCard,
  .opsCard,
  .stat,
  .threatCard,
  .processCard,
  .flipCard,
  .useCard,
  .finalCta,
  .cta,
  .ganttPanel,
  .attackPanel,
  .supportOps,
  .accordion,
  .col {
    border-radius: 24px !important;
  }

  .card,
  .securityCard,
  .managedCard,
  .opsCard,
  .stat,
  .threatCard,
  .processCard,
  .useCard,
  .face,
  .col {
    padding: 22px !important;
  }

  .card,
  .securityCard {
    min-height: 264px !important;
  }

  .managedCard {
    min-height: 228px !important;
  }

  .flipCard {
    min-height: 304px !important;
  }

  .face h3 {
    font-size: 22px !important;
    margin-top: 58px !important;
  }

  .face p,
  .card p,
  .securityCard p,
  .managedCard p,
  .opsCard dd,
  .processCard p,
  .useCard span {
    font-size: 13.5px !important;
    line-height: 1.55 !important;
  }

  .finalCta {
    padding: 46px !important;
  }

  .finalCta h2 {
    font-size: clamp(27px, 3.55vw, 50px) !important;
  }

  .btn,
  .cta,
  .submitBtn {
    padding: 14px 21px !important;
    font-size: 12px !important;
  }

  /* Footer */
  .hysadFooterInner {
    padding-top: 27px !important;
    padding-bottom: 22px !important;
    gap: 27px !important;
  }

  .hysadFooterLogo { font-size: 14.5px !important; }
  .hysadFooterClaim,
  .hysadFooterMail { font-size: 11px !important; }
  .hysadFooterNav a { font-size: 10.5px !important; }
  .hysadFooterBottom { font-size: 10px !important; }
}

/* HYSAD desktop 80 - bugfix v2
   1) Centra meglio le linee tratteggiate della home rispetto al logo.
   2) Evita sovrapposizioni nelle card del Protocollo Operativo.
*/
@media (min-width:1181px) and (hover:hover) and (pointer:fine) {
  .heroWorld .constellation{transform:translateY(-28px)!important;transform-origin:center center!important}
  .protocolStage{padding:29px 29px 70px!important}
  .protocolGrid{align-items:stretch!important}
  .phase{min-height:292px!important;padding:22px 22px 72px!important}
  .phase h3{font-size:22px!important;margin:14px 0 12px!important}
  .phase p{font-size:15px!important;line-height:1.55!important;margin-bottom:0!important}
  .phaseMetric{left:22px!important;right:22px!important;bottom:24px!important;font-size:12px!important;line-height:1.1!important;background:linear-gradient(180deg,rgba(8,22,20,.00),rgba(8,22,20,.58) 42%,rgba(8,22,20,.78))!important;padding-top:18px!important;pointer-events:none!important}
  .phaseMetric i{width:96px!important;height:4px!important;margin-top:8px!important}
  .phase:before{font-size:47px!important;right:16px!important;top:14px!important}
}

/* HYSAD desktop 80 - protocol metric redesign v3
   Sostituisce i rettangoli scuri sotto le card con un micro-pannello elegante,
   più coerente con il design glass/neon della home.
*/
@media (min-width:1181px) and (hover:hover) and (pointer:fine) {
  .phaseMetric{
    left:22px!important;
    right:22px!important;
    bottom:20px!important;
    min-height:42px!important;
    display:grid!important;
    align-content:center!important;
    gap:8px!important;
    padding:10px 12px 11px 14px!important;
    border-radius:15px!important;
    border:1px solid rgba(184,255,236,.13)!important;
    background:
      linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.025))!important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 12px 26px rgba(0,0,0,.16),
      0 0 24px color-mix(in srgb,var(--phase),transparent 88%)!important;
    backdrop-filter:blur(14px)!important;
    -webkit-backdrop-filter:blur(14px)!important;
    color:#f4fbf8!important;
    font-size:12px!important;
    font-weight:950!important;
    letter-spacing:.01em!important;
    line-height:1!important;
    pointer-events:none!important;
  }

  .phaseMetric::before{
    content:"";
    position:absolute;
    left:0;
    top:9px;
    bottom:9px;
    width:3px;
    border-radius:999px;
    background:linear-gradient(180deg,var(--phase),rgba(255,255,255,.72))!important;
    box-shadow:0 0 14px color-mix(in srgb,var(--phase),transparent 42%)!important;
  }

  .phaseMetric i{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:5px!important;
    margin-top:0!important;
    overflow:hidden!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.075)!important;
    transform:none!important;
  }

  .phaseMetric i::after{
    content:"";
    position:absolute;
    inset:0;
    width:68%;
    border-radius:inherit;
    background:linear-gradient(90deg,var(--phase),rgba(255,255,255,.92),transparent)!important;
    box-shadow:0 0 16px color-mix(in srgb,var(--phase),transparent 48%)!important;
    transform-origin:left;
  }

  .protocolStage.in .phaseMetric i,
  .protocolStage.in .phaseMetric i::after{
    animation:none!important;
  }

  .protocolStage.in .phaseMetric{
    animation:metricSoftIn .55s cubic-bezier(.2,.8,.2,1) both!important;
  }

  .protocolStage.in .phase:nth-child(1) .phaseMetric{animation-delay:.34s!important}
  .protocolStage.in .phase:nth-child(2) .phaseMetric{animation-delay:.52s!important}
  .protocolStage.in .phase:nth-child(3) .phaseMetric{animation-delay:.70s!important}
  .protocolStage.in .phase:nth-child(4) .phaseMetric{animation-delay:.88s!important}

  @keyframes metricSoftIn{
    from{opacity:0;transform:translateY(8px) scale(.98)}
    to{opacity:1;transform:none}
  }
}

/* HYSAD contact form redesign v4
   Form contatti home: glass premium, font coerenti, CTA più elegante.
   Mobile safe: layout, spazi e campi adattati sotto 720px.
*/
.contactPanel{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid rgba(148,255,209,.24)!important;
  border-radius:38px!important;
  background:
    radial-gradient(circle at 18% 8%,rgba(148,255,209,.16),transparent 34%),
    radial-gradient(circle at 88% 72%,rgba(46,111,120,.20),transparent 38%),
    linear-gradient(135deg,rgba(255,255,255,.075),rgba(255,255,255,.026))!important;
  box-shadow:
    0 34px 90px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.08),
    0 0 0 1px rgba(148,255,209,.04)!important;
  backdrop-filter:blur(22px)!important;
  -webkit-backdrop-filter:blur(22px)!important;
}

.contactPanel::after{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:30px;
  border:1px solid rgba(255,255,255,.055);
  pointer-events:none;
}

.contactCopy{
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  min-height:100%!important;
}

.contactCopy h2{
  margin:0 0 20px!important;
  max-width:520px!important;
  font-size:clamp(34px,4.1vw,58px)!important;
  line-height:.96!important;
  letter-spacing:-.06em!important;
  text-transform:none!important;
  background:linear-gradient(135deg,#fff,#d9fff3 48%,#94ffd1)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
}

.contactCopy .sub{
  max-width:560px!important;
  margin:0 0 18px!important;
  color:rgba(218,239,234,.82)!important;
  font-size:clamp(16px,1.45vw,19px)!important;
  line-height:1.62!important;
  letter-spacing:-.015em!important;
}

.contactCopy .note{
  position:relative!important;
  max-width:520px!important;
  margin:4px 0 0!important;
  padding:14px 16px 14px 18px!important;
  border:1px solid rgba(148,255,209,.14)!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.035)!important;
  color:rgba(168,194,189,.82)!important;
  font-size:12.5px!important;
  line-height:1.5!important;
}

.contactCopy .note::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:3px;
  border-radius:999px;
  background:linear-gradient(180deg,#94ffd1,#4fa687)!important;
  box-shadow:0 0 16px rgba(148,255,209,.34)!important;
}

.contactForm{
  gap:15px!important;
  padding:20px!important;
  border:1px solid rgba(184,255,236,.13)!important;
  border-radius:30px!important;
  background:
    linear-gradient(180deg,rgba(5,16,15,.50),rgba(5,16,15,.24)),
    rgba(255,255,255,.030)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 24px 70px rgba(0,0,0,.20)!important;
}

.formRow{
  gap:15px!important;
}

.field{
  gap:8px!important;
}

.field label{
  display:flex!important;
  align-items:center!important;
  color:rgba(238,247,245,.78)!important;
  font-size:11.5px!important;
  font-weight:950!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
}

.field input,
.field textarea,
.field select{
  min-height:52px!important;
  border:1px solid rgba(184,255,236,.16)!important;
  border-radius:18px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.070),rgba(255,255,255,.035))!important;
  color:#eef7f5!important;
  padding:15px 16px!important;
  font:600 14.5px/1.25 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif!important;
  letter-spacing:-.01em!important;
  outline:none!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)!important;
  transition:border-color .20s ease,box-shadow .20s ease,background .20s ease,transform .20s ease!important;
}

.field textarea{
  min-height:138px!important;
  line-height:1.5!important;
  resize:vertical!important;
}

.field input::placeholder,
.field textarea::placeholder{
  color:rgba(168,194,189,.52)!important;
  font-weight:600!important;
}

.field input:focus,
.field textarea:focus,
.field select:focus{
  border-color:rgba(148,255,209,.62)!important;
  background:
    linear-gradient(180deg,rgba(148,255,209,.095),rgba(255,255,255,.045))!important;
  box-shadow:
    0 0 0 4px rgba(148,255,209,.075),
    0 0 26px rgba(148,255,209,.10),
    inset 0 1px 0 rgba(255,255,255,.08)!important;
  transform:translateY(-1px)!important;
}

.field select{
  appearance:none!important;
  -webkit-appearance:none!important;
  cursor:pointer!important;
  background-image:
    linear-gradient(45deg,transparent 50%,#94ffd1 50%),
    linear-gradient(135deg,#94ffd1 50%,transparent 50%),
    linear-gradient(180deg,rgba(255,255,255,.070),rgba(255,255,255,.035))!important;
  background-position:
    calc(100% - 21px) 50%,
    calc(100% - 15px) 50%,
    0 0!important;
  background-size:6px 6px,6px 6px,100% 100%!important;
  background-repeat:no-repeat!important;
  padding-right:42px!important;
}

.submitBtn{
  position:relative!important;
  min-height:54px!important;
  margin-top:2px!important;
  border:1px solid rgba(148,255,209,.46)!important;
  border-radius:999px!important;
  background:
    linear-gradient(135deg,#94ffd1,#4fa687 52%,#2e6f78)!important;
  color:#061110!important;
  font-size:13px!important;
  font-weight:1000!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  overflow:hidden!important;
  box-shadow:
    0 18px 46px rgba(79,166,135,.23),
    inset 0 1px 0 rgba(255,255,255,.35)!important;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease!important;
}

.submitBtn::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent,rgba(255,255,255,.48),transparent);
  transform:translateX(-130%);
  animation:hysadContactBtnShine 3.2s ease-in-out infinite;
}

.submitBtn:hover{
  transform:translateY(-2px)!important;
  filter:saturate(1.08)!important;
  box-shadow:
    0 24px 60px rgba(79,166,135,.32),
    0 0 34px rgba(148,255,209,.16),
    inset 0 1px 0 rgba(255,255,255,.38)!important;
}

@keyframes hysadContactBtnShine{
  0%{transform:translateX(-130%)}
  42%,100%{transform:translateX(130%)}
}

@media (max-width:980px){
  .contactPanel{
    grid-template-columns:1fr!important;
    gap:18px!important;
    border-radius:30px!important;
    padding:24px!important;
  }

  .contactCopy{
    padding:6px 4px 0!important;
  }

  .contactCopy h2{
    max-width:none!important;
    font-size:clamp(31px,6vw,46px)!important;
  }

  .contactForm{
    padding:18px!important;
    border-radius:26px!important;
  }
}

@media (max-width:720px){
  .contactPanel{
    padding:18px!important;
    border-radius:26px!important;
  }

  .contactPanel::after{
    inset:10px!important;
    border-radius:20px!important;
  }

  .contactCopy h2{
    font-size:clamp(30px,9vw,42px)!important;
    line-height:1!important;
    margin-bottom:14px!important;
  }

  .contactCopy .sub{
    font-size:16px!important;
    line-height:1.55!important;
  }

  .contactCopy .note{
    font-size:12px!important;
    padding:13px 14px 13px 16px!important;
  }

  .contactForm{
    padding:14px!important;
    gap:13px!important;
    border-radius:22px!important;
  }

  .formRow{
    grid-template-columns:1fr!important;
    gap:13px!important;
  }

  .field input,
  .field textarea,
  .field select{
    min-height:50px!important;
    border-radius:16px!important;
    font-size:14px!important;
    padding:14px!important;
  }

  .field textarea{
    min-height:122px!important;
  }

  .submitBtn{
    width:100%!important;
    min-height:52px!important;
  }
}

/* === HYSAD footer: contatti estesi (telefono, indirizzo, P.IVA) === */
.hysadFooterPhone{display:block;font-size:11px;color:inherit;text-decoration:none;margin-top:4px;opacity:.92}
.hysadFooterPhone:hover{opacity:1;text-decoration:underline}
.hysadFooterAddress{display:block;font-style:normal;font-size:11px;line-height:1.5;color:inherit;opacity:.72;margin-top:8px}