/* ============================================================
   SINOSSI · landing site
   Token coerenti con design/tokens.css (Apple-like, chiaro)
   ============================================================ */
:root{
  /* sfondi azzurrini per dare distinzione netta tra sezioni (no piu' grigetto piatto) */
  --c-bg:#fff;             /* sezioni "normali" bianche pulite */
  --c-bg-elev:#e7f0f9;     /* sezioni "alt" azzurrino tenue */
  --c-bg-sunken:#d4e3f0;   /* accenti azzurrino piu' carico (chip, code) */
  --c-bg-warm:#fdf6e8;     /* terzo bg caldo, per CTA o highlight */
  --c-ink:#1d1d1f; --c-ink-2:#525f68; --c-ink-3:#5e6970; /* scuriti per WCAG AA 4.5:1 anche su sfondi azzurrini d4e3f0/e7f0f9 */
  --c-line:rgba(13,42,82,.10); --c-line-2:rgba(13,42,82,.06);
  --c-accent:#005bb5; --c-accent-hover:#0066cc; --c-accent-soft:rgba(0,91,181,.10); /* scurito da #0071e3 per contrast AA 4.5:1 su sfondi tenui */
  --c-brand:#4B6E82; /* colore dominante logo Sinossi — titoli wordmark */
  /* scala GRAVITA' (severità crescente): verde → giallo → arancio → rosso.
     g1 era ciano (sembrava "categoria"): ora verde tenue = severità minima. */
  --c-grav-1:#67c98f; --c-grav-2:#34c759; --c-grav-3:#ffcc00; --c-grav-4:#ff9f0a; --c-grav-5:#ff453a;
  --c-mark:rgba(255,214,10,.45);
  --font-sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter","Segoe UI",Roboto,system-ui,sans-serif;
  --font-mono:"SF Mono",ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;
  --r-sm:11px; --r-md:15px; --r-lg:22px; --r-pill:999px;
  --sh-s:0 1px 2px rgba(0,0,0,.04),0 6px 22px rgba(0,0,0,.06);
  --sh-m:0 10px 44px rgba(0,0,0,.13);
  --sh-l:0 24px 80px rgba(0,0,0,.20);
  --ease:cubic-bezier(.22,.9,.25,1);
  --dur:250ms;
  --maxw:1080px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip} /* no scroll laterale (sticker .b-aura sfora di design); clip NON crea scroll-container: position:sticky della nav resta attivo */
html{scroll-padding-top:80px} /* ancore (#cosa, #download...) non nascoste dalla nav sticky */
body{
  margin:0; background:var(--c-bg); color:var(--c-ink);
  font-family:var(--font-sans); font-size:16px; line-height:1.5;
  letter-spacing:-.012em; -webkit-font-smoothing:antialiased;
}
a{color:var(--c-accent); text-decoration:none}
a:hover{color:var(--c-accent-hover)}
h1,h2,h3{letter-spacing:-.03em; line-height:1.12; margin:0}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
code{font-family:var(--font-mono); font-size:.86em; background:var(--c-bg-sunken);
  padding:2px 6px; border-radius:6px}

/* ---------- LOGO (PNG vitruviano da Gemini, con respiro) ---------- */
.logo{
  display:inline-grid; place-items:center;
  width:42px; height:42px;
  background:transparent;
  overflow:visible;
  flex:none;
}
.logo__txt{display:none}  /* legacy: il testo "SI" non viene piu' mostrato */
.logo__fig{
  width:100%; height:100%; object-fit:contain; display:block;
  transform-origin:50% 60%;
  animation:logoBreathe 3.6s ease-in-out infinite;
}
.logo--xl{width:104px; height:104px}
/* Sul footer scuro l'omino diventa chiaro per restare visibile (anche se .footer .logo
   ha display:none come fallback, lasciamo lo stile coerente se mai serve). */
.footer .logo{color:#9fb4c1}
@keyframes logoBreathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.08)}
}
@media (prefers-reduced-motion:reduce){.logo__fig{animation:none}}

/* ---------- NAV ---------- */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(245,245,247,.78);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--c-line-2);
}
.nav__inner{display:flex; align-items:center; justify-content:space-between; height:60px}
.brand{display:flex; align-items:center; gap:10px; color:var(--c-ink); font-weight:600; cursor:pointer}

/* "Torna in cima" gestito da /back-to-top.js (auto-inject); CSS-inject inline lì */

/* ---------- Demo interattiva embeddata ---------- */
/* Box nella "gabbia" del sito; l'app (nativa ~1280x860) è SCALATA via JS per
   starci tutta dentro senza barre. Privilegiamo "apri a schermo intero". */
.demo-cta{margin-top:22px; display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:center}
.demo-cta-hint{font-size:13px; color:var(--c-ink-2)}
.demo-frame{position:relative; width:100%; margin:16px auto 0; border:1px solid var(--c-line);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-m); background:var(--c-bg-elev)}
.demo-frame iframe{position:absolute; top:0; left:0; width:1280px; height:860px; border:0;
  transform-origin:top left; display:block}
/* Overlay "play": segnala che il riquadro è una demo LIVE (non uno screenshot).
   Al click sparisce e l'iframe diventa usabile. */
.demo-play{position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:20px; border:0; cursor:pointer; color:#fff;
  background:linear-gradient(180deg, rgba(11,16,26,.80), rgba(11,16,26,.90));
  -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  transition:opacity .3s var(--ease)}
