/* =====================================================================
   DocentiSOS — foglio di stile del sito
   Derivato dal prototipo "docentisos-prototipo-dinamico.html" (v13),
   rifinito per contrasto AA, mobile-first, reduced-motion e manutenibilità.
   Token in :root → cambia qui palette, raggi e larghezze.
   ===================================================================== */

:root{
  /* Palette (dal prototipo e dal logo: navy, teal, corallo, ambra) */
  --ink:#16233d;
  --navy:#13325e;
  --navy-2:#1c3f70;
  --navy-deep:#0b1f3d;
  --teal:#1fa0a1;        /* decorativo: sfondi, icone, bordi */
  --teal-ink:#137071;    /* testo piccolo su chiaro (AA) */
  --coral:#f3675e;       /* decorativo */
  --coral-ink:#c23f31;   /* testo piccolo su chiaro (AA) */
  --coral-btn:#c94436;   /* sfondo bottoni con testo bianco (AA) */
  --coral-btn-hover:#ad362a;
  --amber:#dda12b;       /* decorativo */
  --amber-ink:#7d5a0f;   /* testo su chiaro (AA) */
  --sky:#dbe7f6;         /* azzurro di supporto, dal deck */
  --paper:#f2f5f4;
  --paper-2:#e7ece9;
  --white:#ffffff;
  --line:#d7ded9;
  --muted:#4b5568;       /* corpo testo secondario */
  --muted-2:#5f6b80;     /* didascalie */
  --radius:18px;
  --radius-lg:24px;
  --maxw:1180px;
  --gutter:16px;
  --shadow-card:0 18px 40px -28px rgba(22,35,61,.35);
  --shadow-deep:0 34px 70px -30px rgba(19,50,94,.35);
  --font-display:'Fraunces',Georgia,serif;
  --font-body:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
}
@media (min-width:700px){ :root{ --gutter:32px; } }

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; line-height:1.08; font-weight:600; text-wrap:balance;}
p{margin:0;}
a{color:inherit; text-decoration:none;}
a:where(:not(.btn)):hover{text-decoration:underline; text-underline-offset:3px;}
img,svg,video{display:block; max-width:100%;}
button{font:inherit; color:inherit;}
ul{margin:0; padding:0; list-style:none;}
:focus-visible{outline:3px solid var(--amber); outline-offset:3px; border-radius:6px;}
.skip-link{position:absolute; left:-999px; top:8px; z-index:1000; background:var(--navy); color:#fff; padding:10px 16px; border-radius:8px;}
.skip-link:focus{left:8px;}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}
.eyebrow{
  font-family:var(--font-mono); font-weight:600; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--teal-ink); display:block; margin-bottom:12px;
}
.section-head{max-width:640px; margin:0 auto 48px; text-align:center;}
.section-head h2{font-size:clamp(1.75rem,3vw,2.5rem);}
.section-head .sub{font-size:1rem; color:var(--muted); margin-top:14px; line-height:1.6;}
.hl{background:linear-gradient(transparent 55%, rgba(221,161,43,.45) 55%); padding:0 .08em;}
.hl-teal{background:linear-gradient(transparent 55%, rgba(31,160,161,.3) 55%);}
em.accent{font-style:italic; font-weight:500; color:var(--amber);}
section{position:relative;}

/* Carta a quadretti: la texture "scuola" usata su alcune sezioni */
.grid-paper{
  background-color:var(--paper);
  background-image:
    linear-gradient(rgba(19,50,94,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,50,94,.055) 1px, transparent 1px);
  background-size:28px 28px;
}
.grid-paper-sky{
  background-color:#eef3fa;
  background-image:
    linear-gradient(rgba(19,50,94,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(19,50,94,.07) 1px, transparent 1px);
  background-size:28px 28px;
}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:999px; font-weight:600; font-size:.92rem;
  border:1.5px solid transparent; cursor:pointer; line-height:1.2; background:transparent;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-2px); text-decoration:none;}
