/* ULIS Design System v1.1 — Inter + Space Mono */
:root{
  --uf:#2B3990;
  --ubrand:#2B3990; /* Blu ULIS ufficiale — da usare per elementi brand */--ur:#D93025;--us:#F6B21B;--ub:#0D0D0D;--uw:#fff;
  --usu:#F4F4F0;--ul:rgba(0,0,0,.1);--ul2:rgba(255,255,255,.15);
  --ud:'Inter',sans-serif;--ulo:'Inter',sans-serif;--um:'Space Mono',monospace;
  --trans:.15s ease;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}
body{font-family:var(--ulo);font-size:1rem;line-height:1.7;color:var(--ub);background:var(--uw);-webkit-font-smoothing:antialiased}
a{color:var(--ur);text-decoration-thickness:1px}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--ur);outline-offset:2px}
.uw{max-width:1100px;margin:0 auto;padding:0 1.5rem}
.g2{display:grid;grid-template-columns:1fr;gap:1.5rem}
.g3{display:grid;grid-template-columns:1fr;gap:1.2rem}
.g4{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media(min-width:640px){.g2{grid-template-columns:1fr 1fr}}
@media(min-width:640px){.g3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:640px){.g4{grid-template-columns:repeat(4,1fr)}}
.skip{position:absolute;left:-999px;top:0;background:var(--ur);color:#fff;padding:.6em 1em;z-index:999;font-family:var(--ud);font-size:.85rem;font-weight:700}
.skip:focus{left:.5rem;top:.5rem}
/* Header */
.uh{background:rgba(255,255,255,.96);backdrop-filter:blur(6px);border-bottom:1px solid var(--ul);position:sticky;top:0;z-index:50}
.uh .uw{height:70px;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ubrand{display:flex;align-items:center;gap:.75rem;text-decoration:none;flex-shrink:0}
.ubrand img,.ubrand svg{height:34px;width:auto}
.ubrand small{font-family:var(--ud);font-weight:700;font-size:.68rem;text-transform:uppercase;color:#666;letter-spacing:.08em;display:none}
@media(min-width:700px){.ubrand small{display:block}}
.uh-right{display:flex;align-items:center;gap:1.3rem}
.unav{display:none;align-items:center;gap:1.3rem}
@media(min-width:1000px){.unav{display:flex}}
.uh-mark{display:none;width:30px;height:30px;flex-shrink:0}
@media(min-width:1000px){.uh-mark{display:block}}
.unav a{font-family:var(--ud);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;color:var(--ub);text-decoration:none;opacity:.45;padding:.3em 0;position:relative;transition:opacity var(--trans)}
.unav a:hover,.unav a[aria-current="page"]{opacity:1}
.unav a[aria-current="page"]::after{content:'';position:absolute;left:0;right:0;bottom:-4px;height:2px;background:var(--ur)}
.umb{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:none;border:1px solid var(--ul);cursor:pointer;color:var(--ub)}
@media(min-width:1000px){.umb{display:none}}
#mnav{display:none;flex-direction:column;background:var(--uw);border-top:1px solid var(--ul);padding:.5rem 1.5rem 1.2rem}
#mnav.on{display:flex}
#mnav a{font-family:var(--ud);font-size:.9rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ub);text-decoration:none;padding:.7em 0;border-bottom:1px solid var(--ul)}
#mnav a:last-child{border-bottom:none}
@media(min-width:1000px){#mnav{display:none!important}}
/* Sections */
.sec{padding:4.5rem 0}
.sec-s{background:var(--usu)}
.sec-f{background:var(--uf);color:var(--uw)}
.sec-b{background:var(--ub);color:var(--uw)}
.sec-f .u-h2,.sec-b .u-h2{color:var(--uw)}
.hr{border:0;border-top:1px solid var(--ul);margin:2rem 0}
.hr-f{border:0;border-top:1px solid var(--ul2);margin:2rem 0}
/* Eyebrow */
.eb{font-family:var(--um);font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ur);display:flex;align-items:center;gap:.55em;margin-bottom:.85em;flex-wrap:wrap}
.eb::before{content:'';display:inline-block;width:1.4em;height:2px;background:var(--ur);flex-shrink:0}
.sec-f .eb,.sec-b .eb{color:var(--us)}
.sec-f .eb::before,.sec-b .eb::before{background:var(--us)}
/* Heading */
.u-h2{font-family:var(--ud);font-size:clamp(1.8rem,3.5vw,2.7rem);font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--ub);margin-bottom:.55em}
/* Hero */
.hero{background:var(--uw);padding:4.5rem 0 3.5rem;overflow:hidden;position:relative}
.hero canvas.hero-net{position:absolute;inset:0;width:100%;height:100%;z-index:0;opacity:.9;pointer-events:none}
.hero .hero-mark{position:absolute;top:50%;right:14%;transform:translateY(-50%);width:min(26vw,280px);height:auto;opacity:.9;z-index:0;pointer-events:none;display:none}
@media(min-width:900px){.hero .hero-mark{display:block}}
.hero .uw{position:relative;z-index:1}
.hero h1{font-family:var(--ud);font-size:clamp(2.8rem,6.5vw,5.2rem);font-weight:800;line-height:.95;letter-spacing:-.03em;color:var(--ub);margin-bottom:1.5rem}
.hero h1 em{color:var(--ur);font-style:normal}
.hero .lede{font-size:clamp(.95rem,1.4vw,1.12rem);color:#555;max-width:36em;line-height:1.75;margin-bottom:2rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.hero h1{animation:fadeUp .45s ease both}
.hero .lede{animation:fadeUp .45s .1s ease both}
.hero .brow{animation:fadeUp .45s .2s ease both}
/* Scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:translateY(0)}
.g2 .reveal:nth-child(2),.g3 .reveal:nth-child(2),.g4 .reveal:nth-child(2){transition-delay:.08s}
.g3 .reveal:nth-child(3),.g4 .reveal:nth-child(3){transition-delay:.16s}
.g4 .reveal:nth-child(4){transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--ud);font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;text-decoration:none;padding:.85em 1.6em;border:2px solid;cursor:pointer;transition:all var(--trans),transform .15s ease;background:transparent}
.btn:hover{transform:translateY(-2px)}
.btn-s{background:var(--ub);color:var(--uw);border-color:var(--ub)}
.btn-s:hover{background:var(--uf);border-color:var(--uf);color:#fff}
.btn-o{color:var(--ub);border-color:var(--ub)}
.btn-o:hover{background:var(--ub);color:var(--uw)}
.btn-ol{color:var(--uw);border-color:rgba(255,255,255,.45)}
.btn-ol:hover{background:var(--uw);color:var(--uf)}
.sec-b .btn-ol:hover{color:var(--ub)}
.brow{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}
/* Cards */
.card{border:1px solid var(--ul);padding:1.6rem;background:var(--uw);transition:transform var(--trans),box-shadow var(--trans)}
.card:hover{transform:translateY(-3px);box-shadow:0 6px 24px rgba(0,0,0,.06)}
.card .ct{font-family:var(--um);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ur);margin-bottom:.6em;display:block}
.card h3{font-family:var(--ud);font-size:1.05rem;font-weight:700;color:var(--ub);margin-bottom:.4em}
.card p{font-size:.9rem;color:#555;line-height:1.65}
.card .meta{font-family:var(--um);font-size:.67rem;color:#888;margin-top:.8rem;border-top:1px solid var(--ul);padding-top:.6rem}
.card-f{border:1px solid rgba(255,255,255,.18);padding:1.5rem;transition:border-color var(--trans)}
.card-f:hover{border-color:var(--us)}
.card-f .ct{font-family:var(--um);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--us);margin-bottom:.4em;display:block}
.card-f h3{font-family:var(--ud);font-size:1.05rem;font-weight:700;color:var(--uw);margin-bottom:.35em}
.card-f p{font-size:.88rem;color:rgba(255,255,255,.7);line-height:1.65}
/* Team */
.tcard .role{font-family:var(--um);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em;color:var(--us);margin-bottom:.3em;display:block}
.tcard h3{font-family:var(--ud);font-size:1.05rem;font-weight:700;color:var(--uw);margin-bottom:.35em}
.tcard p{font-size:.88rem;color:rgba(255,255,255,.65);line-height:1.65;margin-bottom:.6rem}
.tcard a{font-family:var(--um);font-size:.7rem;color:var(--us);text-decoration:none;border-bottom:1px solid rgba(246,178,27,.3);padding-bottom:1px}
.tcard a:hover{border-bottom-color:var(--us)}
/* Pills */
.pills{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:1.4rem 0}
.pills li{font-size:.88rem;border:1px solid var(--ul);padding:.4em .95em;background:var(--uw)}
.pills li a{color:var(--ub);text-decoration:none}
.pills li a:hover{color:var(--ur)}
.pills-f{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;margin:1.4rem 0}
.pills-f li{font-size:.88rem;border:1px solid rgba(255,255,255,.18);padding:.4em .95em}
.pills-f li a{color:rgba(255,255,255,.75);text-decoration:none}
.pills-f li a:hover{color:#fff}
/* Table */
.lt{width:100%;border-collapse:collapse;margin:1rem 0}
.lt td{padding:.65em .4em;border-bottom:1px solid var(--ul);font-size:.92rem;vertical-align:top}
.lt td:first-child{font-family:var(--um);font-size:.68rem;letter-spacing:.04em;color:#666;width:40%;padding-right:1rem}
/* Form */
.uf .fi{margin-bottom:1.1rem}
.uf label{display:block;font-family:var(--um);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:.4rem;color:#555}
.uf input,.uf textarea{width:100%;padding:.78em .9em;border:1px solid #ccc;font-family:var(--ulo);font-size:1rem;color:var(--ub);background:var(--uw);transition:border-color var(--trans)}
.uf input:focus,.uf textarea:focus{outline:none;border-color:var(--ur);box-shadow:0 0 0 2px rgba(217,48,37,.12)}
.uf button[type=submit]{margin-top:.4rem;width:100%}
/* Blockquote */
.pull{font-style:italic;font-size:clamp(1.1rem,2vw,1.35rem);border-left:3px solid var(--ur);padding-left:1.2rem;max-width:28em;color:var(--ub);line-height:1.5}
.pull cite{display:block;font-family:var(--um);font-style:normal;font-size:.68rem;color:#666;margin-top:.7rem}
/* Stats */
.stats{display:flex;flex-wrap:wrap;gap:2rem;margin:2rem 0}
.stat .n{font-family:var(--ud);font-size:2.4rem;font-weight:800;color:var(--uw);line-height:1;display:block}
.stat .l{font-family:var(--um);font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.5)}
/* Cycle icons */
.card-f svg{display:block;margin-bottom:.9rem}
.cyc-card{position:relative;border-top:3px solid var(--us);overflow:hidden}
.cyc-card .cyc-num{position:absolute;top:.3rem;right:1rem;font-family:var(--ud);font-size:3.4rem;font-weight:800;color:rgba(255,255,255,.14);line-height:1;user-select:none}
.cyc-card svg{position:relative}
/* Section watermark */
.sec-mark{position:relative;overflow:hidden}
.sec-mark .wm{position:absolute;top:50%;right:-2rem;transform:translateY(-50%);width:min(30vw,260px);height:auto;opacity:.07;z-index:0;pointer-events:none}
.sec-mark .uw{position:relative;z-index:1}
/* Cookie banner */
#cookie-bar{position:fixed;bottom:0;left:0;right:0;background:var(--ub);color:rgba(255,255,255,.85);padding:1rem 1.5rem;z-index:200;display:flex;align-items:center;flex-wrap:wrap;gap:1rem;font-family:var(--ulo);font-size:.9rem;line-height:1.5;transform:translateY(100%);transition:transform .3s ease}
#cookie-bar.visible{transform:translateY(0)}
#cookie-bar p{margin:0;flex:1;min-width:200px}
#cookie-bar a{color:var(--us)}
.cbtn{padding:.55em 1.2em;border:1px solid rgba(255,255,255,.4);color:#fff;background:transparent;font-family:var(--um);font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;flex-shrink:0;transition:background var(--trans)}
.cbtn:hover{background:rgba(255,255,255,.1)}
.cbtn-acc{background:var(--ur);border-color:var(--ur)}
.cbtn-acc:hover{background:#b82820;border-color:#b82820}
/* Footer */
.ft{background:var(--usu);color:#555;padding:1.5rem 0}
.ft a{color:#555;text-decoration:none}
.ft a:hover{color:var(--ur)}
.ftb{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:space-between;align-items:center;font-family:var(--um);font-size:.65rem;color:#888}
/* 404 */
.err-wrap{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 1.5rem;position:relative;overflow:hidden}
.err-wrap .err-mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:min(70vw,480px);height:auto;opacity:.06;z-index:0;pointer-events:none}
.err-wrap .code,.err-wrap h1,.err-wrap p,.err-wrap .btn{position:relative;z-index:1}
.err-wrap .code{font-family:var(--ud);font-size:clamp(5rem,15vw,10rem);font-weight:800;color:var(--usu);line-height:1}
.err-wrap h1{font-family:var(--ud);font-size:clamp(1.5rem,4vw,2.5rem);font-weight:800;margin-bottom:.5rem}
.err-wrap p{color:#555;max-width:32em;margin-bottom:1.5rem}
/* Print */
@media print{
  .uh,.ft,#cookie-bar,.brow,#mnav,.umb{display:none!important}
  body{font-size:11pt;color:#000}
  .hero{padding:1rem 0}
  .sec{padding:1.5rem 0}
  .card{border:1px solid #ddd}
}