/* niente cerchio: freccia bianca che pulsa, con aura azzurra che si espande */
.demo-play__ic{position:relative; color:#fff; display:grid; place-items:center;
  transition:transform .2s var(--ease); animation:demoTap 2.2s ease-in-out infinite}
.demo-play__ic svg{width:68px; height:68px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.55))}
/* aura "tap" centrata sulla PUNTA della freccia (in alto a sx dell'icona) */
.demo-play__ic::before{content:""; position:absolute; left:16%; top:10%; width:96px; height:96px;
  transform:translate(-50%,-50%); border-radius:50%; z-index:-1;
  background:radial-gradient(circle, rgba(10,132,255,.65), rgba(10,132,255,0) 68%);
  animation:demoAura 2s ease-out infinite}
.demo-play:hover .demo-play__ic{transform:scale(1.1)}
@keyframes demoTap{0%,100%{transform:scale(1)} 50%{transform:scale(1.08)}}
@keyframes demoAura{0%{transform:translate(-50%,-50%) scale(.4);opacity:.85} 70%,100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.demo-play__ic{animation:none} .demo-play__ic::before{animation:none;opacity:.4}}
.demo-play__t{text-align:center; line-height:1.18; text-shadow:0 2px 12px rgba(0,0,0,.5);
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:0 16px}
.demo-play__t .dp-h{font-size:24px; font-weight:700; opacity:.96}
.demo-play__t .dp-cta{font-size:44px; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.05}
.demo-play__t small{font-size:18px; font-weight:500; opacity:.95; max-width:34ch}
.demo-frame.live .demo-play{opacity:0; pointer-events:none}
.demo-note{margin-top:14px; font-size:13px; color:var(--c-ink-2); text-align:center}

/* ---------- Promo incrociata (SINOSSI → AI) ---------- */
.xpromo{display:flex; align-items:center; gap:22px; flex-wrap:wrap;
  background:var(--c-bg-elev); border:1px solid var(--c-line); border-radius:var(--r-lg);
  box-shadow:var(--sh-s); padding:24px 28px}
.xpromo-badge-img{width:58px; height:58px; flex:none; border-radius:13px; display:block}
.xpromo-txt{flex:1 1 320px; min-width:0}
.xpromo-txt .eyebrow{margin-bottom:2px}
.xpromo-h{font-size:21px; letter-spacing:-.02em; margin:2px 0 6px}
.xpromo-txt p{font-size:15px; color:var(--c-ink-2)}
.xpromo-btn{flex:none}
.xpromo-actions{display:flex; flex-direction:column; gap:8px; flex:none}
@media (max-width:640px){.xpromo{flex-direction:column; align-items:flex-start; text-align:left}
 .xpromo-actions{flex-direction:row; flex-wrap:wrap}}

