/* ==========================================================================
   EVOLVENDA — esperienza cinematografica
   Palette dal logo: azzurro #2EA3E0 · lime #93C01E · notte #05080F
   ========================================================================== */

:root{
  --bg:#05080F;
  --bg2:#070C16;
  --panel:#0B1322;
  --panel2:#0F1A2E;
  --glass:rgba(13, 22, 40, .62);
  --line:rgba(148, 178, 226, .13);
  --line-forte:rgba(148, 178, 226, .25);
  --testo:#EAF0FA;
  --muted:#8FA0BE;
  --muted2:#5C6B88;
  --blu:#2EA3E0;
  --verde:#93C01E;
  --blu-glow:rgba(46,163,224,.55);
  --verde-glow:rgba(147,192,30,.45);
  --grad:linear-gradient(110deg, var(--blu), var(--verde));
  --font-d:'Sora', 'Inter', system-ui, sans-serif;
  --font-t:'Inter', system-ui, sans-serif;
  color-scheme:dark;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html, body{ background:var(--bg); }
body{
  font-family:var(--font-t);
  color:var(--testo);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img, video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
::selection{ background:rgba(46,163,224,.35); }

/* grana cinematografica */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:5;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.7'/%3E%3C/svg%3E");
}

.wrap{ width:min(1180px, 92%); margin-inline:auto; }
.wrap-stretta{ width:min(880px, 92%); margin-inline:auto; }

/* ---------- tipografia ---------- */
.kicker{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.78rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted);
}
.kicker::before{
  content:""; width:26px; height:1.5px; background:var(--grad); border-radius:2px;
}
.h-mega{
  font-family:var(--font-d);
  font-size:clamp(2.4rem, 6.4vw, 4.6rem);
  font-weight:700; line-height:1.06; letter-spacing:-.03em;
}
.h-scena{
  font-family:var(--font-d);
  font-size:clamp(1.9rem, 4.4vw, 3.2rem);
  font-weight:700; line-height:1.1; letter-spacing:-.025em;
}
.h-sub{
  font-family:var(--font-d);
  font-size:clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight:600; letter-spacing:-.01em;
}
.grad-testo{
  background:var(--grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.lead{ font-size:clamp(1.02rem, 1.7vw, 1.22rem); color:var(--muted); }
.microcopy{ font-size:.85rem; color:var(--muted2); }

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  padding:.95rem 1.9rem; border-radius:999px;
  font-weight:700; font-size:.98rem; letter-spacing:.01em;
  border:0; cursor:pointer; position:relative; overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s;
  white-space:nowrap;
}
.btn-primaria{
  background:var(--grad); color:#04121c;
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset, 0 10px 34px rgba(46,163,224,.35);
}
.btn-primaria::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform:translateX(-120%);
  transition:transform .6s ease;
}
.btn-primaria:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(255,255,255,.12) inset, 0 16px 44px rgba(46,163,224,.5); }
.btn-primaria:hover::after{ transform:translateX(120%); }
.btn-ghost{
  background:rgba(148,178,226,.06); color:var(--testo);
  box-shadow:0 0 0 1px var(--line-forte) inset;
  backdrop-filter:blur(8px);
}
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:0 0 0 1px rgba(46,163,224,.6) inset; }
.btn-grande{ padding:1.1rem 2.4rem; font-size:1.06rem; }

