/* unitizy.com — stili del sito. Estratto dal monolite il 19/07/2026. */

/* font self-hostati (subset latin) — niente richieste a Google */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(../../vendor/fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(../../vendor/fonts/inter-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(../../vendor/fonts/inter-600.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(../../vendor/fonts/jetbrains-mono-400.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(../../vendor/fonts/jetbrains-mono-500.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url(../../vendor/fonts/space-grotesk-400.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url(../../vendor/fonts/space-grotesk-500.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url(../../vendor/fonts/space-grotesk-600.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url(../../vendor/fonts/space-grotesk-700.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:500;font-display:swap;src:url(../../vendor/fonts/clash-display-500.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:600;font-display:swap;src:url(../../vendor/fonts/clash-display-600.woff2) format('woff2')}
@font-face{font-family:'Clash Display';font-style:normal;font-weight:700;font-display:swap;src:url(../../vendor/fonts/clash-display-700.woff2) format('woff2')}

:root{
  --bg:#FFFFFF; --surface:#F5F7FC; --surface2:#EBEFF9;
  --line:rgba(14,27,77,.12); --line2:rgba(14,27,77,.24);
  --tx:#0E1B4D; --mut:#3F4E85; --dim:#5C689C;
  --cy:#4C6FFF; --cyt:#3B5BE0; --vi:#7C3AED;
  --grad:linear-gradient(120deg,#4C6FFF 0%,#7C3AED 100%);
  --dsp:'Clash Display','Space Grotesk',system-ui,sans-serif; --bd:'Inter',system-ui,sans-serif; --mo:'JetBrains Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--bd);-webkit-font-smoothing:antialiased}
a{color:var(--cy);text-decoration:none}
::selection{background:rgba(110,139,255,.3)}
:focus-visible{outline:2px solid var(--cy);outline-offset:2px}
::-webkit-scrollbar{width:11px;height:11px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:#CBD4EE;border:3px solid var(--bg);border-radius:20px}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

.u-hl{display:block;position:relative;padding-bottom:.06em}
.u-hl>span{display:inline-block;opacity:0}
.u-fade{opacity:0;animation:u-fade .7s var(--ease) forwards}
.u-fd1{animation-delay:1.0s}.u-fd2{animation-delay:1.15s}.u-fd3{animation-delay:1.3s}
@keyframes u-fade{to{opacity:1}}
.u-caret{display:inline-block;width:8px;height:1.05em;background:var(--cy);margin-left:4px;vertical-align:-2px;animation:u-blink 1.05s steps(1) infinite;box-shadow:0 0 10px var(--cy)}
@keyframes u-blink{50%{opacity:0}}
@keyframes u-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.u-tk{animation:u-mq 32s linear infinite}
.u-mq-wrap:hover .u-tk{animation-duration:120s}
.u-float{animation:u-flt 9s ease-in-out infinite}
@keyframes u-flt{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#u-tflow{animation:u-flow 2.4s linear infinite}
@keyframes u-flow{to{stroke-dashoffset:-1}}
.mstep.is-active h3{animation:u-wordin .55s var(--ease) both}
.mstep.is-active .mstep-deliv p{animation:u-wordin .6s .08s var(--ease) both}
.mstep.is-active .mstep-deliv div span{animation:u-wordin .5s var(--ease) both;animation-delay:.16s}
.mstep.is-active .mstep-deliv div span:nth-child(2){animation-delay:.28s}
.mstep.is-active .mstep-deliv div span:nth-child(3){animation-delay:.4s}
@keyframes u-wordin{from{opacity:0;transform:translateY(16px);filter:blur(7px)}to{opacity:1;transform:none;filter:none}}
@keyframes u-svcin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.svc .u-ico [data-anim]{transform-box:fill-box}
.svc .u-ico svg{transition:filter .3s}
.svc:hover .u-ico svg{filter:drop-shadow(0 0 10px rgba(110,139,255,.6))}
.svc .u-ico .u-route{stroke-dasharray:170;stroke-dashoffset:0}
.svc:hover .u-ico .u-route{animation:u-draw 1.3s cubic-bezier(.65,0,.35,1)}
@keyframes u-draw{from{stroke-dashoffset:170}to{stroke-dashoffset:0}}
.svc .u-ico .u-crow{transform-origin:left center}
.svc:hover .u-ico .u-crow{animation:u-crow .5s var(--ease)}
.svc:hover .u-ico .u-c2{animation-delay:.11s}.svc:hover .u-ico .u-c3{animation-delay:.22s}.svc:hover .u-ico .u-c4{animation-delay:.33s}
@keyframes u-crow{from{transform:scaleX(.06);opacity:.2}to{transform:scaleX(1);opacity:1}}
.svc .u-ico .u-ccar{opacity:0}.svc:hover .u-ico .u-ccar{animation:u-blink 1s steps(1) infinite .44s}
.svc .u-ico .u-gear{transform-origin:center}.svc:hover .u-ico .u-gear{animation:u-spin 3.4s linear infinite}
@keyframes u-spin{to{transform:rotate(360deg)}}
.svc .u-ico .u-gear2{transform-origin:center}.svc:hover .u-ico .u-gear2{animation:u-spinr 4.6s linear infinite}
@keyframes u-spinr{to{transform:rotate(-360deg)}}
.svc .u-ico .u-lay{transform-origin:center bottom}
.svc:hover .u-ico .u-lay{animation:u-lay .55s var(--ease)}
.svc:hover .u-ico .u-l2{animation-delay:.14s}.svc:hover .u-ico .u-l3{animation-delay:.28s}
@keyframes u-lay{from{transform:scaleY(0);opacity:.18}to{transform:scaleY(1);opacity:1}}

/* — mini-diagrammi animati dei servizi (attivi con .ss-run sulla scena o sul pannello accordion) — */
.sdg svg{display:block;width:100%;height:auto}
.sdg text{font-family:'JetBrains Mono',ui-monospace,monospace;letter-spacing:.08em}
.sdg .d-pop{opacity:0}
.ss-run .sdg .d-pop{animation:d-pop .6s var(--ease) forwards}
.sdg .d-flow{stroke-dasharray:5 6}
.ss-run .sdg .d-flow{animation:d-dash 1.15s linear infinite}
.sdg .d-trav{opacity:0}
.ss-run .sdg .d-trav{opacity:1;animation:d-trav 3.2s cubic-bezier(.45,0,.55,1) .6s infinite}
.sdg .d-scan{opacity:0}
.ss-run .sdg .d-scan{opacity:1;animation:d-scan 3.6s cubic-bezier(.45,0,.55,1) infinite alternate}
.ss-run .sdg .d-pulse{animation:d-pulse 2.4s ease-in-out infinite}
@keyframes d-pop{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
@keyframes d-dash{to{stroke-dashoffset:-11}}
@keyframes d-trav{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes d-scan{from{transform:translateX(0)}to{transform:translateX(296px)}}
@keyframes d-pulse{0%,100%{opacity:.35}50%{opacity:1}}

/* — logo navbar: i frammenti convergono nella breccia (regola 5 del manuale) — */
.lg-a1{opacity:0;animation:u-lgin .8s .5s var(--ease) both}
.lg-a2{opacity:0;animation:u-lgthru 1.5s 1.1s cubic-bezier(.45,0,.55,1) both}
.lg-a3{opacity:0;animation:u-lgthru 1.5s 1.6s cubic-bezier(.45,0,.55,1) both}
.u-logo-link:hover .lg-a2{animation:u-lgthru2 1.2s cubic-bezier(.45,0,.55,1) both}
.u-logo-link:hover .lg-a3{animation:u-lgthru2 1.2s .3s cubic-bezier(.45,0,.55,1) both}
@keyframes u-lgin{from{opacity:0;transform:translateX(-9px)}to{opacity:1;transform:none}}
@keyframes u-lgthru{0%{opacity:0;transform:translateX(-8px)}40%{opacity:.95}100%{opacity:0;transform:translateX(13px)}}
@keyframes u-lgthru2{0%{opacity:0;transform:translateX(-8px)}40%{opacity:.95}100%{opacity:0;transform:translateX(13px)}}

/* — atmosfere di sezione: velature brand + costellazioni di frammenti — */
.u-atmo{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.u-atmo i{position:absolute;display:block;background:var(--cy);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}

@media (prefers-reduced-motion: reduce){
  .u-hl>span,.u-fade{transform:none;animation:none;opacity:1}
  .u-tk,.u-caret,.u-float,#u-tflow{animation:none}
  .svc:hover .u-ico *{animation:none!important}
  .mstep.is-active h3,.mstep.is-active .mstep-deliv p,.mstep.is-active .mstep-deliv div span{animation:none!important}
  .sdg svg *{animation:none!important}
  .sdg .d-pop,.sdg .d-trav,.sdg .d-scan{opacity:1}
  .lg-a1{animation:none!important;opacity:1}
  .lg-a2,.lg-a3{animation:none!important;opacity:0!important}
}
.u-burger{display:none}
@media (max-width:900px){ .u-nav-links{display:none!important} .u-spine{display:none!important} #u-filmbar{display:none!important} .u-burger{display:flex!important} }
@media (max-width:820px){ .u-cards{grid-template-columns:1fr 1fr!important} .u-prima-grid{grid-template-columns:1fr!important} .u-impact{grid-template-columns:1fr!important} #u-hero-info{display:none!important} .u-proofgrid{grid-template-columns:1fr!important} .u-steps{grid-template-columns:repeat(2,1fr)!important} }
@media (max-width:560px){ .u-steps{grid-template-columns:1fr!important} }
@media (max-width:560px){ .u-cards{grid-template-columns:1fr!important} }
@media (max-width:720px){ .svc-d{grid-template-columns:1fr!important} }
.u-skip{position:absolute;left:8px;top:-60px;z-index:100;background:var(--grad);color:#fff;font-family:var(--dsp);font-weight:600;font-size:14px;padding:10px 18px;transition:top .2s}
.u-skip:focus{top:8px}
.hv-tx:hover{color:var(--tx)!important}
.hv-lift1:hover{box-shadow:0 8px 30px rgba(110,139,255,.45);transform:translateY(-1px)}
.hv-lift2:hover{box-shadow:0 12px 44px rgba(110,139,255,.5);transform:translateY(-2px)}
.hv-lift3:hover{box-shadow:0 14px 50px rgba(110,139,255,.55);transform:translateY(-2px)}
.hv-ghost:hover{border-color:var(--cy)!important;background:rgba(110,139,255,.08)!important}
.u-vcard:hover{border-color:var(--cy)!important;transform:translateY(-6px);box-shadow:0 20px 54px rgba(110,139,255,.22)}