/* xpromo--hero: variante boost (border accent, badge SUPERIORE, ombra più forte) */
.xpromo--hero{position:relative; padding:32px 32px 28px; max-width:1000px; margin:0 auto;
  border:2.5px solid var(--c-accent); border-radius:18px;
  background:linear-gradient(135deg,#FFF 0%,#F1F4FA 100%);
  box-shadow:0 14px 36px rgba(0,113,227,.15)}
.xpromo--hero .xpromo-badge-img{width:72px; height:72px}
.xpromo--hero .xpromo-h{font-size:25px; margin:6px 0 10px}
.xpromo--hero .xpromo-txt p{font-size:15.5px; line-height:1.55}
.xpromo__badge{position:absolute; top:-15px; left:30px;
  background:linear-gradient(90deg,var(--c-accent) 0%,#0058b3 100%); color:#fff;
  font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:6px 16px; border-radius:999px; box-shadow:0 4px 14px rgba(0,113,227,.35)}

/* Pill nel hero SINOSSI che spinge verso AI */
.hero__ai-pill{display:inline-flex; align-items:center; gap:8px;
  margin-top:18px; padding:9px 18px 9px 14px;
  background:rgba(255,255,255,.85); border:1px solid var(--c-line);
  border-radius:999px; color:var(--c-ink); text-decoration:none;
  font-size:14px; line-height:1.4; box-shadow:0 4px 14px rgba(0,0,0,.06);
  transition:background .15s, border-color .15s, transform .15s; max-width:100%}
.hero__ai-pill:hover{background:#fff; border-color:var(--c-accent); transform:translateY(-1px)}
.hero__ai-pill strong{font-weight:800; color:var(--c-ink)}

/* nav__ai-link: link AI nel menu, gradient accent */
.nav__ai-link{background:linear-gradient(90deg,var(--c-accent) 0%,#0058b3 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
  font-weight:800 !important; letter-spacing:-.01em}
.nav__ai-link:hover{filter:brightness(.85)}
.brand__name{font-size:18px; letter-spacing:-.02em; color:var(--c-brand)}
.nav__links{display:flex; align-items:center; gap:26px; flex-wrap:nowrap}
@media (max-width:900px){ .nav__links{gap:16px} }
.nav__links a{color:var(--c-ink-2); font-size:14px; font-weight:500}
.nav__links a:hover{color:var(--c-ink)}
.nav__cta{font-size:14px}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; padding:12px 22px; border-radius:var(--r-pill);
  min-height:44px; cursor:pointer; transition:transform var(--dur) var(--ease), background var(--dur);
  border:1px solid transparent;
}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--c-accent); color:#fff}
.btn--primary:hover{background:var(--c-accent-hover); color:#fff}
.btn--ghost{background:transparent; color:var(--c-accent); border-color:var(--c-line)}
.btn--ghost:hover{background:var(--c-accent-soft)}
.btn--lg{font-size:17px; padding:16px 30px; min-height:52px}

/* ---------- HERO ---------- */
.hero{
  text-align:center; padding:72px 0 40px;
  /* carta da zucchero molto leggera (#E8EFF4) sfumata, con accento blu in alto */
  background:
    radial-gradient(60% 50% at 50% 0%, rgba(75,110,130,.10), transparent 70%),
    linear-gradient(180deg,#EAF1F5,#E1EAF1);
}
.hero__inner{display:flex; flex-direction:column; align-items:center; text-align:center}
/* hero__brandrow: logo SEMPRE a SINISTRA del titolo, mai sopra */
.hero__brandrow{display:flex; align-items:center; gap:24px; margin:0 0 22px;
  flex-wrap:nowrap; justify-content:center}
.hero__brandtxt{display:flex; flex-direction:column; align-items:flex-start; text-align:left}
.hero__brandrow .logo--xl{width:88px; height:88px; flex:none}
.hero__brandrow .logo--xl .logo__txt{font-size:68px}
@media (max-width:540px){
  .hero__brandrow{gap:16px}
  .hero__brandrow .logo--xl{width:64px; height:64px}
  .hero__brandrow .logo--xl .logo__txt{font-size:48px}
  .hero__title{font-size:52px !important}
}
.hero__title{font-size:64px; margin:0 0 4px; line-height:1.05; color:var(--c-brand) !important}
.hero__kicker{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent); margin:0}
.hero__claim{font-size:32px; color:var(--c-ink); font-weight:700; margin:0 0 16px; letter-spacing:-.025em; max-width:640px; line-height:1.2}
.hero__claim strong{color:var(--c-accent)}
.hero__sub{max-width:620px; font-size:19px; color:var(--c-ink-2); margin:0 0 28px}
.hero__sub strong{color:var(--c-ink)}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap; justify-content:center}
.hero__note{margin-top:18px; font-size:13px; color:var(--c-ink-3)}

/* ---------- SHOT (placeholder schermate) ---------- */
.shot{
  background:var(--c-bg-elev); border:1px solid var(--c-line);
  border-radius:var(--r-lg); box-shadow:var(--sh-m); overflow:hidden;
}
/* Niente finta barra-finestra Apple: i mock sono rettangoli puliti. */
.shot__bar{display:none}
.shot__body{padding:28px}
.shot__cap{margin:0; padding:10px 16px 14px; font-size:13px; color:var(--c-ink-2); text-align:center; border-top:1px solid var(--c-line-2)}

/* Orb (Pulse): indicatore animato usato in scopri.html */
.orb{
  width:108px; height:108px; border-radius:50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, #fff, var(--c-accent-soft) 55%, rgba(0,113,227,.18));
  border:1px solid var(--c-line); box-shadow:var(--sh-s);
  animation:breathe 4s var(--ease) infinite;
}
.orb__num{font-size:42px; font-weight:700; color:var(--c-accent); letter-spacing:-.03em}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* figure / omino */
.figure{width:120px; height:240px; display:block; margin:0 auto}
.figure--sm{width:96px; height:190px}
.fg{fill:var(--c-bg-sunken); stroke:var(--c-line); stroke-width:1}
.seg-1{fill:rgba(100,210,255,.30); stroke:var(--c-grav-1)}
.seg-2{fill:rgba(52,199,89,.28); stroke:var(--c-grav-2)}
.seg-3{fill:rgba(255,204,0,.32); stroke:var(--c-grav-3)}
.seg-4{fill:rgba(255,159,10,.34); stroke:var(--c-grav-4)}
.seg-5{fill:rgba(255,69,58,.30); stroke:var(--c-grav-5)}

.dot{width:11px; height:11px; border-radius:50%; flex:0 0 auto}
.dot.g1{background:var(--c-grav-1)} .dot.g2{background:var(--c-grav-2)}
.dot.g3{background:var(--c-grav-3)} .dot.g4{background:var(--c-grav-4)}
.dot.g5{background:var(--c-grav-5)}

/* ---------- SECTIONS ---------- */
.section{padding:84px 0}
.section--alt{background:var(--c-bg-elev); border-top:1px solid var(--c-line-2); border-bottom:1px solid var(--c-line-2)}
.eyebrow{font-size:14px; font-weight:600; color:var(--c-accent); margin:0 0 12px; letter-spacing:0}
.eyebrow--light{color:#7fc0ff}
.section__title{font-size:38px; margin:0 0 16px}
.section__title--light{color:#fff}
.section__lead{max-width:680px; font-size:19px; color:var(--c-ink-2); margin:0 0 36px}
.section__lead--light{color:rgba(255,255,255,.78)}

/* cards grid */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{
  background:var(--c-bg-elev); border:1px solid var(--c-line); border-radius:var(--r-md);
  padding:26px; box-shadow:var(--sh-s); transition:transform var(--dur) var(--ease)
}
.section--alt .card{background:var(--c-bg)}
.card:hover{transform:translateY(-3px)}
.card__icon{font-size:28px; display:block; margin-bottom:12px}
.card h3{font-size:19px; margin-bottom:8px; letter-spacing:-.02em}
.card p{margin:0; color:var(--c-ink-2); font-size:15px}

/* ---------- STEPS ---------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.step{display:flex; flex-direction:column}
.step__num{
  width:38px; height:38px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-accent); color:#fff; font-weight:700; font-size:18px; margin-bottom:14px
}
.step h3{font-size:21px; margin-bottom:8px}
.step p{color:var(--c-ink-2); font-size:15px; margin:0 0 18px}
.shot--sm{margin-top:auto}
.shot--sm .shot__body{padding:20px; min-height:150px; display:grid; place-items:center}
.shot__body--drop{}
.drop{
  width:100%; border:2px dashed var(--c-line); border-radius:var(--r-md);
  padding:24px; text-align:center; color:var(--c-ink-2); font-size:14px;
  display:flex; flex-direction:column; gap:8px; align-items:center
}
.drop__icon{font-size:30px; color:var(--c-accent)}
.shot__body--map{padding:16px}
.shot__body--src{display:block; padding:18px; align-self:stretch; width:100%}
.src-row{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--c-ink-2); margin:6px 0 4px}
.src-ico{font-size:15px}
.src-quote{font-size:13px; color:var(--c-ink); background:var(--c-bg-sunken); border-radius:8px; padding:8px 10px; margin-bottom:8px}
mark{background:var(--c-mark); border-radius:3px; padding:0 2px; color:inherit}

/* ---------- WHY ---------- */
.why{display:grid; grid-template-columns:repeat(2,1fr); gap:24px}
.why__item{
  padding:28px; border-radius:var(--r-md); background:var(--c-bg-elev);
  border:1px solid var(--c-line); box-shadow:var(--sh-s)
}
.why__item h3{font-size:21px; margin-bottom:10px}
.why__item p{margin:0; color:var(--c-ink-2); font-size:15.5px}
.why__item strong{color:var(--c-ink)}

/* ---------- PRIVACY ---------- */
.section--privacy{
  background:linear-gradient(160deg,#0b3b73,#06203f);
  color:#fff; border:none
}
.privacy{display:grid; grid-template-columns:1.6fr 1fr; gap:48px; align-items:center}
.checklist{list-style:none; padding:0; margin:8px 0 0; display:grid; gap:12px}
.checklist li{position:relative; padding-left:30px; color:rgba(255,255,255,.9); font-size:16px}
.checklist li::before{
  content:"✓"; position:absolute; left:0; top:-1px;
  width:22px; height:22px; border-radius:50%; display:grid; place-items:center;
  background:var(--c-grav-2); color:#06203f; font-weight:700; font-size:13px
}
.privacy__badge{display:flex; flex-direction:column; align-items:center; gap:14px}
.shield{
  width:150px; height:150px; border-radius:36px; display:grid; place-items:center;
  font-size:64px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)
}
.shield__cap{text-align:center; font-weight:700; font-size:18px; line-height:1.2; color:#fff}

/* ---------- DOWNLOAD + REQ ---------- */
.dl{display:grid; grid-template-columns:1.5fr 1fr; gap:40px; align-items:start}
.dl__main .btn{margin-top:8px}
.dl__hint{margin-top:14px; font-size:13px; color:var(--c-ink-3)}
.req{
  background:var(--c-bg); border:1px solid var(--c-line); border-radius:var(--r-md);
  padding:26px; box-shadow:var(--sh-s)
}
.req h3{font-size:18px; margin-bottom:16px}
.req__list{margin:0; display:grid; gap:14px}
.req__list>div{display:flex; flex-direction:column; gap:2px; padding-bottom:14px; border-bottom:1px solid var(--c-line-2)}
.req__list>div:last-child{border-bottom:none; padding-bottom:0}
.req__list dt{font-size:13px; color:var(--c-ink-3); font-weight:500}
.req__list dd{margin:0; font-size:15px; color:var(--c-ink); font-weight:500}
.req__note{margin:16px 0 0; font-size:13px; color:var(--c-ink-2)}

/* ---------- FAQ ---------- */
.faq{display:grid; gap:12px}
.faq details{
  background:var(--c-bg-elev); border:1px solid var(--c-line); border-radius:var(--r-md);
  padding:4px 22px; box-shadow:var(--sh-s)
}
.faq summary{
  cursor:pointer; font-weight:600; font-size:17px; padding:16px 0; list-style:none;
  display:flex; justify-content:space-between; align-items:center
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"＋"; color:var(--c-accent); font-weight:400; font-size:22px; transition:transform var(--dur)}
.faq details[open] summary::after{content:"−"}
.faq p{margin:0 0 18px; color:var(--c-ink-2); font-size:15.5px}

/* ---------- ACCESSIBILITY HELPERS ---------- */
.skip-link{
  position:absolute; left:12px; top:-48px; z-index:100;
  background:var(--c-accent); color:#fff; padding:10px 16px; border-radius:var(--r-sm);
  font-size:14px; font-weight:600; transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:12px; color:#fff}
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
a:focus-visible,.btn:focus-visible,summary:focus-visible{
  outline:3px solid var(--c-accent); outline-offset:3px; border-radius:6px;
}
.faq summary:focus-visible{outline-offset:6px}

/* ---------- BUTTON VARIANTS hero (windows + warm) — stessi angoli pill di .btn ---------- */
.btn--win{
  display:inline-flex; align-items:center; gap:9px;
  background:#2A4856; color:#fff;
  padding:12px 22px; border-radius:var(--r-pill); font-weight:600; font-size:15px;
  text-decoration:none; transition:background .15s, transform .12s;
  border:1px solid #2A4856; line-height:1; min-height:46px;
}
.btn--win:hover{background:#1F3540; color:#fff; transform:translateY(-1px)}
.btn--win .btn-ic{width:16px; height:16px; color:currentColor; flex:none}

.btn--warm{
  display:inline-flex; align-items:center;
  background:#fdf6e8; color:#7a5a14;
  padding:12px 22px; border-radius:var(--r-pill); font-weight:600; font-size:15px;
  text-decoration:none; transition:background .15s, transform .12s;
  border:1px solid #ead9a8; line-height:1; min-height:46px;
}
.btn--warm:hover{background:#fbeec6; color:#5d4310; transform:translateY(-1px)}

/* ---------- CARDS 2-COL VARIANT ---------- */
.cards--2{grid-template-columns:repeat(2,1fr)}

/* ---------- FEATURE ROWS (card-style: ogni feature in riquadro bianco) ---------- */
.feat{
  display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center;
  padding:44px 44px; margin-bottom:22px;
  background:#fff; border:1px solid var(--c-line); border-radius:18px;
  box-shadow:0 2px 14px rgba(13,42,82,.05);
  transition:box-shadow .3s var(--ease), transform .3s var(--ease);
}
.feat:hover{box-shadow:0 14px 40px rgba(13,42,82,.10); transform:translateY(-2px)}
.feat:last-of-type{margin-bottom:0}
@media (max-width:780px){.feat{padding:32px 26px}}
.feat--rev .feat__text{order:2}
.feat--rev .feat__shot{order:1}
.feat__title{font-size:24px; margin-bottom:12px; display:flex; flex-direction:column; gap:6px}
.feat__kicker{
  font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--c-accent);
}
.feat__text p{color:var(--c-ink-2); font-size:16px; margin:0 0 16px}
.feat__text strong{color:var(--c-ink)}
.feat__pts{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.feat__pts li{position:relative; padding-left:26px; font-size:14.5px; color:var(--c-ink)}
.feat__pts li::before{
  content:""; position:absolute; left:0; top:7px; width:8px; height:8px;
  border-radius:50%; background:var(--c-accent);
}
.shot--feat{max-width:none}
.shot--feat .shot__body{padding:24px; min-height:200px}

/* feature: pulse */
.shot__body--pulse{display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center}
.orb--lg{width:130px; height:130px}
.orb--lg .orb__num{font-size:50px}
.orb--md{width:96px; height:96px}
.orb--md .orb__num{font-size:38px}
.orb__label{margin:12px 0 18px; font-size:13px; color:var(--c-ink-2)}
.stat-row{display:flex; gap:24px}
.stat{display:flex; flex-direction:column; align-items:center}
.stat__n{font-size:26px; font-weight:700; color:var(--c-ink); letter-spacing:-.03em}
.stat__l{font-size:12px; color:var(--c-ink-2)}

/* feature: apparati */
.shot__body--apparati{display:flex; gap:24px; align-items:center}
.figure--md{width:108px; height:216px; flex:0 0 auto}
.appa-list{display:flex; flex-direction:column; gap:11px; flex:1}
.appa{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--c-ink)}
.appa em{margin-left:auto; font-style:normal; font-size:12px; color:var(--c-ink-2);
  background:var(--c-bg-sunken); border-radius:var(--r-pill); padding:2px 9px}

/* feature: score */
.shot__body--score{display:flex; flex-direction:column; gap:18px; justify-content:center}
.pills{display:flex; flex-wrap:wrap; gap:10px}
.pill{
  font-size:13px; font-weight:600; padding:7px 14px; border-radius:var(--r-pill);
  border:1px solid var(--c-line); color:var(--c-ink); background:var(--c-bg-elev);
  display:inline-flex; align-items:center; gap:7px;
}
.pill::before{content:""; width:9px; height:9px; border-radius:50%; background:var(--c-ink-3)}
.pill--g1::before{background:var(--c-grav-1)} .pill--g2::before{background:var(--c-grav-2)}
.pill--g3::before{background:var(--c-grav-3)} .pill--g4::before{background:var(--c-grav-4)}
.pill--g5::before{background:var(--c-grav-5)}
.score-detail{background:var(--c-bg-sunken); border-radius:var(--r-md); padding:14px 16px}
.score-detail__h{margin:0 0 6px; font-size:14px; font-weight:600; color:var(--c-ink)}
.score-detail__r{margin:0; font-size:13px; color:var(--c-ink-2)}

/* feature: lab / sparkline */
.shot__body--lab{display:flex; flex-direction:column; gap:14px; justify-content:center}
.lab-row{display:grid; grid-template-columns:64px 1fr auto; gap:14px; align-items:center}
.lab-name{font-size:13px; font-weight:600; color:var(--c-ink-2)}
.spark{width:100%; height:30px; display:block}
.spark__line{fill:none; stroke:var(--c-ink-3); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.spark__line--down{stroke:var(--c-grav-4)}
.spark__line--up{stroke:var(--c-grav-3)}
.lab-val{font-size:15px; font-weight:700; color:var(--c-ink); white-space:nowrap}
.lab-val em{font-style:normal; font-size:11px; font-weight:500; color:var(--c-ink-2)}
.lab-val--g3{color:var(--c-grav-4)} .lab-val--g4{color:var(--c-grav-5)}

/* feature: drugs */
.shot__body--drugs{display:flex; flex-direction:column; gap:14px}
.filterbar{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  font-size:12px; font-weight:500; padding:6px 12px; border-radius:var(--r-pill);
  border:1px solid var(--c-line); color:var(--c-ink-2); background:var(--c-bg-elev);
}
.chip--on{background:var(--c-accent); color:#fff; border-color:transparent}
.chip--search{color:var(--c-ink-2)}
.drug-grp__h{margin:0 0 6px; font-size:12px; font-weight:700; letter-spacing:.02em;
  text-transform:uppercase; color:var(--c-ink-3)}
.drug-row{display:flex; justify-content:space-between; align-items:baseline;
  font-size:14px; color:var(--c-ink); padding:5px 0; border-bottom:1px solid var(--c-line-2)}
.drug-row:last-child{border-bottom:none}
.drug-row__d{font-size:12px; color:var(--c-ink-2); font-family:var(--font-mono)}

/* feature: timeline (mini) */
.shot__body--tl{display:flex; align-items:center}
.tl{list-style:none; margin:0; padding:0; display:grid; gap:0; width:100%}
.tl__i{display:grid; grid-template-columns:48px 18px 1fr; align-items:center;
  gap:12px; position:relative; padding:8px 0}
.tl__y{font-size:12px; font-weight:700; color:var(--c-ink-2); font-family:var(--font-mono)}
.tl__dot{width:13px; height:13px; border-radius:50%; justify-self:center; z-index:1;
  box-shadow:0 0 0 4px var(--c-bg-elev)}
.tl__i:not(:last-child)::after{
  content:""; position:absolute; left:55px; top:50%; bottom:-50%;
  width:2px; background:var(--c-line);
}
.tl__dot.g1{background:var(--c-grav-1)} .tl__dot.g2{background:var(--c-grav-2)}
.tl__dot.g3{background:var(--c-grav-3)} .tl__dot.g4{background:var(--c-grav-4)}
.tl__dot.g5{background:var(--c-grav-5)}
.tl__t{font-size:14px; color:var(--c-ink)}

/* feature/source: condition head + icd chip */
.cond-head{display:flex; align-items:center; gap:10px; margin-bottom:14px;
  padding-bottom:12px; border-bottom:1px solid var(--c-line-2)}
.cond-head__name{font-size:15px; font-weight:600; color:var(--c-ink)}
.icd{margin-left:auto; font-family:var(--font-mono); font-size:12px; font-weight:600;
  color:var(--c-accent); background:var(--c-accent-soft); border-radius:var(--r-pill);
  padding:3px 10px}

/* feature: evidenze illuminate */
.shot__body--evid{display:flex; flex-direction:column; justify-content:center; gap:10px}
.evid-meta{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--c-ink-2)}
.evid-sec{margin-left:auto; font-family:var(--font-mono); font-size:11px; font-weight:600;
  color:var(--c-ink-2); background:var(--c-bg-sunken); border-radius:var(--r-pill); padding:2px 9px}
.evid-link{margin:2px 0 0; font-size:12px; font-weight:600; color:var(--c-accent)}

/* feature: interventi del medico */
.shot__body--edit{display:flex; flex-direction:column; justify-content:center; gap:14px}
.edit-row{display:flex; align-items:center; gap:10px; font-size:15px; color:var(--c-ink)}
.edit-name{font-weight:600}
.edit-tools{display:flex; flex-wrap:wrap; gap:8px}
.etool{font-size:12px; font-weight:600; padding:6px 11px; border-radius:var(--r-pill);
  border:1px solid var(--c-line); color:var(--c-ink-2); background:var(--c-bg-elev)}
.etool--off{color:var(--c-grav-5); border-color:rgba(255,69,58,.35)}
.etool--restore{margin-left:auto; color:var(--c-accent); border-color:var(--c-line); background:var(--c-bg-elev)}
.edit-row--off{opacity:.6}
.edit-name--off{text-decoration:line-through; font-weight:500; color:var(--c-ink-2)}
.dot--off{background:var(--c-ink-3)}

/* feature: rilevanza invalidante */
.shot__body--rel{display:flex; flex-direction:column; justify-content:center; gap:12px}
.rel-row{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--c-ink)}
.rel-name{font-weight:600}
.rel-tag{margin-left:auto; font-size:11px; font-weight:700; letter-spacing:.01em;
  color:var(--c-accent); background:var(--c-accent-soft); border:1px solid rgba(0,113,227,.18);
  border-radius:var(--r-pill); padding:3px 10px}

/* ---------- REPORT PDF ---------- */
.report{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center}
.report__shot{min-width:0}
.shot--report{max-width:none}
.shot__body--report{padding:22px; display:flex; flex-direction:column; gap:16px; min-height:220px}
.logo--rep{width:30px; height:30px; animation:none}
.logo--rep .logo__txt{font-size:21px}
.rep-head{display:flex; align-items:center; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--c-line-2)}
.rep-head__t{margin:0; font-size:15px; font-weight:700; color:var(--c-ink)}
.rep-head__s{margin:2px 0 0; font-size:12px; color:var(--c-ink-2)}
.rep-grid{display:grid; grid-template-columns:auto 1fr; gap:22px; align-items:center}
.rep-lines{display:flex; flex-direction:column; gap:8px}
.rep-line{margin:0; font-size:13.5px; color:var(--c-ink); display:flex; align-items:center; gap:8px}
.rep-line--h{font-size:12px; font-weight:700; letter-spacing:.02em; text-transform:uppercase; color:var(--c-ink-3)}
.rep-line--mut{font-size:12px; color:var(--c-ink-2)}
.report__text h3{font-size:21px; margin-bottom:14px}
.report__list{list-style:none; margin:0 0 16px; padding:0; display:grid; gap:9px}
.report__list li{position:relative; padding-left:26px; font-size:15px; color:var(--c-ink)}
.report__list li::before{content:""; position:absolute; left:0; top:7px; width:8px; height:8px;
  border-radius:50%; background:var(--c-accent)}
.report__note{margin:0; font-size:14px; color:var(--c-ink-2)}

/* ---------- DOWNLOAD TRIAL ---------- */
.dl__trial{margin-top:14px; font-size:14px; color:var(--c-ink-2)}
.dl__trial strong{color:var(--c-ink)}

/* ---------- GALLERY ---------- */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.ga{margin:0}
.shot--ga{max-width:none}
.shot__body--ga{padding:22px; min-height:180px; display:flex; align-items:center; justify-content:center}
.shot__body--ga-pulse{flex-direction:column; gap:14px}
.ga-stats{display:flex; gap:14px; font-size:12px; color:var(--c-ink-2)}
.shot__body--ga-list,.shot__body--ga-lab,.shot__body--ga-tl,.shot__body--ga-src{
  flex-direction:column; align-items:stretch; gap:10px}
.pl-row{display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  font-size:14px; color:var(--c-ink)}
.ga figcaption{margin-top:12px; font-size:13.5px; color:var(--c-ink-2); line-height:1.45}

/* ---------- TECH GRID ---------- */
.tech{display:grid; grid-template-columns:repeat(2,1fr); gap:22px}
.tech__item{
  padding:24px; border-radius:var(--r-md); background:var(--c-bg);
  border:1px solid var(--c-line); box-shadow:var(--sh-s);
}
.tech__item h3{font-size:18px; margin-bottom:8px}
.tech__item p{margin:0; color:var(--c-ink-2); font-size:15px}

/* ---------- COMPARE TABLE ---------- */
.compare__t{
  width:100%; border-collapse:separate; border-spacing:0;
  background:var(--c-bg-elev); border:1px solid var(--c-line);
  border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-s);
}
.compare__t th,.compare__t td{
  text-align:left; padding:16px 18px; font-size:14.5px; vertical-align:top;
  border-bottom:1px solid var(--c-line-2);
}
.compare__t thead th{
  font-size:12px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  color:var(--c-ink-3); background:var(--c-bg-sunken);
}
.compare__t tbody tr:last-child th,.compare__t tbody tr:last-child td{border-bottom:none}
.compare__t tbody th{font-weight:600}
.compare__t td{color:var(--c-ink-2)}
.tag{
  display:inline-block; font-size:13px; font-weight:700; padding:4px 11px;
  border-radius:var(--r-pill); background:var(--c-bg-sunken); color:var(--c-ink);
}
.tag--accent{background:var(--c-accent); color:#fff}
.compare__note{margin:18px 0 0; font-size:14px; color:var(--c-ink-2); max-width:760px}

/* ---------- ROADMAP TIMELINE (orizzontale sinistra→destra) ---------- */
.timeline{list-style:none; margin:0; padding:32px 0 0; display:grid;
  grid-template-columns:repeat(4,1fr); gap:0; position:relative}
/* linea continua orizzontale dietro i pallini */
.timeline::before{
  content:""; position:absolute; left:6%; right:6%; top:42px; height:2px;
  background:var(--c-line); z-index:0;
}
.tlx{position:relative; padding:0 14px; text-align:left}
.tlx::before{
  content:""; display:block; width:18px; height:18px; border-radius:50%;
  background:var(--c-bg-elev); border:2px solid var(--c-ink-3);
  position:relative; z-index:1; margin:0 0 18px;
}
.tlx--done::before{background:var(--c-grav-2); border-color:var(--c-grav-2)}
.tlx--next::before{background:var(--c-accent); border-color:var(--c-accent)}
.tlx__badge{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.03em;
  text-transform:uppercase; color:var(--c-ink-2); background:var(--c-bg-sunken);
  border-radius:var(--r-pill); padding:3px 10px; margin-bottom:8px;
}
.tlx--done .tlx__badge{color:#0b5d2a; background:rgba(52,199,89,.16)}
.tlx--next .tlx__badge{color:var(--c-accent); background:var(--c-accent-soft)}
.tlx h3{font-size:17px; margin-bottom:8px; line-height:1.25}
.tlx p{margin:0; color:var(--c-ink-2); font-size:14px; line-height:1.5}
/* mobile: torna in verticale (4 colonne troppo strette) */
@media (max-width:780px){
  .timeline{grid-template-columns:1fr; padding-top:0; gap:24px}
  .timeline::before{display:none}
  .tlx{padding:0 0 0 36px}
  .tlx::before{position:absolute; left:0; top:4px; margin:0}
}

/* ---------- FOOTER (molto scuro, visibilmente distinto dal resto del sito) ---------- */
.footer{background:#0A141B; color:#cfd5da; border-top:0; padding:64px 0 48px; margin-top:0}
.footer a{color:#9fb4c1}
.footer a:hover{color:#fff}
.footer__inner{display:grid; grid-template-columns:1.4fr .8fr 1fr 1.4fr; gap:40px; align-items:start}
.footer__brand{display:flex; gap:0; align-items:center}
/* logo "respiro" non funziona bene nel footer scuro -> nascosto */
.footer .logo{display:none}
.footer__name{margin:0; font-weight:700; font-size:20px; color:#fff; letter-spacing:.01em}
.footer__tag{margin:2px 0 0; font-size:13px; color:#9fb4c1}
.footer h3{font-size:14px; margin-bottom:12px; color:#fff; text-transform:uppercase; letter-spacing:.06em; font-weight:700}
.footer__nav{display:flex; flex-direction:column; gap:7px}
.footer__nav a{font-size:14px}
.footer__contact p{margin:0 0 6px; font-size:14px}
.footer__legal p{margin:0 0 10px; font-size:13px; color:#9fb4c1; line-height:1.55}
.footer__legal strong{color:#e8eef2}
.footer__copy{font-size:12px; color:#7f95a1; padding-top:8px; border-top:1px solid rgba(255,255,255,.08)}

/* sezioni più distinte visivamente: bianco vs azzurrino, bordi netti */
.section{padding:96px 0; background:#fff; border-top:1px solid var(--c-line)}
.section--alt{background:var(--c-bg-elev); border-top:1px solid var(--c-line); border-bottom:1px solid var(--c-line)}

/* ---------- CARD ICON (SVG monocromo, sostituisce emoji) ---------- */
.card__ic{display:inline-grid; place-items:center; width:44px; height:44px;
  border-radius:12px; background:var(--c-accent-soft); color:var(--c-accent);
  margin-bottom:14px; transition:background .2s var(--ease), color .2s var(--ease)}
.card__ic svg{width:22px; height:22px}
.card:hover .card__ic{background:var(--c-accent); color:#fff}
/* sezione subito dopo l'hero: ombra interna per stacco netto dal gradient teal */
.hero + .section, .hero + section.section{
  border-top:0;
  box-shadow:inset 0 14px 28px -16px rgba(0,38,84,.22);
}

/* feat-summary: lista sintetica delle 10 funzionalità nella home */
.feat-summary{display:grid; grid-template-columns:repeat(2,1fr); gap:14px 32px;
  max-width:780px; margin:0 auto; padding:0; list-style:none}
.feat-summary li{padding:14px 0; border-bottom:1px solid var(--c-line-2);
  font-size:15.5px; color:var(--c-ink-2); line-height:1.45}
.feat-summary li strong{color:var(--c-ink); font-weight:700; display:block; font-size:15px; margin-bottom:2px}
@media (max-width:680px){.feat-summary{grid-template-columns:1fr; gap:0}}

/* page-head: header per pagine interne (funzionalita, etc.) */
.page-head{padding:72px 0 36px; text-align:center; background:linear-gradient(180deg,#f5f5f7 0%,var(--c-bg) 100%)}
.page-head .eyebrow{font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--c-accent); margin:0 0 14px}
.page-head__title{font-size:46px; margin:0 0 14px; letter-spacing:-.025em}
.page-head__lead{max-width:680px; font-size:18px; color:var(--c-ink-2); margin:0 auto; line-height:1.55}
@media (max-width:540px){.page-head__title{font-size:34px}}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .cards,.steps,.gallery{grid-template-columns:1fr 1fr}
  .why,.tech,.cards--2{grid-template-columns:1fr}
  .privacy,.dl,.footer__inner,.report{grid-template-columns:1fr 1fr}
  .nav__links{gap:14px}
  .nav__links a{font-size:13px}
  .feat{grid-template-columns:1fr; gap:28px}
  .feat--rev .feat__text{order:1}
  .feat--rev .feat__shot{order:2}
}
@media (max-width:680px){
  /* mobile: nav compatta + footer 1-col + hero ridotto */
  .nav__links{gap:10px; flex-wrap:wrap; justify-content:flex-end}
  .nav__links a{font-size:12.5px}
  .nav__links .nav__ai-link{display:none}
  .nav__inner{flex-wrap:wrap; min-height:60px; height:auto; padding:10px 0}
  .footer__inner{grid-template-columns:1fr; gap:28px}
  .hero{padding:64px 0 56px}
  .hero__brandrow{flex-direction:column; gap:14px; text-align:center}
  .hero__brandtxt{align-items:center; text-align:center}
  .hero__title{font-size:46px !important}
  .hero__claim{font-size:24px}
  .hero__actions{flex-direction:column; align-items:stretch}
  .hero__actions .btn{justify-content:center; text-align:center; width:100%}
  .section{padding:64px 0}
  .section__title{font-size:30px}
  .cards{grid-template-columns:1fr}
}
@media (max-width:680px){
  .compare__t{display:block; overflow-x:auto; white-space:nowrap}
}
@media (max-width:600px){
  .cards,.steps,.gallery{grid-template-columns:1fr}
  .hero__title{font-size:46px}
  .hero__sub{font-size:17px}
  .section{padding:60px 0}
  .section__title{font-size:30px}
  .shot__body--apparati{flex-direction:column; text-align:center}
  .stat-row{gap:16px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* ---------- SPLASH home rimosso (03/07): nav sempre visibile e sticky come nelle altre pagine ---------- */

/* WCAG AA 1.4.1 — link inline nel testo devono essere distinguibili dal testo circostante.
   Solo i link inline dentro paragrafi/li ricevono underline; nav, bottoni .btn restano puliti. */
main p a:not(.btn), main li a:not(.btn), main .ans a, main details a, main td a, .pfaq a, .secnote a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* WCAG AA — code inline scurito per superare 4.5:1 anche su --c-bg-sunken #d4e3f0 */
code { color: #424d54 !important; }

/* WCAG 2.5.5 tap target ≥36px: link footer/nav su mobile devono avere area cliccabile sufficiente */
@media (max-width: 768px) {
  .footer__nav a, .footer__contact a, .footer__legal a {
    display: inline-block;
    padding: 8px 4px;
    min-height: 36px;
    line-height: 1.6;
  }
}

/* WCAG 2.5.5 tap target — nav top mobile/tablet >= 36px */
@media (max-width: 768px) {
  .nav__links a {
    padding: 10px 8px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
  }
  details summary {
    padding: 12px 16px;
    min-height: 44px;
  }
}