@font-face{font-family:"Fraunces";src:url(../assets/fonts/fraunces-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Fraunces";src:url(../assets/fonts/fraunces-latin-600-italic.woff2) format("woff2");font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/inter-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(../assets/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
  --ink:#1A1423; --ink-2:#231B2F; --ink-3:#2E2540;
  --cream:#F4EFE6; --cream-muted:#CFC7BA;
  --coral:#E85D4C; --coral-hover:#F07565;
  --teal:#2F6F6A; --teal-light:#5FA39C;
  --brass:#C4A574; --brass-dark:#8A6F3E;
  --font-display:"Fraunces","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"DejaVu Sans Mono",monospace;
  --fs-sm:.875rem; --fs-base:1rem; --fs-lg:1.125rem; --fs-h3:1.25rem;
  --fs-h2:clamp(1.75rem,4vw,2.5rem); --fs-h1:clamp(2.25rem,6vw,4rem);
  --space-1:.5rem; --space-2:1rem; --space-3:1.5rem; --space-4:2rem; --space-6:3rem; --space-8:5rem;
  --radius:14px; --container:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--cream);font:var(--fs-base)/1.6 var(--font-body)}
img{max-width:100%;display:block}
a{color:var(--teal-light)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--brass);outline-offset:3px}
.container{width:min(100% - 2*var(--space-3),var(--container));margin-inline:auto}
.skip{position:absolute;left:-999px;top:var(--space-2);z-index:9;background:var(--cream);color:var(--ink);font-weight:600;padding:var(--space-1) var(--space-2);border-radius:999px;text-decoration:none}.skip:focus{left:var(--space-2);outline:3px solid var(--coral);outline-offset:3px}
h1,h2,h3{font-family:var(--font-display);line-height:1.15;margin:0 0 var(--space-2)}
h1{font-size:var(--fs-h1);font-weight:600}h1 em{color:var(--brass);font-style:italic}
h2{font-size:var(--fs-h2);font-weight:600}
h2::after{content:"";display:block;width:2.5rem;height:3px;background:var(--coral);margin-top:var(--space-2);border-radius:2px}
.contact h2::after{margin-inline:auto}h3{font-size:var(--fs-h3);font-weight:600}
.site-header{position:relative;min-height:clamp(560px,88vh,860px);display:flex;flex-direction:column;overflow:hidden}
.hero-bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,20,35,.92) 0%,rgba(26,20,35,.7) 45%,rgba(26,20,35,.25) 100%),linear-gradient(0deg,var(--ink) 0%,transparent 30%),url(../assets/musci-sito-tech-atmosfera.jpg) center/cover no-repeat}
.nav{position:relative;display:flex;align-items:center;justify-content:space-between;padding-block:var(--space-2);flex-wrap:wrap}
.brand img{display:block;height:40px;width:auto}
.brand{display:flex;align-items:center;gap:var(--space-1);color:var(--cream);text-decoration:none;font:600 1.5rem var(--font-display)}
.nav-toggle{background:none;border:1px solid var(--cream-muted);color:var(--cream);border-radius:999px;min-height:44px;padding:.6rem 1.1rem;font:inherit;cursor:pointer}
.nav-links{list-style:none;margin:0;padding:0;display:none;width:100%;flex-direction:column;gap:var(--space-2);padding-block:var(--space-2)}
.nav-links.open,.no-js .nav-links{display:flex}
.no-js .nav-toggle{display:none}
.nav-links a{color:var(--cream);text-decoration:none;display:block;padding:.6rem 0}
.nav-links .btn{display:inline-block;padding:.6rem 1.1rem}.nav-links a:hover{color:var(--brass)}
.hero{position:relative;margin-block:auto;padding-block:var(--space-4);max-width:var(--container)}
.hero>*{max-width:40rem}
.eyebrow{font:500 var(--fs-sm) var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.lead{font-size:var(--fs-lg);color:var(--cream-muted)}
.hero-cta{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}
.btn{display:inline-block;background:var(--coral);color:var(--ink);font-weight:600;text-decoration:none;padding:.85rem 1.5rem;border-radius:999px;border:2px solid var(--coral);transition:background .2s}
.btn[aria-disabled="true"]{opacity:.55;pointer-events:none}
.hero-cta .btn{width:100%;text-align:center}
.btn:hover{background:var(--coral-hover);border-color:var(--coral-hover)}
.btn-ghost{background:transparent;color:var(--cream);border-color:var(--cream-muted)}.btn-ghost:hover{background:var(--ink-3);border-color:var(--cream)}
.btn-small{padding:.45rem 1rem}
.section{padding-block:clamp(3rem,8vw,5rem)}
.section-alt{background:var(--ink-2)}
.section-lead{color:var(--cream-muted);max-width:42rem;font-size:var(--fs-lg)}
.cards{display:grid;gap:var(--space-3);grid-template-columns:1fr;margin-top:var(--space-4)}
.card{background:var(--ink-3);border:1px solid rgba(244,239,230,.08);border-radius:var(--radius);padding:var(--space-3)}
.card p{color:var(--cream-muted);margin:0}
.card-num{font:500 var(--fs-sm) var(--font-mono);color:var(--brass)}
.card-media .slot{margin:calc(-1*var(--space-3)) calc(-1*var(--space-3)) var(--space-3);border-radius:var(--radius) var(--radius) 0 0}
.slot{position:relative;margin:0;aspect-ratio:var(--ratio,4/3);border-radius:var(--radius);overflow:hidden;background:repeating-linear-gradient(45deg,var(--ink-3) 0 12px,var(--ink-2) 12px 24px);border:2px dashed var(--teal-light);display:grid;place-items:center}
.slot figcaption{font:500 var(--fs-sm) var(--font-mono);color:var(--brass);background:var(--ink);padding:.4rem .8rem;border-radius:6px;text-align:center}
.slot.has-image{border:0;background:none}.slot.has-image figcaption{display:none}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,center)}
.split{display:grid;gap:var(--space-6);align-items:center}
.features{padding:0;list-style:none;display:grid;gap:var(--space-2)}
.features li{padding-left:1.25rem;border-left:3px solid var(--coral);color:var(--cream-muted)}
.features strong{color:var(--cream)}
.gallery{display:grid;gap:var(--space-3);grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--space-3);padding-inline-end:var(--space-3);padding-bottom:var(--space-1);margin-top:var(--space-2)}
.scroll-hint{margin-top:var(--space-6);margin-bottom:0;font:500 var(--fs-sm) var(--font-mono);color:var(--cream-muted)}
.gallery>.slot{scroll-snap-align:start}
.contact{text-align:center}.contact .section-lead{margin-inline:auto}
.note{font-size:var(--fs-sm);color:var(--cream-muted)}
.site-footer{display:flex;flex-wrap:wrap;gap:var(--space-2);justify-content:space-between;padding-block:var(--space-4);border-top:1px solid var(--ink-3);color:var(--cream-muted);font-size:var(--fs-sm)}
@media (min-width:768px){
  .scroll-hint{display:none}
  .gallery{margin-top:var(--space-6);padding-inline-end:0}
  .hero-cta .btn{width:auto}
  .nav-links a{padding:.3rem 0}
  .hero{padding-block:var(--space-6)}
  .nav-toggle{display:none}
  .nav-links{display:flex;flex-direction:row;width:auto;align-items:center;padding:0;gap:var(--space-4)}
  .cards{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:5fr 7fr}
  .gallery{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible}
  .cards-4{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1200px){
  .cards-4{grid-template-columns:repeat(4,1fr)}
  .cards-4 .slot{--ratio:4 / 3 !important}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

#offline .card{background:var(--ink);border-color:rgba(196,165,116,.25)}

/* Nota SIAE */
.fn-ref{color:var(--coral);text-decoration:none;margin-left:.15em;font-weight:700}
.fn-ref:hover,.fn-ref:focus-visible{color:var(--cream)}
.footnote{margin-top:var(--space-3);font-size:.875rem;color:var(--cream-muted)}

/* Scenari di esempio */
.sub-title{margin-top:var(--space-6);margin-bottom:var(--space-3)}
.cards-2{display:grid;gap:var(--space-3);grid-template-columns:1fr}
@media (min-width:768px){.cards-2{grid-template-columns:1fr 1fr}}
.scenario .eyebrow{display:block;margin-bottom:var(--space-1)}

.scenario-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;margin-bottom:1rem}

/* Dove suona: galleria slideshow */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.uc-slider{position:relative;margin-top:var(--space-4)}
.uc-stage{display:grid;position:relative;border-radius:var(--radius);overflow:hidden;background:var(--ink);aspect-ratio:16/9;outline-offset:4px;touch-action:pan-y}
.uc-stage:focus-visible{outline:2px solid var(--brass)}
.uc-slide{grid-area:1/1;position:relative;display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(1.5rem,4vw,3.5rem) clamp(1.5rem,7vw,6rem);background-size:cover;background-position:center;opacity:0;visibility:hidden;transition:opacity .8s ease,visibility 0s linear .8s}
.uc-slide.is-active{opacity:1;visibility:visible;transition:opacity .8s ease}
.uc-slide::before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(26,20,35,.96) 0%,rgba(26,20,35,.85) 38%,rgba(26,20,35,.25) 72%,rgba(26,20,35,0) 100%);z-index:0}
.uc-slide>*{position:relative;z-index:1;max-width:46rem}
.uc-brand{background-color:var(--ink)}
.uc-brand::after{content:"";position:absolute;right:6%;top:8%;width:30%;height:70%;background:url(../assets/brand/jattaflow-mark-cream.svg) center/contain no-repeat;opacity:.07;z-index:0}
.uc-v1{background-image:radial-gradient(ellipse at 85% 15%,rgba(47,111,106,.75),transparent 60%),radial-gradient(ellipse at 10% 30%,rgba(232,93,76,.35),transparent 55%)}
.uc-v2{background-image:radial-gradient(ellipse at 15% 10%,rgba(232,93,76,.45),transparent 55%),radial-gradient(ellipse at 90% 40%,rgba(47,111,106,.6),transparent 60%)}
.uc-v3{background-image:linear-gradient(135deg,rgba(47,111,106,.7) 0%,rgba(26,20,35,0) 55%),radial-gradient(ellipse at 80% 20%,rgba(196,165,116,.3),transparent 50%)}
.uc-v4{background-image:linear-gradient(210deg,rgba(232,93,76,.4) 0%,rgba(26,20,35,0) 50%),radial-gradient(ellipse at 20% 15%,rgba(47,111,106,.55),transparent 55%)}
.uc-slide h3{font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.1;margin:.2rem 0 .8rem}
.uc-slide p{margin:.35rem 0;color:var(--cream-muted);font-size:var(--fs-sm)}
.uc-slide p strong{color:var(--cream)}
.uc-arrow{position:absolute;top:calc(50% - 2.5rem);transform:translateY(-50%);z-index:2;width:56px;height:56px;border-radius:50%;border:0;background:rgba(26,20,35,.6);color:var(--cream);font-size:2.2rem;line-height:1;cursor:pointer;backdrop-filter:blur(4px)}
.uc-arrow:hover,.uc-arrow:focus-visible{background:var(--coral);color:var(--ink)}
.uc-prev{left:14px}.uc-next{right:14px}
.uc-controls{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin-top:var(--space-2)}
.uc-btn{width:40px;height:40px;border-radius:50%;border:2px solid rgba(244,239,230,.35);background:transparent;color:var(--cream);cursor:pointer}
.uc-btn:hover,.uc-btn:focus-visible{border-color:var(--coral);color:var(--coral)}
.uc-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.uc-dots button{width:10px;height:10px;padding:0;border-radius:50%;border:0;background:rgba(244,239,230,.25);cursor:pointer}
.uc-dots button[aria-current="true"]{background:var(--coral);width:22px;border-radius:5px}
.uc-count{margin:0;font:500 var(--fs-sm) var(--font-mono);color:var(--brass);min-width:4.5em;text-align:center}
@media(max-width:719px){.uc-stage{aspect-ratio:auto;min-height:600px}.uc-slide{padding:1.5rem 1.25rem 1.5rem;background-position:30% center}.uc-slide::before{background:linear-gradient(0deg,rgba(26,20,35,.97) 0%,rgba(26,20,35,.9) 60%,rgba(26,20,35,.3) 88%,rgba(26,20,35,0) 100%)}.uc-arrow{top:28%;width:44px;height:44px;font-size:1.8rem}.uc-prev{left:8px}.uc-next{right:8px}.uc-brand::after{width:50%;height:30%;top:5%}}
@media(prefers-reduced-motion:reduce){.uc-slide,.uc-slide.is-active{transition:none}}
/* Elenco use case (griglia segnaposto) */
.uc-list{display:grid;gap:var(--space-3);grid-template-columns:1fr;margin-top:var(--space-4)}
@media(min-width:720px){.uc-list{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1080px){.uc-list{grid-template-columns:repeat(4,1fr)}}
.uc-item{display:flex;flex-direction:column;gap:var(--space-1)}
.uc-item-media{aspect-ratio:4/3;border-radius:calc(var(--radius) - 4px);overflow:hidden;background:linear-gradient(135deg,rgba(47,111,106,.35),rgba(196,165,116,.18));margin-bottom:var(--space-1)}
.uc-item-media img{width:100%;height:100%;object-fit:cover;display:block}
.uc-item-title{margin:0}
.uc-item-caption{margin:0;color:var(--cream-muted);font-size:var(--fs-sm)}