.btn-coral{background:var(--coral-btn); color:#fff; box-shadow:0 10px 24px -10px rgba(201,68,54,.7);}
.btn-coral:hover{background:var(--coral-btn-hover);}
.btn-ghost-light{border-color:rgba(255,255,255,.6); color:#fff;}
.btn-ghost-light:hover{border-color:#fff; background:rgba(255,255,255,.1);}
.btn-outline{border-color:var(--navy); color:var(--navy); background:transparent;}
.btn-outline:hover{background:var(--navy); color:#fff;}
.btn-navy{background:var(--navy); color:#fff;}
.btn-navy:hover{background:var(--navy-2);}
.btn-sm{padding:9px 16px; font-size:.84rem;}

/* ---------- header ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100; padding:16px 0;
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header.solid{background:rgba(242,245,244,.94); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--line); padding:10px 0;}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:1.2rem; line-height:1;}
.logo-text{display:flex; flex-direction:column; gap:3px;}
.logo-tag{font-family:var(--font-mono); font-weight:500; font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.75);}
.site-header.solid .logo-tag, .site-header.menu-open .logo-tag{color:var(--teal-ink);}
@media (max-width:420px){ .logo-tag{display:none;} }
.logo-icon{height:36px; width:auto;}
.logo-word{color:#fff; transition:color .2s ease;}
.site-header.solid .logo-word, .site-header.menu-open .logo-word{color:var(--navy);}
.logo-sos{color:var(--coral);}
.site-header.solid .logo-sos{color:var(--coral-ink);}
.navlinks{display:none; gap:24px; align-items:center;}
.navlinks a{font-size:.9rem; font-weight:600; color:rgba(255,255,255,.9); padding:6px 2px;}
.site-header.solid .navlinks a{color:var(--ink);}
.navlinks a:hover{color:var(--amber); text-decoration:none;}
.site-header.solid .navlinks a:hover{color:var(--coral-ink);}
.nav-cta{display:none;}
.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px;
  border-radius:12px; border:1.5px solid rgba(255,255,255,.6); background:rgba(19,50,94,.25); color:#fff; cursor:pointer;
}
.site-header.solid .nav-toggle, .site-header.menu-open .nav-toggle{border-color:var(--line); background:#fff; color:var(--navy);}
.nav-toggle svg{width:22px; height:22px;}
.nav-toggle .ic-close{display:none;}
.site-header.menu-open .nav-toggle .ic-close{display:block;}
.site-header.menu-open .nav-toggle .ic-menu{display:none;}
.mobile-menu{
  display:none; position:absolute; top:100%; left:0; right:0;
  background:#fff; border-bottom:1px solid var(--line); box-shadow:0 30px 50px -30px rgba(19,50,94,.4);
  padding:12px var(--gutter) 22px;
}
.site-header.menu-open{background:#fff;}
.site-header.menu-open .mobile-menu{display:block;}
.mobile-menu a{display:block; padding:13px 6px; font-weight:600; border-bottom:1px solid var(--paper-2); color:var(--ink);}
.mobile-menu .btn{margin-top:14px; width:100%;}
.navlinks a{white-space:nowrap;}
@media (min-width:1100px){
  .navlinks{display:flex; gap:16px;}
  .navlinks a{font-size:.82rem;}
  .nav-toggle,.mobile-menu{display:none !important;}
}
@media (min-width:1280px){
  .navlinks{gap:22px;}
  .navlinks a{font-size:.9rem;}
  .nav-cta{display:inline-flex;}
}

/* ---------- hero ---------- */
.hero{
  position:relative; padding:130px 0 110px; background:var(--navy); color:#fff; overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% 94%,0 100%);
}
@media (min-width:900px){ .hero{padding:170px 0 150px; clip-path:polygon(0 0,100% 0,100% 84%,0 100%);} }
.video-bg{position:absolute; inset:0; z-index:0; overflow:hidden; background:var(--navy);}
.video-bg video{position:absolute; top:50%; left:50%; width:100%; height:100%; object-fit:cover; transform:translate(-50%,-50%); pointer-events:none;}
.video-overlay{position:absolute; inset:0; z-index:1; background:linear-gradient(160deg, rgba(19,50,94,.72) 0%, rgba(19,50,94,.55) 45%, rgba(11,31,61,.65) 100%);}
.aurora{position:absolute; inset:0; opacity:.5; mix-blend-mode:screen; z-index:1; pointer-events:none;}
.aurora span{position:absolute; border-radius:50%; filter:blur(70px); animation:drift 22s ease-in-out infinite;}
.aurora span:nth-child(1){width:520px; height:520px; background:radial-gradient(circle,var(--teal),transparent 70%); top:-160px; left:-120px; animation-duration:26s;}
.aurora span:nth-child(2){width:460px; height:460px; background:radial-gradient(circle,var(--coral),transparent 70%); bottom:-200px; right:-80px; animation-duration:20s; animation-delay:-6s;}
.aurora span:nth-child(3){width:340px; height:340px; background:radial-gradient(circle,var(--amber),transparent 70%); top:30%; right:20%; animation-duration:18s; animation-delay:-3s;}
@keyframes drift{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(40px,-30px) scale(1.08);}66%{transform:translate(-30px,25px) scale(.96);}}
.video-toggle{
  position:absolute; z-index:3; bottom:18px; right:18px; display:flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.45); color:#fff; border:1px solid rgba(255,255,255,.4); border-radius:999px;
  padding:8px 14px; font-family:var(--font-mono); font-size:.72rem; cursor:pointer; backdrop-filter:blur(4px);
}
.hero-grid{position:relative; z-index:2; display:grid; gap:40px; align-items:center;}
@media (min-width:900px){ .hero-grid{grid-template-columns:1fr 1fr; gap:48px;} }
.hero-copy .eyebrow{color:#8fd8d9;}
.hero-copy h1{font-size:clamp(2.3rem,5vw,3.7rem); color:#fff; margin:0 0 20px; text-shadow:0 4px 24px rgba(6,14,28,.45);}
.hero-copy .lead{color:rgba(255,255,255,.9); font-size:1.08rem; line-height:1.65; max-width:540px; margin-bottom:28px; text-shadow:0 2px 14px rgba(6,14,28,.4);}
.hero-ctas{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:22px;}

.hero-visual{position:relative; padding:28px 0 40px;}
.hero-device{transform:rotate(-2.5deg); transition:transform .6s ease;}
@media (min-width:900px){ .hero-visual:hover .hero-device{transform:rotate(-1deg) translateY(-4px);} }
.note{
  position:absolute; z-index:3; width:236px; padding:14px 16px; border-radius:6px 6px 14px 6px;
  font-size:.82rem; line-height:1.4; color:var(--ink); box-shadow:0 18px 34px -16px rgba(0,0,0,.5);
  animation:float 7s ease-in-out infinite;
}
.note b{display:block; font-family:var(--font-display); font-size:.98rem; margin-bottom:3px;}
.note::before{content:""; position:absolute; top:-9px; left:50%; width:54px; height:16px; margin-left:-27px; background:rgba(255,255,255,.55); border:1px solid rgba(0,0,0,.08); transform:rotate(-3deg);}
.note-1{background:#fff3c4; top:-6px; left:-6px; --r:-5deg; transform:rotate(-5deg);}
.note-2{background:#d7f3f2; right:-8px; top:38%; --r:4deg; transform:rotate(4deg); animation-delay:-2.4s;}
.note-3{background:#ffe0dc; bottom:-14px; left:12%; --r:-2deg; transform:rotate(-2deg); animation-delay:-4.8s;}
@keyframes float{0%,100%{transform:translateY(0) rotate(var(--r,0deg));}50%{transform:translateY(-10px) rotate(var(--r,0deg));}}
@media (max-width:600px){
  .note{position:relative; width:auto; margin:10px 2px 0; transform:none !important; animation:none; font-size:.8rem; padding:12px 14px;}
  .note::before{display:none;}
  .note-1,.note-2,.note-3{left:auto; right:auto; top:auto; bottom:auto;}
}

/* ---------- finestra app + screenshot-replacement ---------- */
.app-window{background:#fff; border-radius:18px; overflow:hidden; box-shadow:var(--shadow-deep); border:1px solid var(--line); color:var(--ink);}
.app-window-bar{display:flex; align-items:center; gap:8px; padding:12px 14px; background:var(--paper-2); border-bottom:1px solid var(--line);}
.app-window-bar .dot{width:10px; height:10px; border-radius:50%;}
.app-window-url{margin-left:8px; font-family:var(--font-mono); font-size:.7rem; color:var(--muted-2); background:#fff; padding:4px 12px; border-radius:999px; border:1px solid var(--line);}
.app-window-screen{position:relative; aspect-ratio:16/10; background:linear-gradient(160deg,#ffffff 0%,#eef6f6 55%,#e6f1f8 100%);}

/* Ogni contenitore di screenshot ha un rapporto d'aspetto (16/10 di default, aggiornato via JS
   al rapporto reale dell'immagine quando carica) e la figura lo riempie in assoluto. */
.shot-frame{position:relative; aspect-ratio:16/10; overflow:hidden;}
.shot{position:absolute; inset:0; margin:0; width:100%; height:100%;}
.shot img{width:100%; height:100%; object-fit:contain; object-position:center top; cursor:zoom-in;}
/* Cornice sfumata con i colori del logo attorno agli screenshot reali (i colori dell'app sono personalizzabili) */
.shot.is-loaded::before{content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(135deg, rgba(31,160,161,.22), rgba(19,50,94,.12) 55%, rgba(243,103,94,.18)); pointer-events:none;}
.shot.is-loaded img{position:relative; z-index:1; padding:4%;}
.shot.is-missing img{display:none;}
.shot-fallback{display:none; position:absolute; inset:0; padding:22px; overflow:hidden;}
.shot.is-missing .shot-fallback{display:block;}
.shot-missing-tag{
  display:none; position:absolute; right:12px; top:12px; z-index:2;
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--navy); background:rgba(255,255,255,.92); border:1px dashed var(--navy); padding:5px 9px; border-radius:999px;
}
.shot.is-missing .shot-missing-tag{display:inline-block;}

/* fallback illustrativi (dal prototipo) */
.mock-topbar{display:flex; gap:10px; margin-bottom:20px;}
.mock-topbar span{height:12px; border-radius:6px; background:var(--paper-2);}
.mock-topbar span:first-child{width:38%;} .mock-topbar span.short{width:22%;}
.mock-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:22px;}
.mock-stat{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px; text-align:center;}
.mock-stat b{display:block; height:22px; width:40%; margin:0 auto 6px; border-radius:6px; background:var(--sky);}
.mock-stat span{display:block; height:8px; border-radius:4px; background:var(--paper-2);}
.mock-bars{display:flex; align-items:flex-end; gap:10px; height:36%;}
.mock-bar{flex:1; border-radius:8px 8px 0 0; background:linear-gradient(180deg,var(--teal),var(--navy-2)); opacity:.85;}
.mock-doc-head{display:flex; align-items:center; gap:12px; margin-bottom:22px;}
.mock-avatar{width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,var(--coral),var(--amber)); flex:0 0 auto;}
.mock-lines{flex:1;}
.mock-lines .l1{display:block; width:60%; height:12px; border-radius:6px; background:var(--paper-2); margin-bottom:8px;}
.mock-lines .l2{display:block; width:35%; height:10px; border-radius:6px; background:var(--paper-2);}
.mock-field{margin-bottom:16px;}
.mock-label{display:block; width:28%; height:9px; border-radius:5px; background:var(--line); margin-bottom:8px;}
.mock-input{display:block; width:100%; height:32px; border-radius:8px; background:#fff; border:1px solid var(--line);}
.mock-input.short{width:60%;}
.mock-checklist{display:flex; flex-direction:column; gap:10px; margin-top:18px;}
.mock-check{height:14px; border-radius:5px; background:var(--paper-2); position:relative; padding-left:24px;}
.mock-check::before{content:""; position:absolute; left:0; top:0; width:14px; height:14px; border-radius:4px; border:2px solid var(--teal);}
.mock-check.done::before{background:var(--teal);}
.mock-kanban{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px;}
.mock-col{background:#fff; border:1px solid var(--line); border-radius:12px; padding:10px; display:flex; flex-direction:column; gap:8px; min-height:150px;}
.mock-col-title{display:block; width:60%; height:9px; border-radius:5px; background:var(--line); margin-bottom:4px;}
.mock-card{height:34px; border-radius:8px; background:var(--paper-2);}
.mock-avatars{display:flex;}
.mock-avatars span{width:30px; height:30px; border-radius:50%; background:var(--navy-2); border:2px solid #fff; margin-left:-8px;}
.mock-avatars span:first-child{margin-left:0; background:var(--coral);}
.mock-avatars span:nth-child(2){background:var(--teal);} .mock-avatars span:nth-child(3){background:var(--amber);}
.mock-cal-head{margin-bottom:14px;}
.mock-cal-head .short{display:block; width:30%; height:12px; border-radius:6px; background:var(--paper-2);}
.mock-cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:18px;}
.mock-cal-cell{aspect-ratio:1; border-radius:6px; background:var(--paper-2);}
.mock-cal-cell.hi{background:var(--coral);} .mock-cal-cell.hi2{background:var(--amber);}
.mock-deadline{display:flex; align-items:center; gap:10px; margin-bottom:10px;}
.dot-sm{width:9px; height:9px; border-radius:50%; flex:0 0 auto;}
.mock-list{display:flex; flex-direction:column; gap:10px;}
.mock-row{display:flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 12px;}
.mock-row i{width:28px; height:28px; border-radius:8px; background:var(--sky); flex:0 0 auto;}
.mock-row span{display:block; height:9px; border-radius:5px; background:var(--paper-2); flex:1;}
.mock-row span.short{flex:0 0 30%;}
.mock-tiles{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.mock-tile{aspect-ratio:4/3; border-radius:12px; background:#fff; border:1px solid var(--line); position:relative; overflow:hidden;}
.mock-tile::before{content:""; position:absolute; inset:0 0 40% 0; background:var(--sky);}
.mock-tile::after{content:""; position:absolute; left:12%; right:30%; bottom:18%; height:8px; border-radius:4px; background:var(--paper-2);}

/* lightbox */
.lightbox-backdrop{position:fixed; inset:0; z-index:300; background:rgba(6,12,24,.9); display:none; align-items:center; justify-content:center; padding:24px; cursor:zoom-out;}
.lightbox-backdrop.open{display:flex;}
.lightbox-backdrop img{max-width:100%; max-height:100%; border-radius:10px; cursor:default; box-shadow:0 30px 80px -20px rgba(0,0,0,.6);}
.lightbox-close{position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.35); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.lightbox-close svg{width:18px; height:18px;}
.lightbox-close:hover{background:var(--coral-btn); border-color:var(--coral-btn);}

/* ---------- per chi ---------- */
.audience{padding:80px 0 70px;}
@media (min-width:900px){ .audience{padding:120px 0 90px;} }
.audience-grid{display:grid; gap:18px;}
@media (min-width:700px){ .audience-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:1100px){ .audience-grid{grid-template-columns:repeat(4,1fr);} }
.aud-card{
  position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px 24px;
  box-shadow:var(--shadow-card); display:flex; flex-direction:column; gap:12px;
  border-top:4px solid var(--ac,var(--teal));
  opacity:0; transform:translateY(22px) rotate(var(--rot,0deg)); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);
}
.aud-card.visible{opacity:1; transform:translateY(0) rotate(var(--rot,0deg));}
.aud-card:nth-child(1){--ac:var(--navy); --rot:-.8deg;}
.aud-card:nth-child(2){--ac:var(--teal); --rot:.6deg;}
.aud-card:nth-child(3){--ac:var(--amber); --rot:-.5deg;}
.aud-card:nth-child(4){--ac:var(--coral); --rot:.7deg;}
@media (min-width:1100px){ .aud-card:nth-child(even){margin-top:26px;} }
.aud-role{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2);}
.aud-card h3{font-size:1.25rem;}
.aud-card .q{font-family:var(--font-display); font-style:italic; font-size:1rem; color:var(--navy); line-height:1.4;}
.aud-card ul{display:flex; flex-direction:column; gap:8px; flex:1;}
.aud-card li{position:relative; padding-left:20px; font-size:.9rem; color:var(--muted); line-height:1.5;}
.aud-card li::before{content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; background:var(--ac,var(--teal));}
.aud-card .btn{align-self:flex-start; margin-top:6px;}

/* ---------- pilastri ---------- */
.pillars{padding:90px 0 80px;}
@media (min-width:900px){ .pillars{padding:120px 0 100px;} }
.pillar-grid{display:grid; gap:20px;}
@media (min-width:700px){ .pillar-grid{grid-template-columns:repeat(3,1fr);} }
@media (min-width:1100px){ .pillar-grid{grid-template-columns:repeat(5,1fr); gap:18px;} .pillar-grid .pillar:nth-child(even){margin-top:28px;} }
.pillar{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow-card);
  opacity:0; transform:translateY(28px) rotate(var(--rot,0deg)); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1);
}
.pillar.visible{opacity:1; transform:translateY(0) rotate(var(--rot,0deg));}
.pillar:nth-child(1){--rot:-1.2deg;} .pillar:nth-child(2){--rot:.9deg;} .pillar:nth-child(3){--rot:-.6deg;} .pillar:nth-child(4){--rot:.8deg;} .pillar:nth-child(5){--rot:-1deg;}
.pillar .num{font-family:var(--font-mono); font-weight:600; font-size:.78rem; color:#fff; background:var(--teal-ink); width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.pillar:nth-child(2) .num{background:var(--navy);} .pillar:nth-child(3) .num{background:var(--coral-btn);} .pillar:nth-child(4) .num{background:var(--amber); color:var(--navy);} .pillar:nth-child(5) .num{background:var(--navy-2);}
.pillar h3{font-size:1.15rem; margin-bottom:10px;}
.pillar p{font-size:.92rem; line-height:1.6; color:var(--muted);}


/* ---------- tour ---------- */
.tour{padding:90px 0 80px;}
@media (min-width:900px){ .tour{padding:120px 0 110px;} }

/* ---------- sovranità del dato ---------- */
.sovereignty{padding:90px 0 80px;}
@media (min-width:900px){ .sovereignty{padding:120px 0 110px;} }
.sov-grid{display:grid; gap:36px; align-items:start;}
@media (min-width:960px){ .sov-grid{grid-template-columns:1.05fr .95fr; gap:60px;} }
.sov-lead{font-size:1.08rem; color:var(--muted); line-height:1.65; margin:14px 0 28px; max-width:520px;}
.sov-list{display:grid; gap:14px;}
.sov-item{display:grid; grid-template-columns:46px 1fr; gap:14px; align-items:start; background:#fff; border:1px solid var(--line); border-radius:16px; padding:18px 18px 16px; box-shadow:var(--shadow-card);}
.sov-item .ic{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(31,160,161,.12); color:var(--teal-ink);}
.sov-item .ic svg{width:22px; height:22px;}
.sov-item h3{font-size:1.02rem; margin-bottom:4px;}
.sov-item p{font-size:.9rem; color:var(--muted); line-height:1.55;}
.modes{position:relative;}
.modes-head{font-family:var(--font-display); font-size:1.35rem; margin-bottom:18px;}
.mode{
  position:relative; background:var(--navy); color:#fff; border-radius:18px; padding:22px 22px 20px; margin-bottom:14px;
  transform:rotate(var(--rot,0deg)); box-shadow:0 24px 50px -30px rgba(11,31,61,.7);
}
.mode:nth-child(2){--rot:-.9deg;} .mode:nth-child(3){--rot:.8deg; background:var(--navy-2);} .mode:nth-child(4){--rot:-.5deg; background:var(--navy-deep);}
.mode .k{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:#8fd8d9; display:block; margin-bottom:6px;}
.mode h4{font-size:1.1rem; margin-bottom:6px; color:#fff;}
.mode p{font-size:.88rem; color:rgba(255,255,255,.82); line-height:1.55;}
.mode .tag{position:absolute; top:16px; right:16px; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.06em; text-transform:uppercase; background:rgba(255,255,255,.14); padding:4px 9px; border-radius:999px;}

/* ---------- sicurezza ---------- */
.trust{padding:90px 0 80px; background:var(--paper-2);}
@media (min-width:900px){ .trust{padding:120px 0 110px;} }
.trust-grid{display:grid; gap:18px;}
@media (min-width:640px){ .trust-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:1000px){ .trust-grid{grid-template-columns:repeat(3,1fr); gap:22px;} }
.trust-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px; box-shadow:var(--shadow-card);}
.trust-ic{width:50px; height:50px; border-radius:13px; margin-bottom:16px; background:rgba(31,160,161,.12); color:var(--teal-ink); display:flex; align-items:center; justify-content:center;}
.trust-ic svg{width:25px; height:25px;}
.trust-card h3{font-size:1.05rem; margin-bottom:8px;}
.trust-card p{font-size:.9rem; color:var(--muted); line-height:1.55;}
.trust-card .src{display:block; margin-top:12px; font-family:var(--font-mono); font-size:.64rem; letter-spacing:.05em; color:var(--muted-2); text-transform:uppercase;}
.badge-row{margin-top:34px; display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.badge{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.05em; color:var(--navy); background:#fff; border:1px solid var(--line); padding:8px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;}
.badge::before{content:""; width:8px; height:8px; border-radius:50%; background:var(--teal);}
.trust-note{max-width:640px; margin:26px auto 0; text-align:center; font-size:.86rem; color:var(--muted-2); line-height:1.55;}

/* ---------- video showcase ---------- */
.showcase{padding:90px 0 80px;}
@media (min-width:900px){ .showcase{padding:120px 0 110px;} }
.player-shell{position:relative; max-width:920px; margin:0 auto 30px; padding:14px;}
@media (min-width:700px){ .player-shell{padding:36px;} }
@media (max-width:900px){ .player-shell .player-ambient{transform:none; border-radius:24px;} }
.player-ambient{position:absolute; inset:0; width:100%; height:100%; filter:blur(46px) saturate(1.7) brightness(.95); transform:scale(1.08); opacity:.85; z-index:0; border-radius:40px;}
.player-frame{position:relative; z-index:1; aspect-ratio:16/9; border-radius:18px; overflow:hidden; background:#0a0f18; box-shadow:0 30px 70px -24px rgba(19,50,94,.55), 0 0 0 1px rgba(255,255,255,.06);}
.player-frame video{width:100%; height:100%; object-fit:cover; background:#000;}
.player-meta{position:absolute; top:0; left:0; right:0; z-index:3; padding:18px 20px; background:linear-gradient(180deg, rgba(6,12,24,.75) 0%, rgba(6,12,24,0) 100%); transition:opacity .4s ease; pointer-events:none;}
.player-frame.is-playing .player-meta{opacity:0;}
.player-tag{display:inline-block; font-family:var(--font-mono); font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8fd8d9; background:rgba(31,160,161,.18); border:1px solid rgba(143,216,217,.3); padding:4px 10px; border-radius:999px; margin-bottom:8px;}
.player-meta h3{color:#fff; font-size:1.2rem; margin:0 0 4px;}
.player-meta p{color:rgba(255,255,255,.75); font-size:.85rem; max-width:440px; line-height:1.5;}
.player-bigplay{position:absolute; inset:0; margin:auto; width:74px; height:74px; z-index:2; border-radius:50%; border:1px solid rgba(255,255,255,.4); background:rgba(19,50,94,.5); backdrop-filter:blur(6px); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .25s ease, background .25s ease, opacity .3s ease;}
.player-bigplay svg{width:28px; height:28px; margin-left:3px;}
.player-bigplay:hover{transform:scale(1.08); background:var(--coral-btn);}
.player-frame.is-playing .player-bigplay{opacity:0; pointer-events:none; transform:scale(.8);}
.player-missing{position:absolute; inset:0; z-index:1; display:none; align-items:center; justify-content:center; text-align:center; padding:24px; color:#fff; background:radial-gradient(circle at 30% 20%, rgba(31,160,161,.45), transparent 55%), radial-gradient(circle at 80% 80%, rgba(243,103,94,.4), transparent 55%), var(--navy);}
.player-frame.is-missing .player-missing{display:flex;}
.player-frame.is-missing .player-bigplay, .player-frame.is-missing .player-controls{display:none;}
.player-missing p{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.85); max-width:360px; line-height:1.6;}
.player-controls{position:absolute; left:0; right:0; bottom:0; z-index:3; display:flex; align-items:center; gap:10px; padding:12px 14px; background:linear-gradient(0deg, rgba(6,12,24,.85) 0%, rgba(6,12,24,0) 100%);}
.pc-btn{background:none; border:none; color:#fff; cursor:pointer; width:34px; height:34px; display:flex; align-items:center; justify-content:center; opacity:.9; flex:0 0 auto; padding:0;}
.pc-btn:hover{opacity:1;}
.pc-btn svg{width:19px; height:19px;}
.pc-time{font-family:var(--font-mono); font-size:.72rem; color:rgba(255,255,255,.85); flex:0 0 auto; min-width:34px;}
.pc-progress{flex:1; appearance:none; height:4px; border-radius:3px; cursor:pointer; background:rgba(255,255,255,.25); accent-color:var(--coral);}
.pc-progress::-webkit-slider-thumb{appearance:none; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 0 0 3px rgba(243,103,94,.4); cursor:pointer;}
.pc-progress::-moz-range-thumb{width:14px; height:14px; border-radius:50%; border:none; background:#fff; box-shadow:0 0 0 3px rgba(243,103,94,.4); cursor:pointer;}
.playlist{display:flex; gap:14px; overflow-x:auto; padding:6px 4px 14px; scrollbar-width:thin;}
.playlist-item{position:relative; flex:0 0 auto; width:210px; cursor:pointer; border-radius:16px; padding:3px; background:transparent; border:none; text-align:left;}
.playlist-item::before{content:""; position:absolute; inset:0; border-radius:16px; padding:2px; background:conic-gradient(from var(--ang,0deg), var(--teal), var(--coral), var(--amber), var(--teal)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:opacity .3s ease; animation:spin-ring 4s linear infinite paused;}
.playlist-item.active::before{opacity:1; animation-play-state:running;}
@keyframes spin-ring{to{--ang:360deg;}}
@property --ang{syntax:'<angle>'; inherits:false; initial-value:0deg;}
.playlist-card{background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .25s ease, box-shadow .25s ease;}
.playlist-item:hover .playlist-card{transform:translateY(-3px); box-shadow:0 16px 30px -18px rgba(19,50,94,.35);}
.playlist-thumb{position:relative; aspect-ratio:16/9; background:linear-gradient(135deg,var(--navy),var(--navy-2)); overflow:hidden;}
.playlist-thumb img{width:100%; height:100%; object-fit:cover;}
.playlist-thumb .pt-play{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(6,12,24,.25); color:#fff; opacity:0; transition:opacity .2s ease;}
.playlist-item:hover .pt-play, .playlist-item.active .pt-play{opacity:1;}
.playlist-item.active .pt-play{color:var(--coral);}
.playlist-thumb .pt-play svg{width:26px; height:26px;}
.playlist-duration{position:absolute; bottom:6px; right:6px; font-family:var(--font-mono); font-size:.65rem; color:#fff; background:rgba(0,0,0,.6); padding:2px 6px; border-radius:5px;}
.playlist-info{padding:10px 12px 12px;}
.playlist-info h4{font-family:var(--font-body); font-size:.85rem; font-weight:600; margin:0 0 2px; color:var(--ink);}
.playlist-info span{font-size:.72rem; color:var(--muted-2);}

/* ---------- ecosistema ---------- */
.ecosystem{padding:90px 0 80px;}
@media (min-width:900px){ .ecosystem{padding:120px 0 110px;} }
.steps{display:grid; gap:26px; counter-reset:step;}
@media (min-width:800px){ .steps{grid-template-columns:repeat(3,1fr); gap:32px;} }
.step{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.step.visible{opacity:1; transform:translateY(0);}
.step .stepnum{font-family:var(--font-mono); font-weight:600; font-size:1rem; width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px dashed var(--coral-ink); color:var(--coral-ink); margin-bottom:16px;}
.step h3{font-size:1.15rem; margin-bottom:8px;}
.step p{font-size:.93rem; color:var(--muted); line-height:1.6;}
.engine-steps{margin-bottom:60px;}
.project-grid{display:grid; gap:22px; margin-bottom:60px;}
@media (min-width:900px){ .project-grid{grid-template-columns:repeat(3,1fr); gap:26px;} }
.project-card{background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px 26px; box-shadow:var(--shadow-card); border-top:3px solid var(--accent,var(--teal));}
.project-ic{width:50px; height:50px; border-radius:14px; margin-bottom:16px; background:rgba(19,50,94,.08); color:var(--accent,var(--teal)); display:flex; align-items:center; justify-content:center;}
.project-ic svg{width:25px; height:25px;}
.project-card h3{font-size:1.2rem; margin-bottom:10px;}
.project-lead{font-size:.92rem; color:var(--muted); line-height:1.55; margin-bottom:16px; font-style:italic;}
.check-list li{position:relative; padding-left:24px; margin-bottom:10px; font-size:.88rem; line-height:1.45;}
.check-list li::before{content:"✓"; position:absolute; left:0; top:-1px; color:var(--teal-ink); font-weight:700;}
.project-card .check-list li::before{color:var(--accent-ink,var(--teal-ink));}
.project-note{font-size:.8rem; color:var(--muted-2); line-height:1.5; margin-top:14px; padding-top:12px; border-top:1px dashed var(--line);}
.project-shot{margin:18px -8px 0; border-radius:12px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; position:relative; background:linear-gradient(160deg,#ffffff,#eef6f6);}
.manifesto{max-width:860px; margin:0 auto; text-align:center; background:var(--navy); color:#fff; border-radius:26px; padding:44px 26px;}
@media (min-width:800px){ .manifesto{padding:56px 40px;} }
.manifesto blockquote{margin:0 0 34px; font-family:var(--font-display); font-style:italic; font-weight:500; font-size:clamp(1.3rem,2.4vw,1.8rem); line-height:1.45;}
.manifesto-grid{display:grid; gap:22px; text-align:center;}
@media (min-width:800px){ .manifesto-grid{grid-template-columns:repeat(3,1fr); text-align:left;} }
.manifesto-item .num{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; margin-bottom:10px; background:rgba(255,255,255,.14); font-family:var(--font-mono); font-size:.8rem; font-weight:600;}
.manifesto-item h4{font-size:1.02rem; margin-bottom:6px; color:#fff;}
.manifesto-item p{color:rgba(255,255,255,.75); font-size:.85rem; line-height:1.5;}

/* ---------- come funziona ---------- */
.how{padding:90px 0 80px;}
@media (min-width:900px){ .how{padding:120px 0 110px;} }

/* ---------- moduli ---------- */
.modules{padding:90px 0 80px; background:var(--paper-2);}
@media (min-width:900px){ .modules{padding:120px 0 110px;} }
.modules-grid{display:grid; gap:18px; margin-bottom:26px;}
@media (min-width:640px){ .modules-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:1000px){ .modules-grid{grid-template-columns:repeat(3,1fr); gap:22px;} }
.module-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:26px 22px 22px; box-shadow:var(--shadow-card);}
.module-card.premium,.module-card.school{border-color:rgba(221,161,43,.5);}
.module-badge{position:absolute; top:16px; right:16px; font-family:var(--font-mono); font-size:.64rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:4px 10px; border-radius:999px;}
.module-badge.free{color:var(--teal-ink); background:rgba(31,160,161,.12);}
.module-badge.premium,.module-badge.school{color:var(--amber-ink); background:rgba(221,161,43,.18);}
.module-ic{width:48px; height:48px; border-radius:13px; margin-bottom:16px; background:rgba(19,50,94,.07); color:var(--navy); display:flex; align-items:center; justify-content:center;}
.module-card.premium .module-ic,.module-card.school .module-ic{color:var(--amber-ink); background:rgba(221,161,43,.14);}
.module-ic svg{width:24px; height:24px;}
.module-card h3{font-size:1.02rem; margin-bottom:8px; padding-right:74px;}
.module-sub{font-family:var(--font-body); font-weight:500; font-size:.82rem; color:var(--muted-2);}
.module-card p{font-size:.88rem; color:var(--muted); line-height:1.55;}
.module-shot{margin-top:16px; border-radius:10px; overflow:hidden; border:1px solid var(--line); aspect-ratio:16/10; position:relative; background:linear-gradient(160deg,#ffffff,#eef6f6);}
.module-shot .shot-fallback{padding:14px;}
.modules-note{text-align:center; font-size:.84rem; color:var(--muted-2); max-width:600px; margin:0 auto;}

/* ---------- prezzi ---------- */
.pricing{padding:90px 0 80px;}
@media (min-width:900px){ .pricing{padding:120px 0 110px;} }
.price-grid{display:grid; gap:18px; align-items:stretch;}
@media (min-width:640px){ .price-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:1100px){ .price-grid{grid-template-columns:repeat(4,1fr); gap:20px;} .price-card.featured{transform:translateY(-14px);} }
.price-card{position:relative; background:#fff; border:1px solid var(--line); border-radius:22px; padding:30px 24px; display:flex; flex-direction:column; box-shadow:var(--shadow-card);}
.price-card.featured{border-color:var(--coral-btn); box-shadow:0 30px 60px -26px rgba(201,68,54,.4);}
.price-card.gold{border-color:rgba(221,161,43,.6);}
.price-badge{position:absolute; top:-14px; left:22px; background:var(--coral-btn); color:#fff; font-family:var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.06em; padding:6px 12px; border-radius:999px; white-space:nowrap;}
.price-tier{font-family:var(--font-mono); font-weight:600; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--teal-ink);}
.price-card.gold .price-tier{color:var(--amber-ink);}
.price-amount{font-family:var(--font-display); font-size:1.9rem; font-weight:600; color:var(--navy); margin:12px 0 6px;}
.price-amount.small{font-size:1.5rem; padding-top:6px;}
.price-amount span{font-family:var(--font-body); font-size:.78rem; font-weight:500; color:var(--muted-2); margin-left:4px;}
.price-tagline{font-size:.88rem; color:var(--muted); margin-bottom:18px; line-height:1.45;}
.price-list{flex:1; margin-bottom:22px;}
.price-list li{position:relative; padding-left:24px; margin-bottom:11px; font-size:.87rem; line-height:1.4;}
.price-list li::before{content:"✓"; position:absolute; left:0; top:-1px; color:var(--teal-ink); font-weight:700;}
.price-card.gold .price-list li::before{color:var(--amber-ink);}
.price-btn{width:100%;}
.price-btn-gold{border-color:var(--amber); color:var(--amber-ink);}
.price-btn-gold:hover{background:var(--amber-ink); color:#fff; border-color:var(--amber-ink);}
.services-strip{margin-top:34px; background:var(--navy); color:#fff; border-radius:20px; padding:26px 24px; display:grid; gap:14px; align-items:center;}
@media (min-width:900px){ .services-strip{grid-template-columns:auto 1fr; gap:30px; padding:28px 34px;} }
.services-strip h3{font-size:1.1rem; color:#fff;}
.services-strip ul{display:flex; flex-wrap:wrap; gap:8px 10px;}
.services-strip li{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em; background:rgba(255,255,255,.12); padding:7px 12px; border-radius:999px;}
.pricing-foot{text-align:center; font-size:.82rem; color:var(--muted-2); margin-top:22px;}

/* ---------- FAQ ---------- */
.faq{padding:90px 0 80px; background:var(--paper-2);}
@media (min-width:900px){ .faq{padding:120px 0 110px;} }
.faq-list{max-width:820px; margin:0 auto; display:grid; gap:12px;}
.faq-item{background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow-card);}
.faq-item summary{list-style:none; cursor:pointer; padding:20px 56px 20px 22px; font-family:var(--font-display); font-size:1.08rem; font-weight:600; position:relative;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; position:absolute; right:20px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:50%; background:var(--paper-2); color:var(--navy); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:1.1rem; transition:transform .25s ease, background .25s ease;}
.faq-item[open] summary::after{content:"–"; background:var(--teal); color:#fff;}
.faq-item .faq-a{padding:0 22px 22px; font-size:.95rem; color:var(--muted); line-height:1.65;}
.faq-item .faq-a p + p{margin-top:8px;}

/* ---------- CTA band ---------- */
.cta-band{position:relative; overflow:hidden; background:linear-gradient(120deg,var(--coral-btn),#a0661a); clip-path:polygon(0 8%,100% 0,100% 100%,0 100%); padding:110px 0 90px; text-align:center; color:#fff;}
@media (min-width:900px){ .cta-band{padding:130px 0 110px; clip-path:polygon(0 12%,100% 0,100% 100%,0 100%);} }
.cta-band h2{color:#fff; font-size:clamp(1.9rem,3.4vw,2.7rem); max-width:620px; margin:0 auto 18px;}
.cta-band p{color:rgba(255,255,255,.95); max-width:520px; margin:0 auto 30px; font-size:1.02rem; line-height:1.6;}
.cta-band .btn-outline{border-color:#fff; color:#fff;}
.cta-band .btn-outline:hover{background:#fff; color:var(--coral-btn);}
.cta-band .badge{background:rgba(255,255,255,.18); color:#fff; border-color:transparent;}
.cta-band .badge::before{background:#fff;}

/* ---------- slider partner ---------- */
.partner-slider{position:relative; width:100%; height:84vh; min-height:540px; max-height:760px; overflow:hidden; background:var(--navy); color:#fff;}
.ps-slides{position:relative; width:100%; height:100%;}
.ps-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1s ease; z-index:1;}
.ps-slide.active{opacity:1; visibility:visible; z-index:2;}
.ps-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); animation:ps-kenburns 12s ease-in-out infinite alternate;}
.ps-bg{position:absolute; inset:0; background:radial-gradient(circle at 20% 30%, rgba(31,160,161,.45), transparent 50%), radial-gradient(circle at 80% 70%, rgba(243,103,94,.35), transparent 50%), var(--navy);}
@keyframes ps-kenburns{from{transform:scale(1.06) translate(0,0);}to{transform:scale(1.14) translate(-1%,-1%);}}
.ps-scrim{position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,20,36,.85) 0%, rgba(11,20,36,.6) 45%, rgba(11,20,36,.35) 100%), linear-gradient(0deg, rgba(11,20,36,.6) 0%, rgba(11,20,36,0) 35%);}
.ps-content{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; justify-content:center; max-width:640px; padding:0 24px; opacity:0; transform:translateY(16px); transition:opacity .7s ease .15s, transform .7s ease .15s;}
@media (min-width:700px){ .ps-content{padding:0 8vw;} }
.ps-slide.active .ps-content{opacity:1; transform:translateY(0);}
.ps-tag{display:inline-block; align-self:flex-start; font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#8fd8d9; background:rgba(31,160,161,.18); border:1px solid rgba(143,216,217,.3); padding:6px 14px; border-radius:999px; margin-bottom:18px;}
.ps-content h2{color:#fff; font-size:clamp(1.7rem,3.6vw,2.6rem); line-height:1.2; margin-bottom:16px; text-shadow:0 4px 24px rgba(0,0,0,.4);}
.ps-content p{color:rgba(255,255,255,.9); font-size:1.02rem; line-height:1.6; max-width:520px; text-shadow:0 2px 14px rgba(0,0,0,.35);}
.ps-cta{margin-top:26px; align-self:flex-start;}
.ps-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.35); color:#fff; backdrop-filter:blur(4px); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s ease;}
.ps-arrow svg{width:20px; height:20px;}
.ps-arrow:hover{background:var(--coral-btn); border-color:var(--coral-btn);}
.ps-prev{left:12px;} .ps-next{right:12px;}
@media (min-width:700px){ .ps-prev{left:24px;} .ps-next{right:24px;} }
.ps-dots{position:absolute; left:0; right:0; bottom:22px; z-index:5; display:flex; gap:10px; justify-content:center;}
.ps-dot{width:34px; height:6px; border-radius:3px; background:rgba(255,255,255,.3); border:none; cursor:pointer; padding:0; overflow:hidden; position:relative;}
.ps-dot b{position:absolute; inset:0; width:0%; background:var(--coral); display:block;}
.ps-dot.active b{width:100%; transition:width 6s linear;}

/* ---------- rete ---------- */
.network{padding:90px 0 80px; background:var(--paper-2);}
@media (min-width:900px){ .network{padding:120px 0 110px;} }
.network-grid{display:grid; gap:20px; margin-bottom:40px;}
@media (min-width:640px){ .network-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:1100px){ .network-grid{grid-template-columns:repeat(4,1fr); gap:24px;} }
.network-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-card);}
.network-banner{height:92px; display:flex; align-items:center; justify-content:center; color:#fff;}
.network-banner svg{width:38px; height:38px;}
.network-banner-teal{background:linear-gradient(135deg,var(--teal),#0f6e6f);}
.network-banner-coral{background:linear-gradient(135deg,var(--coral),#c14a3d);}
.network-banner-amber{background:linear-gradient(135deg,var(--amber),#a9791d);}
.network-banner-navy{background:linear-gradient(135deg,var(--navy),var(--navy-deep));}
.network-body{padding:22px 20px 24px; position:relative;}
.network-logo{position:absolute; top:-24px; left:20px; width:48px; height:48px; border-radius:12px; background:#fff; border:1px solid var(--line); box-shadow:0 8px 18px -8px rgba(19,50,94,.4); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-weight:600; font-size:.85rem; color:var(--nc,var(--navy));}
.network-body h3{font-size:1.02rem; margin:16px 0 4px;}
.network-tag{display:block; font-family:var(--font-mono); font-size:.66rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); margin-bottom:10px;}
.network-body p{font-size:.88rem; color:var(--muted); line-height:1.55;}
.partner-feature{display:grid; gap:20px; align-items:center; background:#fff; border:1px dashed var(--navy); border-radius:20px; padding:26px 24px; margin-bottom:40px;}
@media (min-width:800px){ .partner-feature{grid-template-columns:200px 1fr; gap:30px; padding:30px 34px;} }
.partner-logo-slot{aspect-ratio:3/2; border-radius:14px; background:var(--grid,repeating-linear-gradient(45deg,var(--paper-2) 0 10px,#fff 10px 20px)); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; text-align:center; padding:14px;}
.partner-logo-slot span{font-family:var(--font-mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2); line-height:1.5;}
.partner-logo-slot img{max-height:90px; width:auto; object-fit:contain;}
.partner-feature h3{font-size:1.2rem; margin-bottom:6px;}
.partner-feature p{font-size:.92rem; color:var(--muted); line-height:1.6;}
.criteria{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.criteria li{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.04em; background:var(--paper-2); color:var(--navy); padding:6px 11px; border-radius:999px;}
.network-cta{display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px 26px; box-shadow:var(--shadow-card);}
@media (min-width:800px){ .network-cta{padding:32px 36px;} }
.network-cta h3{font-size:1.2rem; margin-bottom:6px;}
.network-cta p{font-size:.92rem; color:var(--muted); max-width:520px; line-height:1.55;}

/* ---------- modal ---------- */
.modal-backdrop{position:fixed; inset:0; z-index:200; background:rgba(9,16,28,.55); backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:16px;}
.modal-backdrop.open{display:flex;}
.modal{position:relative; width:100%; max-width:540px; max-height:92vh; overflow-y:auto; background:#fff; border-radius:22px; padding:34px 24px; box-shadow:0 40px 90px -20px rgba(6,12,24,.5);}
@media (min-width:600px){ .modal{padding:38px 36px;} }
.modal-close{position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; background:var(--paper-2); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.modal-close svg{width:16px; height:16px;}
.modal h3{font-size:1.4rem; margin:8px 0 8px;}
.modal-sub{font-size:.92rem; color:var(--muted); margin-bottom:24px;}
.form-row{margin-bottom:14px;}
.form-row-2{display:grid; gap:14px;}
@media (min-width:520px){ .form-row-2{grid-template-columns:1fr 1fr;} }
.form-row label{display:block; font-family:var(--font-mono); font-size:.7rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--muted-2); margin-bottom:7px;}
.form-row input,.form-row select,.form-row textarea{width:100%; border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-family:var(--font-body); font-size:.95rem; color:var(--ink); background:var(--paper);}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{outline:none; border-color:var(--teal-ink); box-shadow:0 0 0 3px rgba(31,160,161,.2); background:#fff;}
.form-row textarea{resize:vertical;}
.form-submit{width:100%; margin-top:6px;}
.form-note{font-size:.78rem; color:var(--muted-2); text-align:center; margin-top:12px; line-height:1.5;}
.form-success{text-align:center; padding:10px 0 4px;}
.form-success-icon{width:56px; height:56px; border-radius:50%; background:rgba(31,160,161,.12); color:var(--teal-ink); display:flex; align-items:center; justify-content:center; margin:0 auto 18px;}
.form-success-icon svg{width:26px; height:26px;}
.form-success h3{font-size:1.3rem; margin-bottom:8px;}
.form-success p{font-size:.92rem; color:var(--muted); margin-bottom:22px;}

/* ---------- footer ---------- */
.site-footer{padding:70px 0 36px; background:var(--paper);}
.foot-grid{display:grid; gap:28px; margin-bottom:40px;}
@media (min-width:640px){ .foot-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:960px){ .foot-grid{grid-template-columns:1.4fr repeat(3,1fr); gap:32px;} }
.foot-logo .logo-icon{height:48px;}
.foot-logo .logo-word{color:var(--navy);}
.foot-logo .logo-sos{color:var(--coral-ink);}
.foot-brand p{color:var(--muted); font-size:.92rem; margin-top:14px; max-width:300px; line-height:1.6;}
.foot-col h4{font-family:var(--font-mono); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--navy); margin-bottom:14px;}
.foot-col a{display:block; font-size:.92rem; color:var(--muted); margin-bottom:10px;}
.foot-col a:hover{color:var(--coral-ink);}
.foot-bottom{border-top:1px solid var(--line); padding-top:22px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; font-size:.82rem; color:var(--muted-2);}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .pillar,.step,.aud-card{opacity:1; transform:none;}
  .tour-step{opacity:1;}
  .ps-video{animation:none; transform:none;}
  .note{animation:none;}
}


/* =============== Revisione "cinque atti" =============== */
.oc-badge{display:inline-block; font-family:var(--font-mono); font-weight:600; font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; color:var(--navy); background:rgba(221,161,43,.28); border:1px solid rgba(221,161,43,.6); padding:4px 10px; border-radius:999px; margin-right:8px; vertical-align:middle;}
.hero .oc-badge{color:#fff; background:rgba(221,161,43,.3); border-color:rgba(255,255,255,.5);}
.oc-badge-light{color:#fff; background:rgba(255,255,255,.18); border-color:rgba(255,255,255,.6); margin:0 0 16px;}
.bridge{max-width:620px; margin:56px auto 0; text-align:center; font-family:var(--font-display); font-style:italic; font-size:1.15rem; color:var(--navy); line-height:1.5; position:relative; padding-top:22px;}
.bridge::before{content:""; position:absolute; top:0; left:50%; width:42px; height:3px; margin-left:-21px; border-radius:2px; background:var(--amber);}
.bridge-dark{color:#fff;}
.bridge-dark::before{background:var(--amber);}
.section-head .sub strong{color:var(--navy);}
.cta-center{justify-content:center; margin-bottom:0;}
button.btn{appearance:none;}

/* Atto 1 · il progetto */
.project{padding:80px 0 70px;}
@media (min-width:900px){ .project{padding:110px 0 90px;} }
#progetto{padding-bottom:30px;}
#organizzazione{padding-top:30px;}
.proj-grid{display:grid; gap:18px; margin-bottom:40px;}
@media (min-width:800px){ .proj-grid{grid-template-columns:repeat(3,1fr); gap:22px;} }
.proj-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px 24px; box-shadow:var(--shadow-card); transform:rotate(var(--rot,0deg));}
.proj-card:nth-child(1){--rot:-.8deg;} .proj-card:nth-child(2){--rot:.5deg;} .proj-card:nth-child(3){--rot:-.5deg;}
.proj-ic{width:50px; height:50px; border-radius:14px; background:rgba(31,160,161,.12); color:var(--teal-ink); display:flex; align-items:center; justify-content:center; margin-bottom:16px;}
.proj-ic svg{width:25px; height:25px;}
.proj-card h3{font-size:1.2rem; margin-bottom:8px;}
.proj-card p{font-size:.93rem; color:var(--muted); line-height:1.6;}
.audience-band{display:grid; gap:18px;}
@media (min-width:860px){ .audience-band{grid-template-columns:1.1fr .9fr; gap:22px;} }
.aud{background:var(--navy); color:#fff; border-radius:22px; padding:30px 28px; display:flex; flex-direction:column; gap:12px;}
.aud-dir{background:#fff; color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow-card);}
.aud .aud-role{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:#8fd8d9;}
.aud-dir .aud-role{color:var(--teal-ink);}
.aud h3{font-size:1.5rem; color:inherit;}
.aud ul{display:grid; gap:8px; flex:1;}
.aud li{position:relative; padding-left:20px; font-size:.95rem; line-height:1.5; color:rgba(255,255,255,.88);}
.aud-dir li{color:var(--muted);}
.aud li::before{content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; border-radius:50%; background:var(--amber);}
.aud .btn{align-self:flex-start; margin-top:6px;}

/* Atto 2 · servizi nel tour + componi */

/* Atto 3 · sicurezza, una sola sezione sobria */
.trust{background:var(--navy); color:#fff;}
.trust-wrap{max-width:900px;}
.trust-intro{text-align:center; max-width:720px; margin:0 auto 36px;}
.trust-intro .eyebrow{color:#8fd8d9;}
.trust-intro h2{font-size:clamp(1.7rem,3vw,2.4rem); color:#fff;}
.trust-intro .sub{color:rgba(255,255,255,.82);}
.guarantees{display:grid; gap:12px;}
@media (min-width:760px){ .guarantees{grid-template-columns:1fr 1fr; gap:14px;} }
.guarantees li{position:relative; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:14px; padding:16px 18px 16px 46px; font-size:.95rem; line-height:1.55; color:rgba(255,255,255,.9);}
.guarantees li b{color:#fff;}
.guarantees li::before{content:""; position:absolute; left:16px; top:19px; width:18px; height:18px; border-radius:50%; background:var(--teal); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); background-size:11px; background-repeat:no-repeat; background-position:center;}

/* Atto 5 · progetto di vita */
.life{padding:90px 0 80px;}
@media (min-width:900px){ .life{padding:120px 0 110px;} }

/* Atto 6 · confronto */
.compare{margin-top:48px; background:#fff; border:1px solid var(--line); border-radius:22px; padding:24px 18px; box-shadow:var(--shadow-card);}
@media (min-width:900px){ .compare{padding:32px 34px;} }
.compare-head{text-align:center; margin-bottom:18px;}
.compare-head h3{font-size:1.4rem; margin-bottom:6px;}
.compare-head p{font-size:.9rem; color:var(--muted-2);}
.compare-tabs{display:flex; gap:6px; overflow-x:auto; padding-bottom:12px; margin-bottom:6px; scrollbar-width:none;}
.ct{flex:1 0 auto; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.03em; padding:9px 12px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--navy); cursor:pointer; white-space:nowrap;}
.ct.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.compare-table{width:100%; border-collapse:collapse; font-size:.9rem;}
.compare-table th, .compare-table td{padding:11px 10px; border-bottom:1px solid var(--paper-2); text-align:center; vertical-align:middle;}
.compare-table thead th{font-family:var(--font-mono); font-size:.7rem; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); border-bottom:2px solid var(--line); line-height:1.4;}
.compare-table thead th small{display:block; font-family:var(--font-body); font-size:.78rem; text-transform:none; letter-spacing:0; color:var(--muted-2); font-weight:500;}
.compare-table thead th.c-rec{background:rgba(201,68,54,.06); border-radius:10px 10px 0 0;}
.compare-table .c-feat, .compare-table tbody th{text-align:left; font-weight:500; color:var(--ink);}
.compare-table tbody th small{display:block; font-size:.74rem; color:var(--muted-2); font-weight:400; line-height:1.4; margin-top:2px;}
.compare-table .c-area th{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--coral-ink); background:var(--paper); padding-top:16px; border-bottom:1px solid var(--line);}
.compare-table i.yes, .compare-table i.no, .compare-legend i{display:inline-block; width:20px; height:20px; border-radius:50%; vertical-align:middle;}
.compare-table i.yes, .compare-legend i.yes{background:var(--teal); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E"); background-size:12px; background-repeat:no-repeat; background-position:center;}
.compare-table i.no, .compare-legend i.no{background:var(--paper-2); position:relative;}
.compare-table i.no::after, .compare-legend i.no::after{content:""; position:absolute; left:6px; right:6px; top:9px; height:2px; background:#b7bfc9; border-radius:1px;}
.compare-legend{margin-top:14px; font-size:.8rem; color:var(--muted-2); text-align:center;}
/* mobile: una colonna alla volta, scelta con le schede */
@media (max-width:899px){
  .compare-table th:not(.c-feat):not(:first-child), .compare-table td{display:none;}
  .compare-table[data-show="1"] th:nth-child(2), .compare-table[data-show="1"] td:nth-child(2),
  .compare-table[data-show="2"] th:nth-child(3), .compare-table[data-show="2"] td:nth-child(3),
  .compare-table[data-show="3"] th:nth-child(4), .compare-table[data-show="3"] td:nth-child(4),
  .compare-table[data-show="4"] th:nth-child(5), .compare-table[data-show="4"] td:nth-child(5){display:table-cell;}
  .compare-table .c-area th{display:table-cell;}
  .compare-table thead th.c-rec{background:none;}
}
@media (min-width:900px){ .compare-tabs{display:none;} .compare-scroll{overflow:visible;} }


/* =============== Slider di schermate, figura sicurezza, chiusura con accesso =============== */
.cta-grid{display:grid; gap:36px; align-items:center; text-align:left;}
@media (min-width:900px){ .cta-grid{grid-template-columns:1fr 1fr; gap:56px;} }
.cta-visual .app-window{transform:rotate(2deg); box-shadow:0 40px 90px -30px rgba(0,0,0,.55);}
.cta-visual .app-window-screen{aspect-ratio:3/2;}
.cta-visual .shot img{object-fit:cover; padding:0;}
.cta-visual .shot.is-loaded::before{display:none;}
.cta-band h2{margin-left:0; margin-right:0;}
.cta-band p{margin-left:0; margin-right:0;}
@media (max-width:899px){ .cta-grid{text-align:center;} .cta-copy .hero-ctas{justify-content:center;} }

/* =====================================================================
   Revisione 19/10 · Organizzazione: aree a righe grandi, panoramica moduli,
   presentazione PDF nella sezione sicurezza. Nessun autoplay: le schermate
   cambiano solo quando l'utente sceglie una scheda.
   ===================================================================== */
.areas{display:flex; flex-direction:column; gap:56px;}
@media (min-width:900px){ .areas{gap:92px;} }
.area-row{display:grid; gap:24px; align-items:center;}
@media (min-width:900px){
  .area-row{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:52px;}
  .area-row:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .area-row:nth-child(even) .area-text{order:2;}
}
.area-tag{display:flex; align-items:baseline; gap:10px; margin-bottom:12px; font-family:var(--font-display); font-size:1rem; color:var(--navy);}
.area-tag b{font-family:var(--font-mono); font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-ink);}
.area-text h3{font-size:clamp(1.35rem,2.2vw,1.8rem); margin-bottom:12px;}
.area-text p{font-size:1rem; color:var(--muted); line-height:1.65; max-width:46ch;}
.shot-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.shot-tabs button{font:inherit; font-size:.82rem; font-weight:600; padding:8px 14px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--navy); cursor:pointer; transition:background .15s, color .15s, border-color .15s;}
.shot-tabs button:hover{border-color:var(--navy);}
.shot-tabs button.active{background:var(--navy); border-color:var(--navy); color:#fff;}
.shot-tabs button:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.area-view .app-window{box-shadow:var(--shadow-deep);}
.area-view .app-window-screen{aspect-ratio:1600/860;}
.area-view .view-slide{position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s;}
.area-view .view-slide.active{opacity:1; visibility:visible; transition:opacity .25s ease;}
.area-view .view-slide .shot img{object-fit:contain; object-position:center; padding:0;}
.area-view .view-slide .shot.is-loaded::before{display:none;}
.area-view .area-single-shot{position:relative; aspect-ratio:1229/768; overflow:visible; border-radius:0; background:transparent; box-shadow:none;}
.area-view .area-composition{aspect-ratio:28/17;}
.area-view .area-single-shot img{object-fit:contain; object-position:center; padding:0;}
.area-view .area-single-shot.is-loaded::before{display:none;}
.url-cap{color:var(--navy);}

/* Area 4: servizi, in una griglia che sta sempre nel suo riquadro */

/* Componi: panoramica compatta dei moduli */
.compose{padding-top:90px;}
@media (min-width:900px){ .compose{padding-top:120px;} }
.plan-filter{margin:-12px 0 14px;}
.mod-count{text-align:center; font-size:.9rem; color:var(--muted-2); margin-bottom:26px;}
.mod-grid{display:grid; gap:14px;}
@media (min-width:640px){ .mod-grid{grid-template-columns:1fr 1fr;} }
@media (min-width:1040px){ .mod-grid{grid-template-columns:repeat(4,1fr); align-items:start;} }
.mod-col{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:16px 14px 10px; box-shadow:var(--shadow-card);}
.mod-col h3{font-size:1.05rem; display:flex; align-items:baseline; gap:10px; padding:0 4px 10px; margin-bottom:6px; border-bottom:1px dashed var(--line);}
.mod-col h3 span{font-family:var(--font-mono); font-size:.64rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--coral-ink);}
.mod{display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; padding:8px 4px; border-radius:10px; transition:opacity .2s, background .2s;}
.mod + .mod{border-top:1px solid var(--paper-2);}
.mod .t-ic{width:28px; height:28px; border-radius:8px; background:rgba(19,50,94,.07); color:var(--navy); display:flex; align-items:center; justify-content:center;}
.mod .t-ic svg{width:16px; height:16px;}
.mod-name{font-size:.88rem; font-weight:600; color:var(--ink); line-height:1.25;}
.mod-plan{font-family:var(--font-mono); font-size:.58rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:3px 7px; border-radius:999px; white-space:nowrap;}
.mp-all{background:rgba(31,160,161,.14); color:var(--teal-ink);}
.mp-school{background:rgba(19,50,94,.09); color:var(--navy);}
.mp-gold,.mp-net{background:rgba(221,161,43,.2); color:var(--amber-ink);}
.mod.on{background:rgba(31,160,161,.08);}
.mod.dim{opacity:.5;}
.mod.dim .mod-name{text-decoration:line-through; text-decoration-color:rgba(75,85,104,.45);}
.mod-grid.filtering .mod-plan{visibility:hidden;}

/* Sicurezza: presentazione PDF */
.trust-doc{margin:40px auto 0; max-width:900px;}
.doc-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 20px; margin-bottom:14px;}
.doc-title{display:grid; gap:2px; max-width:46ch;}
.doc-title b{font-family:var(--font-display); font-size:1.15rem; color:#fff;}
.doc-title span{font-size:.9rem; color:rgba(255,255,255,.8); line-height:1.5;}
.doc-actions{display:flex; flex-wrap:wrap; gap:10px;}
.doc-pages{position:relative; width:150px; height:104px;}
.doc-pages i{position:absolute; width:84px; height:104px; border-radius:8px; background:#fff; box-shadow:0 14px 30px -12px rgba(0,0,0,.5); border-top:10px solid var(--teal);}
.doc-pages i:nth-child(1){left:0; transform:rotate(-8deg);}
.doc-pages i:nth-child(2){left:32px; z-index:1; border-top-color:var(--amber);}
.doc-pages i:nth-child(3){left:64px; transform:rotate(8deg); z-index:2; border-top-color:var(--coral);}

/* Fascia Open Code / gratuito sotto i tre vantaggi */
.oc-band{display:grid; gap:18px; margin:0 0 40px; padding:22px 22px; border-radius:var(--radius-lg); background:var(--navy); color:#fff;}
@media (min-width:800px){ .oc-band{grid-template-columns:1fr 1fr; gap:36px; padding:28px 34px;} }
.oc-band p{margin-top:10px; font-size:.95rem; line-height:1.6; color:rgba(255,255,255,.88);}
.oc-band .oc-badge{display:inline-block; background:var(--amber); color:var(--navy-deep); font-family:var(--font-mono); font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; padding:5px 12px; border-radius:999px;}
.oc-band .oc-badge.oc-free{background:#8fd8d9;}
@media (prefers-reduced-motion: reduce){ .area-view .view-slide, .area-view .view-slide.active{transition:none;} }

/* Selettore del piano (segmented control) */
.plan-filter{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.pf{font-family:var(--font-mono); font-size:.76rem; font-weight:600; letter-spacing:.03em; padding:9px 16px; border-radius:999px; border:1.5px solid var(--line); background:#fff; color:var(--navy); cursor:pointer; transition:background .15s, color .15s, border-color .15s;}
.pf:hover{border-color:var(--navy);}
.pf.active{background:var(--navy); color:#fff; border-color:var(--navy);}
.pf:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}


/* =====================================================================
   Revisione 4 · nuova linea editoriale (inclusione, dipartimento, GDPR,
   trasparenza). Chiusure, mappa di rete, principi, sezione Open Code.
   ===================================================================== */
.area-close{margin-top:14px; font-family:var(--font-display); font-style:italic; font-size:1.05rem; color:var(--navy); line-height:1.4;}
.proj-close{max-width:620px; margin:0 auto 44px; text-align:center; font-family:var(--font-display); font-style:italic; font-size:1.15rem; line-height:1.5; color:var(--navy);}
.opencode{padding:80px 0 70px; background:var(--paper);}
@media (min-width:900px){ .opencode{padding:110px 0 90px;} }
.opencode .proj-close{margin-bottom:0;}
.opencode .proj-card h3{margin-bottom:8px;}

/* Area 4 · mappa della rete */
.net-lines{position:absolute; inset:0; width:100%; height:100%;}
.net-core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(46%,200px); padding:14px 12px; text-align:center; background:var(--navy); color:#fff; border-radius:20px; box-shadow:var(--shadow-deep); display:grid; gap:3px;}
.net-core b{font-family:var(--font-display); font-size:1rem; line-height:1.2;}
.net-core span{font-size:.72rem; color:rgba(255,255,255,.82); line-height:1.35;}
.net-node{position:absolute; padding:8px 14px; border-radius:999px; background:#fff; border:1.5px solid var(--line); font-size:.85rem; font-weight:700; color:var(--navy); box-shadow:var(--shadow-card);}
.net-node.n1{left:5%; top:12%; border-color:var(--teal);}
.net-node.n2{right:5%; top:12%; border-color:var(--coral);}
.net-node.n3{left:5%; bottom:12%; border-color:var(--amber);}
.net-node.n4{right:5%; bottom:12%; border-color:var(--navy);}
.net-note{margin-top:18px; font-size:.88rem; color:var(--muted-2); line-height:1.55;}
.net-note a{color:var(--navy); font-weight:600; text-decoration:underline; text-underline-offset:3px;}

/* Sicurezza · cinque principi */
.pricing .section-head .sub strong{display:block; margin-top:10px; font-family:var(--font-display); font-size:1.1rem; color:var(--navy);}
.trust-intro .sub{margin-top:14px;}


/* =====================================================================
   Revisione 5 · principi con spiegazione, presentazione a pagine non scaricabile,
   anteprime dimostrative dell'Area 4
   ===================================================================== */
.principles{display:grid; gap:14px; max-width:980px; margin:0 auto;}
@media (min-width:700px){ .principles{grid-template-columns:repeat(6,1fr);} .principles li{grid-column:span 2;} .principles li:nth-child(4){grid-column:2 / span 2;} .principles li:nth-child(5){grid-column:4 / span 2;} }
.principles li{position:relative; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); border-radius:16px; padding:18px 18px 16px 46px; display:grid; gap:6px; align-content:start;}
.principles li::before{content:""; position:absolute; left:16px; top:20px; width:18px; height:18px; border-radius:50%; background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;}
.principles b{color:#fff; font-size:1rem;}
.principles span{font-size:.88rem; line-height:1.55; color:rgba(255,255,255,.84);}

.doc-frame{position:relative; height:min(72vh,640px); min-height:380px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.18); border-radius:var(--radius); overflow:hidden; box-shadow:0 40px 80px -30px rgba(0,0,0,.6);}
.doc-frame:focus-visible{outline:3px solid var(--amber); outline-offset:3px;}
.doc-pages-list{display:none; height:100%; overflow-y:auto; padding:14px; scroll-snap-type:y proximity; -webkit-user-select:none; user-select:none; background:#0e2747;}
.doc-pages-list img{display:block; width:100%; height:auto; margin:0 0 14px; border-radius:8px; background:#fff; pointer-events:none; -webkit-user-drag:none; scroll-snap-align:start; box-shadow:0 10px 24px -14px rgba(0,0,0,.6);}
.trust-doc.has-pages .doc-pages-list{display:block;}
.trust-doc.has-pages .doc-fallback{display:none;}
.doc-fallback{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:28px; text-align:center; color:rgba(255,255,255,.88);}
.doc-fallback p{max-width:40ch; font-size:.98rem; line-height:1.55;}
.trust-doc:not(.has-pages) .doc-actions{display:none;}
.doc-frame:fullscreen{height:100vh; border-radius:0; border:0;}

/* Area 4 · illustrazioni SVG con anteprime dimostrative come fallback */
.demo-fb{padding:0 !important;}
.demo{position:relative; width:100%; height:100%; padding:20px 22px; background:linear-gradient(160deg,#ffffff 0%,#eef6f6 55%,#e6f1f8 100%); color:var(--ink); display:flex; flex-direction:column; gap:14px;}
.demo-tag{position:absolute; right:14px; bottom:12px; font-family:var(--font-mono); font-size:.6rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); background:rgba(255,255,255,.85); border:1px solid var(--line); border-radius:999px; padding:3px 10px;}
.demo-net{color:rgba(19,50,94,.4); display:block;}
.demo-net .net-lines{position:absolute; inset:0; width:100%; height:100%;}
.demo-net .net-core{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(40%,220px); padding:14px 12px; text-align:center; background:var(--navy); color:#fff; border-radius:20px; box-shadow:var(--shadow-deep); display:grid; gap:3px;}
.net-core b{font-family:var(--font-display); font-size:1rem; line-height:1.2;}
.net-core span{font-size:.72rem; color:rgba(255,255,255,.82); line-height:1.35;}
.net-node{position:absolute; padding:8px 14px; border-radius:999px; background:#fff; border:1.5px solid var(--line); font-size:.85rem; font-weight:700; color:var(--navy); box-shadow:var(--shadow-card);}
.net-node.n1{left:6%; top:12%; border-color:var(--teal);}
.net-node.n2{right:6%; top:12%; border-color:var(--coral);}
.net-node.n3{left:6%; bottom:16%; border-color:var(--amber);}
.net-node.n4{right:6%; bottom:16%; border-color:var(--navy);}
.dl-head,.do-head{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 12px;}
.dl-head b,.do-head b{font-family:var(--font-display); font-size:1.15rem; color:var(--navy);}
.dl-head span,.do-head span{font-size:.78rem; color:var(--muted-2);}
.dl-steps{list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:repeat(3,1fr); position:relative;}
.dl-steps li{position:relative; background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 12px 12px; display:grid; gap:3px; align-content:start;}
.dl-steps li i{width:12px; height:12px; border-radius:50%; background:var(--line); margin-bottom:6px;}
.dl-steps li.done i{background:var(--teal);} .dl-steps li.now i{background:var(--amber);} .dl-steps li.now{border-color:var(--amber);}
.dl-steps b{font-family:var(--font-display); font-size:.95rem; color:var(--navy);}
.dl-steps span{font-size:.78rem; color:var(--muted); line-height:1.4;}
.dl-who{display:flex; flex-wrap:wrap; gap:8px;}
.dl-who span{font-size:.76rem; font-weight:700; color:var(--navy); background:rgba(19,50,94,.08); border-radius:999px; padding:5px 12px;}
.do-grid{display:grid; gap:10px; grid-template-columns:repeat(3,1fr);}
.do-grid>div{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 12px; display:grid; gap:4px; align-content:start;}
.do-grid i{width:28px; height:6px; border-radius:3px; background:var(--c,var(--teal)); margin-bottom:6px;}
.do-grid b{font-family:var(--font-display); font-size:.95rem; color:var(--navy);}
.do-grid span{font-size:.78rem; color:var(--muted); line-height:1.4;}
@media (max-width:560px){ .dl-steps,.do-grid{grid-template-columns:1fr;} .demo{padding:14px;} .net-node{font-size:.74rem; padding:5px 9px;} .demo-net .net-core span{display:none;} }

@media (min-width:640px){ .hero-trust{grid-template-columns:repeat(3,1fr); gap:12px;} }