/* Home: hero con il digital twin dal vivo, come funziona, bivio, cose forti, fiducia */
.hero-twin{position:relative;padding:150px 0 70px;background:radial-gradient(circle at 78% 30%,rgba(85,229,255,.12),transparent 42%),radial-gradient(circle at 10% 90%,rgba(123,97,255,.12),transparent 40%),#06101c;overflow:hidden}
.hero-twin:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:72px 72px;mask-image:linear-gradient(180deg,#000 40%,transparent)}
.ht-grid{position:relative;display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:48px;align-items:center}
.ht-copy .display{font-size:clamp(2.4rem,3.7vw,3.9rem);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.ht-copy .lead{font-size:1.1rem}
.ht-fatti{list-style:none;margin:34px 0 0;padding:0;display:grid;gap:12px}
.ht-fatti li{display:grid;gap:2px;padding-left:16px;border-left:2px solid rgba(85,229,255,.55)}
.ht-fatti b{font-size:.92rem}
.ht-fatti span{font-size:.84rem;color:#9fb0c2}
.ht-stage{display:grid;gap:12px;min-width:0}
.ht-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:5px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03)}
.ht-tabs button{display:grid;gap:1px;padding:10px 14px;border:0;border-radius:12px;background:transparent;color:#c3d0de;font:inherit;text-align:left;cursor:pointer;transition:background .25s}
.ht-tabs button b{font-size:.95rem;color:#fff}
.ht-tabs button span{font-size:.76rem}
.ht-tabs button[aria-selected="true"]{background:linear-gradient(135deg,rgba(85,229,255,.18),rgba(123,97,255,.16));box-shadow:inset 0 0 0 1px rgba(85,229,255,.45)}
.ht-tabs button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.ht-frame{position:relative;aspect-ratio:16/10;border:1px solid rgba(85,229,255,.25);border-radius:20px;overflow:hidden;background:#0c1626;box-shadow:0 40px 120px rgba(0,0,0,.45)}
.ht-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ht-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .8s;z-index:1}
.ht-poster.nascosto{opacity:0;pointer-events:none}
.ht-velo{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:center;padding:16px;cursor:pointer}
.ht-velo span{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:rgba(7,16,29,.75);font-size:.76rem;color:#c3d0de;opacity:0;transition:opacity .3s}
.ht-frame:hover .ht-velo span{opacity:1}
.ht-frame.interattivo .ht-velo{display:none}
.ht-avvia{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%}
.ht-sotto{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;color:#8f9fb2}
.ht-sotto a{color:var(--cyan);font-weight:650}
/* come funziona */
.flusso{display:grid;grid-template-columns:1fr 60px 1fr 60px 1fr;align-items:stretch}
.fl-passo{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
.fl-n{font:700 .7rem/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em;color:var(--muted)}
.fl-loghi{display:flex;gap:14px;align-items:center;min-height:34px}
.fl-loghi img{height:26px;width:auto}
.fl-passo h3{margin:4px 0 0;font-size:1.45rem}
.fl-passo p{margin:0;color:#aebccc;line-height:1.55}
.fl-chip{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:8px}
.fl-chip span{padding:5px 10px;border:1px solid var(--line);border-radius:999px;font-size:.74rem;color:#d8e4f0;background:rgba(255,255,255,.04)}
.fl-freccia{position:relative;display:grid;place-items:center}
.fl-freccia i{position:relative;width:100%;height:2px;background:linear-gradient(90deg,rgba(85,229,255,.15),rgba(85,229,255,.6));overflow:hidden}
.fl-freccia i:after{content:"";position:absolute;top:-3px;left:-10px;width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan);animation:flussoDato 1.8s linear infinite}
@keyframes flussoDato{to{left:100%}}
.come-nota{margin:28px 0 0;color:#aebccc}
.come-nota a,.link-forte{color:var(--cyan);font-weight:650}
/* bivio */
.bivio-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.bivio-card{position:relative;display:flex;flex-direction:column;gap:12px;padding:34px;border:1px solid var(--line);border-radius:26px;overflow:hidden;color:inherit;transition:transform .35s,border-color .35s,box-shadow .35s}
.bivio-card:before{content:"";position:absolute;width:320px;height:320px;right:-120px;top:-120px;border-radius:50%;filter:blur(80px);opacity:.22}
.bivio-card.cliente{background:linear-gradient(150deg,rgba(25,158,112,.14),rgba(255,255,255,.02) 55%)}
.bivio-card.cliente:before{background:#199e70}
.bivio-card.partner{background:linear-gradient(150deg,rgba(123,97,255,.18),rgba(255,255,255,.02) 55%)}
.bivio-card.partner:before{background:#7b61ff}
.bivio-card:hover{transform:translateY(-4px);border-color:rgba(85,229,255,.45);box-shadow:0 30px 80px rgba(0,0,0,.35)}
.bivio-card>*{position:relative}
.bivio-card small{color:#9fb0c2;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;font-weight:750}
.bivio-card h3{margin:0;font-size:clamp(1.6rem,2.4vw,2.2rem);line-height:1.12}
.bivio-card ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:9px}
.bivio-card li{padding-left:22px;position:relative;color:#d0dbe6}
.bivio-card li:before{content:"→";position:absolute;left:0;color:var(--cyan)}
.bivio-cta{margin-top:10px;color:var(--cyan);font-weight:750}
.bivio-nota{margin:0;color:#8f9fb2;font-size:.84rem}
/* le cose forti */
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(210px,auto);grid-auto-flow:dense;gap:14px}
.bt{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:24px;border:1px solid var(--line);border-radius:22px;overflow:hidden;color:inherit;background:#0d1828;transition:transform .35s,border-color .35s}
.bt i{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.32;transition:opacity .5s,transform .8s}
.bt:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(7,16,29,.96) 18%,rgba(7,16,29,.35) 75%,rgba(7,16,29,.15))}
.bt>*:not(i){position:relative;z-index:1}
.bt:hover{transform:translateY(-3px);border-color:rgba(85,229,255,.45)}
.bt:hover i{opacity:.55;transform:scale(1.04)}
.bt small{color:var(--cyan);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800}
.bt h3{margin:0;font-size:1.25rem;line-height:1.2}
.bt p{margin:0;color:#b9c6d4;font-size:.86rem;line-height:1.5}
.bt-grande{grid-column:span 2;grid-row:span 2}
.bt-grande h3{font-size:clamp(1.6rem,2.4vw,2.3rem)}
.bt-grande p{font-size:.98rem;max-width:520px}
.bt-largo{grid-column:span 2}
/* fiducia */
.fiducia-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fiducia-grid div{padding:24px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.03)}
.fiducia-grid b{display:block;font-size:1.05rem;margin-bottom:8px}
.fiducia-grid p{margin:0;color:#aebccc;font-size:.9rem;line-height:1.55}
.home-2 .section{padding:100px 0}
@media(max-width:1100px){.ht-grid{grid-template-columns:1fr}.bento{grid-template-columns:1fr 1fr}.fiducia-grid{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.flusso{grid-template-columns:1fr}.fl-freccia{height:40px}.fl-freccia i{width:2px;height:100%}.fl-freccia i:after{left:-3px;top:-10px;animation-name:flussoGiu}.bivio-grid{grid-template-columns:1fr}}
@keyframes flussoGiu{to{top:100%}}
@media(max-width:640px){.hero-twin{padding-top:120px}.ht-tabs button{padding:8px 9px}.ht-tabs button span{display:none}.ht-frame{aspect-ratio:4/3}.bento,.fiducia-grid{grid-template-columns:1fr}.bt-grande,.bt-largo{grid-column:auto;grid-row:auto}.bivio-card{padding:24px}.ht-sotto{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.fl-freccia i:after{animation:none}}
.ht-avvia[hidden]{display:none}
/* il settore scelto nell'hero vale per tutta la pagina */
body[data-settore="agritech"] [data-per]:not([data-per~="agritech"]),body[data-settore="building"] [data-per]:not([data-per~="building"]),body[data-settore="industrial"] [data-per]:not([data-per~="industrial"]){display:none}
.ht-scegli{margin:0;color:#9fb0c2;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:750}
.bento .bt{animation:comparsa .5s ease both}
.flusso [data-per]{animation:comparsa .4s ease both}
@keyframes comparsa{from{opacity:0;transform:translateY(8px)}}
body[data-settore] .vertical-card{transition:opacity .4s,box-shadow .4s}
body[data-settore="agritech"] .vertical-card:not(.vertical-agritech),body[data-settore="building"] .vertical-card:not(.vertical-building),body[data-settore="industrial"] .vertical-card:not(.vertical-industrial){opacity:.45}
body[data-settore="agritech"] .vertical-agritech,body[data-settore="building"] .vertical-building,body[data-settore="industrial"] .vertical-industrial{box-shadow:0 0 0 2px rgba(85,229,255,.6),0 30px 80px rgba(0,0,0,.35)}
/* l'ecosistema: tre punti di partenza e lo schema dei collegamenti */
.eco-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.eco-card{display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid var(--line);border-top:3px solid var(--eco);border-radius:22px;background:linear-gradient(160deg,color-mix(in srgb,var(--eco) 9%,transparent),rgba(255,255,255,.015) 55%)}
.eco-link{--eco:#55e5ff}.eco-suite{--eco:#ffc668}.eco-cloud{--eco:#c9d4e2}
.eco-card img{height:46px;width:auto;align-self:flex-start;margin-bottom:6px}
.eco-card h3{margin:0;font-size:1.35rem;line-height:1.2}
.eco-card p{margin:0;color:#aebccc;line-height:1.55}
.eco-card dl{display:grid;gap:8px;margin:auto 0 0;padding-top:12px;border-top:1px solid var(--line)}
.eco-card dl div{display:grid;grid-template-columns:70px 1fr;gap:10px;font-size:.88rem}
.eco-card dt{color:var(--eco);font-weight:700;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;padding-top:2px}
.eco-card dd{margin:0;color:#d8e4f0}
.eco-schema{margin:28px 0 0;padding:24px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.02)}
.eco-schema svg{display:block;width:100%;height:auto;font-family:inherit}
.eco-nodo rect{fill:#0d1a2b;stroke:rgba(255,255,255,.16)}
.eco-nodo text{fill:#e9eef4;font-size:15px;font-weight:650}
.eco-nodo .eco-sub{fill:#9fb0c2;font-size:12.5px;font-weight:500}
.eco-n-link rect{stroke:rgba(85,229,255,.6)}.eco-n-studio rect{stroke:rgba(208,123,255,.6)}.eco-n-operator rect{stroke:rgba(95,224,160,.6)}.eco-n-cloud rect{stroke:url(#ecoG);stroke-width:1.5}
.eco-n-terzi rect{fill:rgba(255,255,255,.03);stroke-dasharray:5 4}
.eco-n-terzi text{fill:#c3d0de;font-weight:500;font-size:14px}
.eco-et{font-size:11px;font-weight:800;letter-spacing:.16em}
.eco-filo path{fill:none;stroke:rgba(85,229,255,.55);stroke-width:2}
.eco-alt path{stroke:rgba(255,255,255,.3);stroke-dasharray:6 6}
.eco-dato{fill:#54d8f0;filter:drop-shadow(0 0 4px #54d8f0)}
.eco-dato-alt{fill:#c3d0de;filter:none}
.eco-schema figcaption{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:14px;font-size:.82rem;color:#9fb0c2}
.eco-schema figcaption i{display:inline-block;width:22px;height:0;margin-right:8px;vertical-align:4px;border-top:2px solid rgba(85,229,255,.7)}
.eco-schema figcaption i.linea-tratto{border-top:2px dashed rgba(255,255,255,.45)}
@media(max-width:1000px){.eco-grid{grid-template-columns:1fr}}
@media(max-width:700px){.eco-schema{display:none}}
@media(prefers-reduced-motion:reduce){.eco-dato{display:none}}
/* desktop: il digital twin e' lo sfondo di tutta la hero, testo e linguette sopra */
@media(min-width:1100px){
  .hero-twin{min-height:min(100vh,940px);display:flex;align-items:center;padding:130px 0 60px}
  .hero-twin:before{z-index:1;pointer-events:none}
  .ht-grid{position:static;width:min(calc(100% - 40px),var(--max));grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:end;min-height:calc(min(100vh,940px) - 190px)}
  .ht-copy{position:relative;z-index:3;align-self:center}
  .ht-stage{position:static;align-self:end;justify-items:end}
  .ht-scegli,.ht-tabs,.ht-sotto{position:relative;z-index:3}
  .ht-tabs{width:min(100%,560px);background:rgba(7,16,29,.72);backdrop-filter:blur(14px)}
  .ht-sotto{width:min(100%,560px)}
  .ht-frame{position:absolute;inset:0;z-index:0;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;background:#0c1626}
  .ht-frame iframe,.ht-frame .ht-poster{left:22%;width:84%}
  .ht-frame:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,#06101c 0%,#06101c 24%,rgba(6,16,28,.78) 36%,rgba(6,16,28,.2) 56%,transparent 70%),linear-gradient(0deg,#06101c 0%,transparent 22%),linear-gradient(180deg,rgba(6,16,28,.7) 0%,transparent 18%)}
  .ht-velo{z-index:2;justify-content:flex-end;padding:0 40px 120px}
  .ht-avvia{left:66%}
}
/* linguette dei settori con l'icona del verticale */
.ht-tabs button{grid-template-columns:34px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center}
.ht-tabs button img{grid-row:1/3;width:34px;height:34px}
@media(max-width:640px){.ht-tabs button{grid-template-columns:1fr;justify-items:center}.ht-tabs button img{grid-row:auto;width:28px;height:28px}}
@media(min-width:1100px){.ht-tabs,.ht-sotto{width:min(100%,640px)}.ht-tabs button span{white-space:nowrap}}
/* da remoto: lo stesso impianto su computer, tablet e telefono */
.tasca{background:radial-gradient(circle at 80% 40%,rgba(85,229,255,.10),transparent 50%),#07111e;overflow:hidden}
.tasca-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:60px;align-items:center}
.tasca-testo .btn{margin-top:28px}
.dispositivi-mock{position:relative;height:440px}
.mk-schermo{position:relative;overflow:hidden;background:#0c1626}
.mk-schermo img{display:block;width:100%;height:100%;object-fit:cover}
.mk-pc{position:absolute;left:0;top:10px;width:78%}
.mk-pc .mk-schermo{aspect-ratio:16/10;border:10px solid #1a2536;border-radius:14px 14px 4px 4px;box-shadow:0 40px 90px rgba(0,0,0,.5)}
.mk-base{display:block;height:14px;margin:0 -6%;background:linear-gradient(#2a3546,#141c28);border-radius:0 0 14px 14px}
.mk-tablet{position:absolute;right:6%;bottom:10px;width:38%}
.mk-tablet .mk-schermo{aspect-ratio:4/3;border:9px solid #1a2536;border-radius:18px;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.mk-tel{position:absolute;right:0;bottom:-10px;width:17%}
.mk-tel .mk-schermo{aspect-ratio:9/19;border:6px solid #1a2536;border-radius:22px;box-shadow:0 26px 60px rgba(0,0,0,.6)}
.mk-schermo img{object-position:center}
.mk-avviso{position:absolute;left:6%;right:6%;top:10%;padding:6px 8px;border-radius:10px;background:rgba(7,16,29,.85);font-size:.6rem;font-weight:700;color:#e9eef4;white-space:nowrap;overflow:hidden}
.mk-avviso b{color:#0ca30c}
@media(max-width:1000px){.tasca-grid{grid-template-columns:1fr}.dispositivi-mock{height:360px}}
@media(max-width:640px){.dispositivi-mock{height:250px}.mk-avviso{display:none}}

/* Come si collega, in home */
.collega .rete{margin-top:8px}
.collega-punti{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}
.collega-punti div{padding:20px 22px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.02)}
.collega-punti h3{margin:0 0 8px;font-size:1.1rem}
.collega-punti p{margin:0;color:#aebccc;line-height:1.55}
@media(max-width:860px){.collega-punti{grid-template-columns:1fr}.collega .rete{padding:12px;overflow-x:auto}.collega .rete svg{min-width:640px}}

/* domanda di brevetto, sotto Su cosa puoi contare */
.brevetto{display:flex;justify-content:space-between;align-items:center;gap:32px;margin-top:14px;padding:24px 28px;border:1px solid rgba(127,224,255,.28);border-radius:20px;background:linear-gradient(90deg,rgba(127,224,255,.07),rgba(255,255,255,.02))}
.brevetto b{display:block;font-size:1.05rem;margin-bottom:6px}
.brevetto p{margin:0;color:#aebccc;font-size:.92rem;line-height:1.55;max-width:640px}
.brevetto dl{display:flex;gap:28px;margin:0;flex:none}
.brevetto dt{font-size:.74rem;color:#8fa1b5;margin-bottom:2px}
.brevetto dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums;color:#e9eef4}
@media(max-width:760px){.brevetto{flex-direction:column;align-items:flex-start;gap:16px}}