/* ORTHYNE Design 3.0 — pelle della fascia di apertura (p09, 18/10/2026).
   Vale SOLO per le pagine con <section class="band hero30">: le altre lingue restano invariate
   finché i testi non sono tradotti e verificati. Direttiva Design 3.0 + vincoli SEO/veridicità. */
html body .band.hero30{position:relative;overflow:hidden;background:#060a13;
  background:radial-gradient(130% 170% at 18% 0%,#101c36 0%,#0a1322 52%,#060a13 100%);border-bottom:1px solid rgba(98,227,255,.22)}
html body .band.hero30 .h30{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
html body .band.hero30 .wrap{position:relative}
html body .band.hero30 h1{font-size:clamp(2.3rem,5vw,3.6rem);line-height:1.08;letter-spacing:-.015em;color:#fff}
html body .band.hero30 .h30-grad{display:block;background:linear-gradient(92deg,#62e3ff 8%,#8f7bff 55%,#ffc86b 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  -webkit-text-fill-color:transparent;padding-bottom:.08em}
@supports not (background-clip:text){html body .band.hero30 .h30-grad{color:#8fd3ff;-webkit-text-fill-color:#8fd3ff}}
html body .band.hero30 .h30-lead{color:#e8eef7;font-weight:600;font-size:1.06rem}
html body .band.hero30 .pill{border:1px solid rgba(98,227,255,.45);background:rgba(10,18,34,.6);color:#bfe9ff}
html body .band.hero30 .pill b{color:#fff}
html body .band.hero30 .proof{color:#9fd9ec}
html body .band.hero30 .sub{color:#aebdd4}
html body .band.hero30 .sub a,html body .band.hero30 .proof a{color:#cfe6ff}
html body .band.hero30 a.cta,html body .band.hero30 button.cta{
  background:linear-gradient(92deg,#62e3ff,#8f7bff);color:#04121a;border:0;border-radius:999px;
  font-weight:700;box-shadow:0 0 22px rgba(98,227,255,.32);transition:box-shadow .25s,transform .25s}
html body .band.hero30 a.cta:hover,html body .band.hero30 a.cta:focus-visible,
html body .band.hero30 button.cta:hover,html body .band.hero30 button.cta:focus-visible{
  box-shadow:0 0 34px rgba(143,123,255,.6),0 0 70px rgba(98,227,255,.28);transform:translateY(-2px);color:#04121a}
html body .band.hero30 .h30-chips{display:flex;flex-wrap:wrap;gap:.55rem;margin:.9rem 0 0}
html body .band.hero30 .h30-chips a{font-size:.82rem;color:#bcd0e8;text-decoration:none;
  border:1px solid rgba(98,227,255,.22);border-radius:999px;padding:.34rem .85rem;background:rgba(10,16,30,.55)}
html body .band.hero30 .h30-chips a:hover,html body .band.hero30 .h30-chips a:focus-visible{color:#fff;border-color:#62e3ff}
html body .band.hero30 .card{background:rgba(14,22,42,.58);border:1px solid rgba(98,227,255,.2);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:18px;
  box-shadow:0 14px 48px rgba(4,10,24,.5)}
html body .band.hero30 .card,html body .band.hero30 .card caption,html body .band.hero30 .card .note{color:#c7d4e6}
html body .band.hero30 .card th{color:#e8eef7}
html body .band.hero30 .card td,html body .band.hero30 .card a{color:#d9e4f2}
html body .band.hero30 .join label,html body .band.hero30 .join .note{color:#c7d4e6}
html body .band.hero30 .note{color:#93a3bd}
html body .band.hero30 :focus-visible{outline:2px solid #62e3ff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  html body .band.hero30 a.cta,html body .band.hero30 button.cta{transition:none}
}
/* Sezione "Un sistema vivo" (3 schede animate, come la demo Hero 3.0) */
html body .vivo30{background:#060a13;background:linear-gradient(180deg,#060a13 0%,#0a1322 100%);padding:2.6rem 0 2.8rem;border-bottom:1px solid rgba(98,227,255,.15)}
html body .vivo30 h2{color:#fff;font-size:clamp(1.4rem,3.4vw,2rem);margin:0 0 1.4rem}
html body .vivo30 .g30{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
html body .vivo30 .c30{display:flex;flex-direction:column;gap:.65rem;padding:1.3rem;border-radius:18px;text-decoration:none;
  background:rgba(16,24,44,.6);border:1px solid rgba(98,227,255,.18);transition:border-color .3s,box-shadow .3s,transform .2s}
html body .vivo30 .c30:hover,html body .vivo30 .c30:focus-visible{border-color:#62e3ff;box-shadow:0 14px 44px rgba(98,227,255,.15)}
html body .vivo30 .c30 h3{color:#fff;font-size:1.05rem;margin:0}
html body .vivo30 .c30 p{color:#aebdd4;font-size:.9rem;line-height:1.55;margin:0}
html body .vivo30 .v30{height:88px;border-radius:12px;overflow:hidden;position:relative;background:#0a1222;border:1px solid rgba(143,123,255,.15)}
html body .vivo30 .radar30:after{content:"";position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0 78%,rgba(98,227,255,.5) 92%,transparent 100%);animation:sweep30 3.6s linear infinite}
html body .vivo30 .radar30:before{content:"";position:absolute;inset:0;z-index:1;background:
  radial-gradient(circle at 50% 50%,transparent 29%,rgba(98,227,255,.12) 30%,transparent 31%,transparent 54%,rgba(98,227,255,.12) 55%,transparent 56%),
  radial-gradient(circle at 62% 38%,#ffc86b 0 2px,transparent 3px),radial-gradient(circle at 34% 60%,#ffc86b 0 2px,transparent 3px)}
@keyframes sweep30{to{transform:rotate(1turn)}}
html body .vivo30 .onda30{display:flex;align-items:flex-end;gap:5px;padding:14px;height:100%}
html body .vivo30 .onda30 i{flex:1;background:linear-gradient(to top,#8f7bff,#62e3ff);border-radius:3px;opacity:.85;animation:eq30 1.6s ease-in-out infinite alternate}
html body .vivo30 .onda30 i:nth-child(2n){animation-delay:.3s}html body .vivo30 .onda30 i:nth-child(3n){animation-delay:.55s}
@keyframes eq30{from{height:22%}to{height:92%}}
html body .vivo30 .ai30{position:absolute;top:8px;right:8px;z-index:2;font-size:.64rem;letter-spacing:.06em;color:#8f7bff;border:1px solid #8f7bff;border-radius:5px;padding:.1rem .4rem;background:rgba(6,10,19,.7)}
html body .vivo30 .rete30{position:absolute;inset:0;width:100%;height:100%}
@media (prefers-reduced-motion:reduce){html body .vivo30 .radar30:after,html body .vivo30 .onda30 i{animation:none}html body .vivo30 .c30{transition:none}}
/* p14 (19/10/2026): apertura essenziale come nel concept 3.0; i due paragrafi descrittivi scendono qui, sotto l'apertura */
html body main .intro30{padding:2.2rem 0 .4rem;border-bottom:1px solid rgba(98,227,255,.14)}
html body main .intro30 p.sub{color:#c3d0e4;font-size:1rem;line-height:1.65;max-width:72ch;margin:0 0 1rem}
html body main .intro30 p.sub a{color:#bfe9ff}
/* p17 (19/10/2026): apertura identica al concept Hero 3.0 approvato da Fulvio — una colonna centrata, globo di particelle al centro,
   titolo sottile + gradiente, frase, pulsante, chip. Dati reali, globo dei Paesi e iscrizione scendono nella sezione .dati30. */
html body .band.hero30 .hero30-in{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  min-height:min(82svh,780px);padding-top:4.5rem;padding-bottom:4rem}
html body .band.hero30 .hero30-in>div{display:flex;flex-direction:column;align-items:center;gap:1.1rem;max-width:880px}
html body .band.hero30 .hero30-in .pill{display:none}
html body .band.hero30 .hero30-in h1{font-size:clamp(2.5rem,6.6vw,4.7rem);font-weight:400;line-height:1.1;letter-spacing:.005em;margin:0;
  text-shadow:0 0 34px rgba(98,227,255,.28)}
html body .band.hero30 .hero30-in .h30-grad{font-weight:800;text-shadow:none;filter:drop-shadow(0 0 22px rgba(143,123,255,.45))}
html body .band.hero30 .hero30-in .h30-lead{font-weight:500;font-size:clamp(1rem,1.6vw,1.15rem);color:#dfe8f5;max-width:60ch;margin:0}
html body .band.hero30 .hero30-in p{margin:0}
html body .band.hero30 .hero30-in a.cta{padding:1rem 2.2rem;font-size:1rem}
html body .band.hero30 .hero30-in .note{margin:-.4rem 0 0}
html body .band.hero30 .hero30-in .h30-chips{justify-content:center;margin:.2rem 0 0}
html body .band.hero30.dati30{background:#070b16;border-top:1px solid rgba(98,227,255,.12)}
html body .band.hero30.dati30 .hero{padding-top:3rem;padding-bottom:3.2rem}
html body .band.hero30.dati30 .hero{align-items:start}
/* p32: scheda Connect viva (rete animata in SVG/CSS, riga con dati reali, invito, focus) */
html body .vivo30 .rete30s path{fill:none;stroke:rgba(143,123,255,.5);stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1 1;stroke-dashoffset:1;animation:rete30l 9s ease-in-out infinite;animation-delay:calc(var(--i) * .28s)}
@keyframes rete30l{0%{stroke-dashoffset:1}20%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-1}}
html body .vivo30 .rete30s .n30 circle{fill:#62e3ff;transform-box:fill-box;transform-origin:center;animation:rete30p 3.2s ease-in-out infinite;animation-delay:calc(var(--i) * -.41s)}
html body .vivo30 .rete30s .n30 circle.g{fill:#ffc86b}
@keyframes rete30p{0%,100%{transform:scale(1);opacity:.75}50%{transform:scale(1.6);opacity:1}}
html body .vivo30 .rete30s .m30{fill:#fff;filter:drop-shadow(0 0 3px #62e3ff)}
html body .vivo30 .c30 p.c30-cx{color:#62e3ff;font-size:.82rem;font-weight:600}
html body .vivo30 .c30 p.c30-cx[hidden],html body .vivo30 .c30-cx [hidden]{display:none}
html body .vivo30 .c30-cta{margin-top:auto;color:#62e3ff;font-weight:600;font-size:.9rem}
html body .vivo30 .c30:hover .c30-cta{text-decoration:underline}
html body .vivo30 .c30:focus-visible{outline:2px solid #62e3ff;outline-offset:3px}
@media (prefers-reduced-motion:reduce){html body .vivo30 .rete30s path{animation:none;stroke-dashoffset:0}html body .vivo30 .rete30s circle{animation:none}html body .vivo30 .rete30s .m30{display:none}}
/* p35 scheda AI */
html body .vivo30 .c30 p.c30-ai{color:#62e3ff;font-size:.82rem;font-weight:600}
/* p35 fine scheda AI */

/* p41h (19/10/2026): niente spazio vuoto tra intestazione e titolo. Prima: min-height:min(82svh,780px) +
   contenuto centrato in verticale + padding-top 4.5rem (circa 200px vuoti). Ora il titolo segue l'intestazione. */
html body .band.hero30 .hero30-in{min-height:0;justify-content:flex-start;
  padding-top:clamp(1.5rem,3.2vw,3rem);padding-bottom:clamp(2.25rem,4.5vw,3.75rem)}