/* ---------- header ---------- */
.top{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background .35s, box-shadow .35s, backdrop-filter .35s;
}
.top.solida{
  background:rgba(5,8,15,.72);
  backdrop-filter:blur(16px);
  box-shadow:0 1px 0 var(--line);
}
.top-in{
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 0; gap:1.5rem;
}
.top .brand img{ height:46px; width:auto; }
.top .brand{ display:inline-flex; align-items:center; }
.top nav{ display:flex; align-items:center; gap:1.9rem; }
.top nav a{ font-size:.92rem; font-weight:600; color:var(--muted); transition:color .2s; }
.top nav a:hover{ color:var(--testo); }
/* i link-bottone non ereditano il colore del menu */
.top nav a.btn-primaria, .top nav a.btn-primaria:hover,
.piede nav a.btn-primaria, nav a.btn-primaria{ color:#04121C; }
.top .btn{ padding:.68rem 1.4rem; font-size:.9rem; }
@media (max-width:760px){
  .top nav a:not(.btn){ display:none; }
}

/* barra avanzamento scroll */
.progresso{
  position:fixed; top:0; left:0; height:2.5px; width:100%;
  background:var(--grad); transform-origin:0 50%; transform:scaleX(0);
  z-index:101;
}

/* ==========================================================================
   MOMENTO 1 — HERO
   ========================================================================== */
.hero{
  position:relative; min-height:100svh;
  display:flex; align-items:center;
  overflow:hidden;
}
.hero-media{
  position:absolute; inset:0; z-index:0;
}
.hero-media video, .hero-media img{
  width:100%; height:100%; object-fit:cover;
  opacity:.55;
}
.hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(5,8,15,.92) 0%, rgba(5,8,15,.55) 45%, rgba(5,8,15,.25) 100%),
    linear-gradient(0deg, var(--bg) 0%, transparent 30%, transparent 82%, rgba(5,8,15,.8) 100%);
}
.hero-contenuto{
  position:relative; z-index:2;
  padding:8rem 0 6rem;
  max-width:640px;
}
.hero .h-mega{ margin:1.3rem 0 1.4rem; }
.hero .lead{ max-width:520px; margin-bottom:2.4rem; }
.hero-cta{ display:flex; gap:1rem; flex-wrap:wrap; }

/* chip fluttuanti aspirate nel nucleo */
.hero-chips{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.chip-flot{
  position:absolute;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.5rem .95rem; border-radius:999px;
  background:var(--glass); backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px var(--line) inset, 0 8px 30px rgba(0,0,0,.45);
  font-size:.82rem; font-weight:600; color:var(--muted);
  will-change:transform, opacity;
}
.chip-flot .led{
  width:7px; height:7px; border-radius:50%; background:var(--blu);
  box-shadow:0 0 10px var(--blu-glow);
}
.chip-flot:nth-child(even) .led{ background:var(--verde); box-shadow:0 0 10px var(--verde-glow); }

.scroll-hint{
  position:absolute; left:50%; bottom:2rem; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:var(--muted2); font-size:.75rem; letter-spacing:.2em; text-transform:uppercase;
}
.scroll-hint::after{
  content:""; width:1.5px; height:42px;
  background:linear-gradient(180deg, var(--blu), transparent);
  animation:hint 1.8s ease-in-out infinite;
}
@keyframes hint{ 0%{ transform:scaleY(.2); transform-origin:top; opacity:0;} 40%{ transform:scaleY(1); opacity:1;} 100%{ transform:scaleY(1); transform-origin:top; opacity:0;} }

/* ==========================================================================
   MOMENTO 2-3 — CAOS → CONVERGENZA  (scena pinnata)
   ========================================================================== */
.scena-caos{ position:relative; }
.caos-stage{
  position:relative; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.caos-bg{
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; will-change:opacity;
}
.caos-titolo{
  position:absolute; z-index:3; text-align:center; padding:0 6%;
  will-change:transform, opacity;
}
.caos-titolo .h-scena{ margin-top:.9rem; }
.caos-titolo[data-fase="dopo"]{ opacity:0; }

/* notifiche del caos */
.notifica{
  position:absolute; z-index:2;
  width:230px; padding:.8rem .95rem; border-radius:14px;
  background:var(--glass); backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px var(--line) inset, 0 14px 40px rgba(0,0,0,.5);
  will-change:transform, opacity;
}
.notifica .app{
  display:flex; align-items:center; gap:.5rem;
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted2); margin-bottom:.35rem;
}
.notifica .app i{
  width:8px; height:8px; border-radius:3px; background:var(--blu); display:inline-block;
}
.notifica p{ font-size:.83rem; color:var(--testo); line-height:1.4; }
.notifica.na .app i{ background:#E1306C; }
.notifica.nb .app i{ background:#25D366; }
.notifica.nc .app i{ background:#4285F4; }
.notifica.nd .app i{ background:#0084FF; }
.notifica.ne .app i{ background:var(--verde); }
.notifica.nf .app i{ background:#F59E0B; }

/* nucleo */
.nucleo{
  position:absolute; z-index:2; left:50%; top:50%;
  width:120px; height:120px; margin:-60px 0 0 -60px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, rgba(46,163,224,.9), rgba(147,192,30,.55) 60%, transparent 75%);
  filter:blur(2px);
  box-shadow:0 0 90px 30px rgba(46,163,224,.35), 0 0 140px 60px rgba(147,192,30,.12);
  opacity:0; transform:scale(.3);
  will-change:transform, opacity;
}

/* finestra evolvenda che emerge dal nucleo */
.finestra-ev{
  position:absolute; z-index:4; left:50%; top:50%;
  width:min(720px, 88vw);
  transform:translate(-50%,-50%) scale(.6);
  opacity:0;
  will-change:transform, opacity;
}

/* ---------- finestra applicativa (riusata in più scene) ---------- */
.app-finestra{
  border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow:
    0 0 0 1px var(--line-forte) inset,
    0 0 0 1px rgba(0,0,0,.4),
    0 40px 90px rgba(0,0,0,.55),
    0 0 120px rgba(46,163,224,.10);
}
.app-barra{
  display:flex; align-items:center; gap:.6rem;
  padding:.65rem .95rem;
  background:rgba(148,178,226,.05);
  box-shadow:0 1px 0 var(--line);
}
.app-barra .semafori{ display:flex; gap:.35rem; }
.app-barra .semafori i{ width:9px; height:9px; border-radius:50%; background:#2b3a55; display:block; }
.app-barra .app-nome{
  margin-left:.4rem; font-size:.78rem; font-weight:700; color:var(--muted);
  display:flex; align-items:center; gap:.45rem;
}
.app-barra .app-nome b{ color:var(--testo); font-weight:700; }
.app-corpo{ padding:1.1rem; }

/* ==========================================================================
   MOMENTO 4 — DASHBOARD (controllo)
   ========================================================================== */
.scena{ position:relative; padding:9rem 0; }
.scena-testa{ max-width:640px; margin-bottom:3.4rem; }
.scena-testa .h-scena{ margin:1rem 0 1rem; }
.scena-testa.centro{ margin-inline:auto; text-align:center; }
.scena-testa.centro .kicker{ justify-content:center; }
.scena-testa.centro .kicker::before{ display:none; }

.dash{ position:relative; }
.dash .app-corpo{ display:grid; grid-template-columns:170px 1fr; gap:1rem; }
.dash-nav{ display:flex; flex-direction:column; gap:.3rem; }
.dash-nav span{
  font-size:.8rem; font-weight:600; color:var(--muted2);
  padding:.5rem .7rem; border-radius:9px;
}
.dash-nav span.attivo{ background:rgba(46,163,224,.12); color:var(--testo); box-shadow:0 0 0 1px rgba(46,163,224,.25) inset; }
.dash-main{ display:grid; gap:1rem; }
.kpi-riga{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.kpi{
  padding:1rem 1.1rem; border-radius:14px;
  background:rgba(148,178,226,.045);
  box-shadow:0 0 0 1px var(--line) inset;
  will-change:transform, opacity;
}
.kpi .et{ font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted2); }
.kpi .val{
  font-family:var(--font-d); font-size:1.7rem; font-weight:700; letter-spacing:-.02em;
  margin:.2rem 0 .1rem;
}
.kpi .delta{ font-size:.75rem; font-weight:700; color:var(--verde); }
.dash-grafico{
  padding:1.1rem; border-radius:14px;
  background:rgba(148,178,226,.045);
  box-shadow:0 0 0 1px var(--line) inset;
}
.dash-grafico .et{ font-size:.78rem; font-weight:700; color:var(--muted); margin-bottom:.6rem; }
.dash-grafico svg{ width:100%; height:auto; display:block; }
.dash-satelliti{ position:absolute; inset:0; pointer-events:none; }
.satellite{
  position:absolute;
  padding:.55rem .95rem; border-radius:12px;
  background:var(--glass); backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px var(--line) inset, 0 14px 40px rgba(0,0,0,.5);
  font-size:.8rem; font-weight:600; color:var(--muted);
  will-change:transform, opacity;
}
.satellite b{ color:var(--testo); }

/* ==========================================================================
   MOMENTO 5 — AUTOMAZIONI (workflow che si accende)
   ========================================================================== */
.flow{ position:relative; }
.flow-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:4rem; align-items:center; }
.flow-svgbox{ position:relative; }
.flow-svgbox svg{ width:100%; height:auto; display:block; }
.nodo{
  fill:rgba(13,22,40,.9);
  stroke:rgba(148,178,226,.22); stroke-width:1.2;
  rx:12;
}
.nodo-testo{ fill:#8FA0BE; font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; }
.nodo-icona{ fill:#5C6B88; font-size:13px; }
.filo{
  stroke:rgba(148,178,226,.2); stroke-width:1.6; fill:none;
}
.filo-luce{
  stroke:url(#gradFlow); stroke-width:2.2; fill:none;
  stroke-dasharray:1; stroke-dashoffset:1;
  filter:drop-shadow(0 0 6px rgba(46,163,224,.6));
}
.g-nodo.acceso .nodo{ stroke:url(#gradFlow); stroke-width:1.6; fill:rgba(20,34,60,.95); }
.g-nodo.acceso .nodo-testo{ fill:#EAF0FA; }
.g-nodo.acceso .nodo-icona{ fill:#93C01E; }
.impulso{ fill:#fff; filter:drop-shadow(0 0 8px rgba(46,163,224,.9)); }

/* ==========================================================================
   MOMENTO 6 — LEAD JOURNEY (marketing)
   ========================================================================== */
.viaggio{ position:relative; }
.viaggio-binario{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:1.2rem;
  position:relative; margin-top:1rem;
}
.viaggio-binario::before{
  content:""; position:absolute; top:50%; left:2%; right:2%;
  height:1.5px; background:linear-gradient(90deg, transparent, var(--line-forte), var(--line-forte), transparent);
  z-index:0;
}
.tappa{
  position:relative; z-index:1;
  padding:1.2rem; border-radius:16px;
  background:var(--glass); backdrop-filter:blur(10px);
  box-shadow:0 0 0 1px var(--line) inset, 0 18px 50px rgba(0,0,0,.45);
  will-change:transform, opacity;
}
.tappa .fase{
  font-size:.68rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted2); margin-bottom:.55rem; display:flex; align-items:center; gap:.45rem;
}
.tappa .fase i{ width:7px; height:7px; border-radius:50%; background:var(--blu); box-shadow:0 0 8px var(--blu-glow); }
.tappa h4{ font-size:.98rem; font-weight:700; margin-bottom:.4rem; }
.tappa p{ font-size:.83rem; color:var(--muted); }
.mini-annuncio{
  margin-top:.7rem; padding:.7rem; border-radius:10px;
  background:rgba(148,178,226,.05); box-shadow:0 0 0 1px var(--line) inset;
  font-size:.76rem; color:var(--muted);
}
.mini-annuncio b{ color:var(--testo); display:block; margin-bottom:.15rem; }
.chip-azione{
  display:inline-flex; align-items:center; gap:.4rem;
  margin:.25rem .25rem 0 0; padding:.32rem .7rem; border-radius:999px;
  background:rgba(147,192,30,.1); box-shadow:0 0 0 1px rgba(147,192,30,.3) inset;
  font-size:.72rem; font-weight:700; color:#C4E36E;
  opacity:0; transform:translateY(8px);
}
.lead-card-volante{
  position:absolute; z-index:5; top:0; left:0;
  padding:.6rem .9rem; border-radius:12px;
  background:linear-gradient(160deg, #12233E, #0C1424);
  box-shadow:0 0 0 1px rgba(46,163,224,.5) inset, 0 10px 40px rgba(46,163,224,.25);
  font-size:.8rem; font-weight:700; white-space:nowrap;
  will-change:transform, opacity; opacity:0;
}
.lead-card-volante small{ display:block; font-weight:500; color:var(--muted); }

/* ==========================================================================
   MOMENTO 7 — PIPELINE VIVA
   ========================================================================== */
.kanban{ display:grid; grid-template-columns:repeat(5, 1fr); gap:.9rem; }
.colonna{
  border-radius:14px; padding:.8rem;
  background:rgba(148,178,226,.04);
  box-shadow:0 0 0 1px var(--line) inset;
  min-height:240px;
  transition:box-shadow .3s;
}
.colonna h5{
  font-size:.7rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted2); margin-bottom:.7rem; display:flex; justify-content:space-between;
}
.colonna h5 em{ font-style:normal; color:var(--muted); }
.colonna.calda{ box-shadow:0 0 0 1.5px rgba(46,163,224,.5) inset, 0 0 40px rgba(46,163,224,.08); }
.k-card{
  border-radius:11px; padding:.7rem .8rem; margin-bottom:.6rem;
  background:var(--panel2);
  box-shadow:0 0 0 1px var(--line) inset, 0 8px 22px rgba(0,0,0,.35);
  font-size:.8rem;
  transition:transform .25s;
}
.k-card:hover{ transform:translateY(-3px) rotate(-.5deg); }
.k-card b{ display:block; font-size:.84rem; }
.k-card span{ color:var(--muted2); font-size:.72rem; }
.k-card.eroe{
  background:linear-gradient(160deg, #13253F, #0E1930);
  box-shadow:0 0 0 1.5px rgba(46,163,224,.55) inset, 0 10px 34px rgba(46,163,224,.2);
}
.k-card.fantasma{ opacity:.35; }
.pipeline-esiti{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-top:2.6rem;
}
.esito{ font-family:var(--font-d); font-size:1.02rem; font-weight:600; color:var(--muted); }
.esito b{ color:var(--testo); font-weight:700; }

/* ==========================================================================
   MOMENTO 8 — CUSTOMER EXPERIENCE (inbox, IA notte, calendario, recensioni)
   ========================================================================== */
.cx-griglia{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-top:3rem; }
.cx-card{
  border-radius:20px; padding:1.6rem; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow:0 0 0 1px var(--line) inset, 0 30px 70px rgba(0,0,0,.45);
}
.cx-card .kicker{ margin-bottom:1rem; }
.cx-card h3{ font-family:var(--font-d); font-size:1.3rem; font-weight:700; letter-spacing:-.01em; margin-bottom:1.2rem; line-height:1.25; }
.cx-card h3 span{ color:var(--muted); }

/* inbox unificata */
.inbox-demo{ display:grid; grid-template-columns:auto 1fr; gap:1rem; align-items:start; }
.canali{ display:flex; flex-direction:column; gap:.5rem; }
.canale{
  display:flex; align-items:center; gap:.5rem;
  font-size:.74rem; font-weight:700; color:var(--muted);
  padding:.42rem .7rem; border-radius:999px;
  background:rgba(148,178,226,.05); box-shadow:0 0 0 1px var(--line) inset;
  transition:box-shadow .25s, color .25s;
}
.canale i{ width:8px; height:8px; border-radius:3px; }
.canale:hover{ color:var(--testo); box-shadow:0 0 0 1px rgba(46,163,224,.55) inset; }
.chat-demo{
  border-radius:14px; padding:.9rem;
  background:rgba(148,178,226,.045); box-shadow:0 0 0 1px var(--line) inset;
  display:flex; flex-direction:column; gap:.55rem; min-height:220px;
}
.msg{
  max-width:85%; padding:.5rem .8rem; border-radius:12px;
  font-size:.8rem; line-height:1.4;
  opacity:0; transform:translateY(10px);
  will-change:transform, opacity;
}
.msg.in{ align-self:flex-start; background:var(--panel2); box-shadow:0 0 0 1px var(--line) inset; border-bottom-left-radius:4px; }
.msg.out{ align-self:flex-end; background:rgba(46,163,224,.16); box-shadow:0 0 0 1px rgba(46,163,224,.3) inset; border-bottom-right-radius:4px; }
.msg .canale-tag{ display:block; font-size:.62rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#E1306C; margin-bottom:.2rem; }
.ai-popup{
  margin-top:.2rem; padding:.7rem .9rem; border-radius:12px;
  background:rgba(147,192,30,.09);
  box-shadow:0 0 0 1px rgba(147,192,30,.35) inset;
  font-size:.78rem; opacity:0; transform:scale(.92);
  will-change:transform, opacity;
}
.ai-popup b{ color:#C4E36E; display:flex; align-items:center; gap:.4rem; margin-bottom:.25rem; }
.ai-popup span{ color:var(--muted); display:block; font-size:.74rem; }

/* notte / IA */
.notte{ position:relative; }
.orologio{
  font-family:var(--font-d); font-size:2.2rem; font-weight:700; letter-spacing:.02em;
  color:var(--testo); margin-bottom:.9rem;
}
.orologio small{ font-size:.8rem; color:var(--muted2); font-weight:600; letter-spacing:.14em; display:block; }
.mattino-card{
  margin-top:1rem; padding:.9rem 1rem; border-radius:12px;
  background:rgba(46,163,224,.08); box-shadow:0 0 0 1px rgba(46,163,224,.3) inset;
  font-size:.8rem; opacity:0; transform:translateY(10px);
}
.mattino-card b{ display:block; margin-bottom:.3rem; color:var(--testo); }
.mattino-card span{ display:block; color:var(--muted); padding:.1rem 0; }
.mattino-card span::before{ content:"✓ "; color:var(--verde); font-weight:800; }

/* calendario */
.cal-demo{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; align-items:start; }
.slot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.45rem; }
.slot{
  padding:.5rem .3rem; text-align:center; border-radius:9px;
  font-size:.74rem; font-weight:700; color:var(--muted);
  background:rgba(148,178,226,.05); box-shadow:0 0 0 1px var(--line) inset;
}
.slot.scelto{
  background:var(--grad); color:#04121c;
  box-shadow:0 6px 22px rgba(46,163,224,.4);
}
.conferme{ display:flex; flex-direction:column; gap:.5rem; }
.conferma{
  padding:.6rem .8rem; border-radius:11px;
  font-size:.76rem; color:var(--muted);
  background:rgba(148,178,226,.05); box-shadow:0 0 0 1px var(--line) inset;
  opacity:0; transform:translateX(14px);
  will-change:transform, opacity;
}
.conferma b{ color:var(--testo); }
.conferma.wa{ box-shadow:0 0 0 1px rgba(37,211,102,.4) inset; }

/* recensioni */
.stelle-fila{ display:flex; gap:.4rem; font-size:1.6rem; margin:.8rem 0; }
.stella{ opacity:0; transform:translateY(14px) scale(.6); color:#F5C518; will-change:transform,opacity; text-shadow:0 0 18px rgba(245,197,24,.5); }
.reputazione{
  display:flex; align-items:center; gap:1rem;
  padding:.9rem 1rem; border-radius:12px;
  background:rgba(148,178,226,.05); box-shadow:0 0 0 1px var(--line) inset;
}
.reputazione .voto{ font-family:var(--font-d); font-size:2rem; font-weight:700; }
.reputazione .dett{ font-size:.76rem; color:var(--muted); }
.reputazione .dett b{ color:var(--testo); display:block; }

/* ==========================================================================
   MOMENTO 9 — ECOSISTEMA
   ========================================================================== */
.eco{
  position:relative; overflow:hidden;
  padding:10rem 0;
}
.eco-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  opacity:.5;
}
.eco-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(0deg, var(--bg) 0%, transparent 35%, transparent 65%, var(--bg) 100%);
}
.eco .wrap{ position:relative; z-index:1; }
.eco-nuvola{
  display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem;
  max-width:900px; margin:3rem auto 0;
}
.eco-chip{
  padding:.55rem 1.1rem; border-radius:999px;
  background:var(--glass); backdrop-filter:blur(8px);
  box-shadow:0 0 0 1px var(--line) inset;
  font-size:.85rem; font-weight:600; color:var(--muted);
  transition:transform .25s, box-shadow .25s, color .25s;
  cursor:default;
  will-change:transform, opacity;
}
.eco-chip:hover{
  transform:translateY(-4px);
  color:var(--testo);
  box-shadow:0 0 0 1px rgba(46,163,224,.6) inset, 0 10px 30px rgba(46,163,224,.2);
}

/* ==========================================================================
   MOMENTO 10 — CTA FINALE
   ========================================================================== */
.finale{
  position:relative; text-align:center; padding:11rem 0 9rem; overflow:hidden;
}
.finale::before{
  content:""; position:absolute; left:50%; top:55%;
  width:900px; height:900px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(46,163,224,.16), rgba(147,192,30,.07) 45%, transparent 70%);
  pointer-events:none;
}
.finale .h-mega{ margin:1.2rem auto 1.4rem; max-width:820px; }
.finale .lead{ max-width:520px; margin:0 auto 2.6rem; }

/* ---------- footer ---------- */
.piede{
  position:relative; padding:3.5rem 0 2.5rem;
  box-shadow:0 -1px 0 var(--line);
}
.piede-in{
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.piede .brand{ display:inline-flex; }
.piede .brand img{ height:42px; width:auto; }
.piede nav{ display:flex; gap:1.6rem; flex-wrap:wrap; }
.piede nav a{ font-size:.85rem; color:var(--muted); }
.piede nav a:hover{ color:var(--testo); }
.piede .microcopy{ width:100%; text-align:center; margin-top:2rem; }

/* CTA sticky mobile */
.sticky-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:99;
  padding:.7rem 5%;
  background:rgba(5,8,15,.82); backdrop-filter:blur(14px);
  box-shadow:0 -1px 0 var(--line);
  display:none; align-items:center; justify-content:space-between; gap:1rem;
  transform:translateY(110%); transition:transform .4s cubic-bezier(.2,.7,.2,1);
}
.sticky-cta.visibile{ transform:none; }
.sticky-cta strong{ font-size:.85rem; }
.sticky-cta .btn{ padding:.6rem 1.2rem; font-size:.85rem; }

/* ==========================================================================
   LANDING TRIAL
   ========================================================================== */
.trial-hero{
  position:relative; min-height:92svh; display:flex; align-items:center; overflow:hidden;
}
.trial-hero .hero-media img{ opacity:.6; }
.trial-hero .hero-contenuto{ padding:9rem 0 5rem; max-width:600px; }
.badge-trial{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.45rem 1.1rem; border-radius:999px;
  background:rgba(147,192,30,.1); box-shadow:0 0 0 1px rgba(147,192,30,.35) inset;
  font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#C4E36E;
}
.passi{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.passo{
  padding:1.6rem 1.4rem; border-radius:18px; position:relative; overflow:hidden;
  background:linear-gradient(180deg, var(--panel2), var(--panel));
  box-shadow:0 0 0 1px var(--line) inset;
  transition:transform .25s, box-shadow .25s;
}
.passo:hover{ transform:translateY(-5px); box-shadow:0 0 0 1px rgba(46,163,224,.5) inset, 0 20px 50px rgba(0,0,0,.4); }
.passo .num{
  font-family:var(--font-d); font-size:2rem; font-weight:700;
  background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.passo h4{ font-family:var(--font-d); font-size:1.05rem; margin:.6rem 0 .45rem; letter-spacing:.02em; }
.passo p{ font-size:.86rem; color:var(--muted); }

.modulo-scena{ position:relative; padding:7rem 0 8rem; }
.modulo-scena::before{
  content:""; position:absolute; left:50%; top:40%;
  width:760px; height:760px; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(46,163,224,.12), transparent 65%);
  pointer-events:none;
}
.modulo-guscio{
  position:relative; max-width:720px; margin-inline:auto;
  border-radius:24px; overflow:hidden;
  background:linear-gradient(180deg, rgba(17,28,49,.92), rgba(10,17,31,.96));
  backdrop-filter:blur(18px);
  box-shadow:
    0 0 0 1px var(--line-forte) inset,
    0 50px 120px rgba(0,0,0,.6),
    0 0 140px rgba(46,163,224,.12);
}
.modulo-testa{ text-align:center; padding:2.6rem 2rem 1.4rem; }
.modulo-testa .h-sub{ margin-bottom:.5rem; }
.modulo-corpo{ background:#fff; margin:0 .6rem; border-radius:14px; overflow:hidden; }
.modulo-corpo iframe{ width:100%; border:0; display:block; min-height:620px; }
.modulo-piede{ text-align:center; padding:1.2rem 2rem 1.8rem; }

/* ==========================================================================
   RESPONSIVE + MOTION
   ========================================================================== */
.svelato{ opacity:0; transform:translateY(34px); }

@media (max-width:1020px){
  .flow-grid{ grid-template-columns:1fr; gap:2.5rem; }
  .kpi-riga{ grid-template-columns:repeat(2,1fr); }
  .viaggio-binario{ grid-template-columns:repeat(2,1fr); }
  .viaggio-binario::before{ display:none; }
  .kanban{ grid-template-columns:repeat(5, minmax(150px,1fr)); overflow-x:auto; padding-bottom:1rem; }
  .cx-griglia{ grid-template-columns:1fr; }
  .passi{ grid-template-columns:repeat(2,1fr); }
  .pipeline-esiti{ grid-template-columns:repeat(2,1fr); gap:1.4rem; }
}
@media (max-width:760px){
  .scena{ padding:5.5rem 0; }
  .dash .app-corpo{ grid-template-columns:1fr; }
  .dash-nav{ flex-direction:row; overflow-x:auto; }
  .cal-demo, .inbox-demo{ grid-template-columns:1fr; }
  .canali{ flex-direction:row; flex-wrap:wrap; }
  .passi{ grid-template-columns:1fr; }
  .sticky-cta{ display:flex; }
  .hero-contenuto{ padding-top:7rem; }
  .satellite{ display:none; }

  /* --- alleggerimento GPU: niente grana né blur su telefono --- */
  body::after{ display:none; }
  .chip-flot, .notifica, .tappa, .eco-chip, .btn-ghost{ backdrop-filter:none; }
  .top.solida{ backdrop-filter:blur(8px); }

  /* --- hero: meno chip, più piccole, lontane dal testo --- */
  .chip-flot{ font-size:.68rem; padding:.35rem .7rem; gap:.35rem; }
  .chip-flot:nth-child(n+7){ display:none; }

  /* --- scena caos: 4 notifiche compatte riposizionate --- */
  .notifica{ width:158px; padding:.6rem .7rem; }
  .notifica .app{ font-size:.6rem; }
  .notifica p{ font-size:.72rem; }
  .notifica.nc, .notifica.nf{ display:none; }
  .notifica.na{ top:14% !important; left:5% !important; }
  .notifica.nd{ top:16% !important; left:auto !important; right:5%; }
  .notifica.nb{ top:72% !important; left:6% !important; }
  .notifica.ne{ top:74% !important; left:auto !important; right:6%; }
  .caos-titolo .h-scena{ font-size:1.55rem; }

  /* --- kpi e viaggio in colonna unica --- */
  .kpi .val{ font-size:1.4rem; }
  .viaggio-binario{ grid-template-columns:1fr; }
  .cx-card{ padding:1.2rem; }
  .cx-card h3{ font-size:1.12rem; }
  .orologio{ font-size:1.7rem; }
  .eco{ padding:6rem 0; }
  .eco-chip{ font-size:.76rem; padding:.42rem .85rem; }
  .finale{ padding:7rem 0 6rem; }
  .modulo-corpo iframe{ min-height:560px; }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  .svelato, .msg, .conferma, .stella, .ai-popup, .mattino-card, .chip-azione{ opacity:1 !important; transform:none !important; }
}