/* ZenkeiX Automazioni AI — production-ready
   Look & feel: neon / circuit / glass + AI particles
*/

:root{
  --bg0:#070712;
  --bg1:#0b0b1c;
  --card:#0e0f22cc;
  --stroke:#2a2f55;
  --txt:#e8e9ff;
  --muted:#b7b9db;
  --muted2:#8b8fb8;
  --aqua:#39e6ff;
  --violet:#7c5cff;
  --mag:#ff4fd8;
  --amber:#ffb24a;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius: 18px;
}

*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--txt);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(124,92,255,.18), transparent 55%),
              radial-gradient(900px 700px at 70% 15%, rgba(57,230,255,.14), transparent 50%),
              linear-gradient(180deg, var(--bg0), var(--bg1));
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none }
a:hover{ color:var(--aqua) }
.container{
  width:min(1140px, calc(100% - 40px));
  margin:0 auto;
}

.mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
.muted{ color:var(--muted2) }

/* Topbar */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter: blur(12px);
  background: linear-gradient(180deg, rgba(10,10,25,.9), rgba(10,10,25,.55));
  border-bottom: 1px solid rgba(42,47,85,.5);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width: 190px;
}
.brand__mark{
  width:28px; height:28px;
  border-radius:10px;
  background: radial-gradient(circle at 30% 30%, rgba(57,230,255,.9), rgba(124,92,255,.5) 55%, rgba(255,79,216,.25));
  box-shadow: 0 0 0 1px rgba(57,230,255,.25), 0 10px 25px rgba(124,92,255,.18);
}
.brand__name{ font-weight:700; letter-spacing:.2px }
.brand__sub{ color:var(--muted2); font-size:12px; margin-left:6px }

.nav{ display:flex; gap:16px; align-items:center; }
.nav a{ color:var(--muted); font-weight:500; font-size:14px }
.nav a:hover{ color:var(--txt) }

.topbar__cta{ display:flex; gap:10px; align-items:center; }

.hamburger{
  display:none;
  width:42px; height:42px;
  border-radius:12px;
  background: rgba(14,15,34,.6);
  border: 1px solid rgba(42,47,85,.7);
  color:var(--txt);
}
.hamburger span{
  display:block;
  width:18px; height:2px;
  margin:4px auto;
  background: var(--txt);
  border-radius:2px;
  opacity:.9;
}

.mobile{
  border-top: 1px solid rgba(42,47,85,.5);
  background: rgba(10,10,25,.75);
}
.mobile__inner{
  padding:14px 0 18px;
  display:grid;
  gap:12px;
}
.mobile__inner a{ color:var(--muted); font-weight:600 }
.mobile__inner a.btn{ color:var(--txt) }

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  border: 1px solid rgba(42,47,85,.8);
  background: rgba(14,15,34,.55);
  color:var(--txt);
  font-weight:600;
  font-size:14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
.btn:hover{ transform: translateY(-1px); transition: .15s ease; }
.btn--primary{
  border: 1px solid rgba(57,230,255,.45);
  background: linear-gradient(135deg, rgba(57,230,255,.25), rgba(124,92,255,.22), rgba(255,79,216,.16));
  box-shadow: 0 18px 60px rgba(57,230,255,.08), 0 20px 70px rgba(124,92,255,.08);
}
.btn--ghost{ background: rgba(14,15,34,.35) }
.btn--lg{ padding:12px 16px; border-radius:16px; font-size:15px }
.btn--full{ width:100% }

/* Hero */
.hero{
  position:relative;
  padding: 64px 0 28px;
  overflow:hidden;
}
.hero__bg{
  position:absolute;
  inset:-40px -40px -40px -40px;
  background:
    radial-gradient(900px 700px at 10% 35%, rgba(255,79,216,.18), transparent 60%),
    radial-gradient(800px 650px at 30% 10%, rgba(57,230,255,.20), transparent 58%),
    radial-gradient(900px 700px at 70% 25%, rgba(124,92,255,.18), transparent 55%),
    url("assets/hero.jpeg");
  background-size: auto, auto, auto, cover;
  background-position: center;
  filter: saturate(1.1) contrast(1.05) brightness(.55);
  transform: scale(1.04);
}
.hero__bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, rgba(7,7,18,.92) 0%, rgba(7,7,18,.78) 42%, rgba(7,7,18,.62) 70%, rgba(7,7,18,.92) 100%);
}

.fxParticles{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity:.55;
  z-index:1;
}

.hero__inner{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap:22px;
  align-items:start;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  border: 1px solid rgba(42,47,85,.7);
  background: rgba(14,15,34,.45);
  color:var(--muted);
  font-weight:600;
  font-size:13px;
}
.dot{
  width:10px; height:10px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, var(--aqua), var(--violet));
  box-shadow: 0 0 0 3px rgba(57,230,255,.12);
}
h1{
  margin:14px 0 10px;
  font-size: clamp(34px, 4.2vw, 54px);
  line-height: 1.03;
  letter-spacing:-.02em;
}
.grad{
  background: linear-gradient(90deg, var(--aqua), var(--violet), var(--mag));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.lead{
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 58ch;
}
.hero__actions{ display:flex; gap:12px; flex-wrap:wrap; margin: 18px 0 18px; }

.proof{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}
.proof__item{
  padding:10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(42,47,85,.7);
  background: rgba(14,15,34,.40);
  min-width: 140px;
}
.proof__kpi{
  font-weight:800;
  letter-spacing:-.02em;
  font-size:18px;
}
.proof__lbl{ color:var(--muted2); font-size:12px; margin-top:3px; }

/* Glass card */
.hero__card{ position:relative; }
.glass{
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(14,15,34,.65), rgba(14,15,34,.38));
  border: 1px solid rgba(57,230,255,.20);
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
}
.glass__header{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom: 14px;
}
.pulse{
  width:14px; height:14px; border-radius:50%;
  background: var(--aqua);
  box-shadow: 0 0 0 0 rgba(57,230,255,.6);
  animation: pulse 1.8s infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(57,230,255,.55) }
  70%{ box-shadow:0 0 0 12px rgba(57,230,255,0) }
  100%{ box-shadow:0 0 0 0 rgba(57,230,255,0) }
}
.glass__title{ font-weight:800; letter-spacing:-.01em }
.glass__subtitle{ color:var(--muted2); font-size:12px; margin-top:2px }

.meter{ display:grid; gap:10px; }
.meter__row{ display:flex; justify-content:space-between; color:var(--muted); font-weight:600; font-size:13px }
.bar{
  height:10px;
  border-radius:999px;
  border: 1px solid rgba(42,47,85,.7);
  background: rgba(7,7,18,.6);
  overflow:hidden;
}
.bar__fill{
  height:100%;
  border-radius:999px;
  background: linear-gradient(90deg, rgba(57,230,255,.9), rgba(124,92,255,.75), rgba(255,79,216,.65));
}
.glass__footer{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-top: 14px;
}
.tag{
  font-size:12px;
  color:var(--muted);
  padding: 6px 10px;
  border-radius:999px;
  border: 1px solid rgba(42,47,85,.7);
  background: rgba(14,15,34,.40);
}
.note{
  margin: 12px 0 0;
  color: var(--muted2);
  font-size:12px;
  line-height: 1.55;
}

/* Logos strip */
.logos{
  padding: 18px 0 26px;
}
.logos__inner{
  border-top: 1px solid rgba(42,47,85,.45);
  border-bottom: 1px solid rgba(42,47,85,.45);
  padding: 16px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}
.logos__label{ margin:0; color:var(--muted2); font-weight:600; font-size:13px; }
.logos__row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.pill{
  padding: 7px 10px;
  border-radius:999px;
  border: 1px solid rgba(42,47,85,.7);
  background: rgba(14,15,34,.35);
  color: var(--muted);
  font-size:12px;
  font-weight:600;
}

/* Sections */
.section{ padding: 58px 0; }
.section--alt{
  background: radial-gradient(900px 700px at 25% 0%, rgba(124,92,255,.14), transparent 55%),
              radial-gradient(900px 700px at 75% 10%, rgba(57,230,255,.10), transparent 55%),
              linear-gradient(180deg, rgba(14,15,34,.25), rgba(14,15,34,.05));
  border-top: 1px solid rgba(42,47,85,.45);
  border-bottom: 1px solid rgba(42,47,85,.35);
}
.section__header{ margin-bottom: 22px; }
.section__header h2{
  margin:0 0 8px;
  font-size: clamp(24px, 2.3vw, 34px);
  letter-spacing:-.02em;
}
.section__header p{ margin:0; color:var(--muted); line-height:1.6; }

/* Cards grid */
.grid{ display:grid; gap:14px; }
.grid--3{ grid-template-columns: repeat(3, 1fr); }

.card{
  padding: 16px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(14,15,34,.55), rgba(14,15,34,.33));
  border: 1px solid rgba(42,47,85,.7);
  box-shadow: 0 18px 55px rgba(0,0,0,.18);
}
.card__icon{
  width:42px; height:42px;
  border-radius:14px;
  display:grid; place-items:center;
  background: rgba(57,230,255,.10);
  border: 1px solid rgba(57,230,255,.18);
  margin-bottom: 10px;
}
.card h3{ margin: 0 0 8px; letter-spacing:-.01em }
.card p{ margin:0 0 10px; color:var(--muted); line-height:1.6 }
.list{ margin:0; padding-left: 18px; color:var(--muted2); line-height: 1.75; }

/* Steps */
.steps{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.step{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(42,47,85,.7);
  background: rgba(14,15,34,.30);
}
.step__n{
  width:38px; height:38px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight:900;
  background: linear-gradient(135deg, rgba(57,230,255,.18), rgba(124,92,255,.18));
  border: 1px solid rgba(57,230,255,.25);
  margin-bottom: 10px;
}
.step h3{ margin:0 0 6px }
.step p{ margin:0; color:var(--muted); line-height:1.6 }

/* Pricing */
.pricing{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
.price{
  position:relative;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(42,47,85,.75);
  background: linear-gradient(180deg, rgba(14,15,34,.50), rgba(14,15,34,.30));
  box-shadow: 0 22px 70px rgba(0,0,0,.22);
}
.price__top{ margin-bottom: 12px; }
.price h3{ margin:0 0 6px }
.price__desc{ margin:0 0 10px; color:var(--muted); }
.price__value{
  font-size: 34px;
  font-weight: 900;
  letter-spacing:-.02em;
}
.price__note{ color:var(--muted2); font-size: 12px; margin-top: 2px; }
.price--featured{
  border: 1px solid rgba(57,230,255,.36);
  background: linear-gradient(180deg, rgba(57,230,255,.12), rgba(124,92,255,.10), rgba(14,15,34,.30));
}
.ribbon{
  position:absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  background: rgba(57,230,255,.14);
  border: 1px solid rgba(57,230,255,.22);
  color: var(--txt);
}
.check{
  margin:0 0 12px;
  padding-left: 0;
  list-style:none;
  display:grid;
  gap:8px;
  color:var(--muted);
}
.check li{
  padding-left: 26px;
  position:relative;
  line-height:1.5;
}
.check li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  color: var(--aqua);
  font-weight:900;
}

.callout{
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(42,47,85,.7);
  background: rgba(14,15,34,.30);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

/* Form */
.formwrap{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:14px;
  align-items:start;
}
.form{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(42,47,85,.75);
  background: rgba(14,15,34,.35);
}
.form label{ display:grid; gap:8px; margin-bottom: 12px; color:var(--muted); font-weight:600; font-size:13px; }
.form__row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(42,47,85,.8);
  background: rgba(7,7,18,.55);
  color: var(--txt);
  outline:none;
}
input:focus, select:focus, textarea:focus{
  border-color: rgba(57,230,255,.45);
  box-shadow: 0 0 0 4px rgba(57,230,255,.10);
}
textarea{ resize: vertical; min-height: 110px; }

.switch{
  display:flex;
  gap:12px;
  align-items:center;
  font-weight:600;
  color:var(--muted);
  margin: 8px 0 0;
}
.switch input{ width:1px; height:1px; opacity:0; position:absolute; }
.switch__ui{
  width:44px; height:26px;
  border-radius:999px;
  background: rgba(7,7,18,.75);
  border:1px solid rgba(42,47,85,.8);
  position:relative;
  flex: 0 0 auto;
}
.switch__ui::after{
  content:"";
  position:absolute;
  top:3px; left:3px;
  width:20px; height:20px;
  border-radius:50%;
  background: rgba(232,233,255,.9);
  transition: .18s ease;
}
.switch input:checked + .switch__ui{
  border-color: rgba(57,230,255,.45);
  background: rgba(57,230,255,.12);
}
.switch input:checked + .switch__ui::after{
  transform: translateX(18px);
  background: linear-gradient(135deg, rgba(57,230,255,.95), rgba(124,92,255,.75));
}
.switch__txt{ color:var(--muted) }

.aside{
  display:grid;
  gap:14px;
}
.aside__box{
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(42,47,85,.75);
  background: rgba(14,15,34,.28);
}
.aside__box h3{ margin:0 0 10px }
.stack{ display:flex; gap:10px; flex-wrap:wrap; }

/* FAQ */
.faq{
  display:grid;
  gap:10px;
}
details{
  border-radius: var(--radius);
  border: 1px solid rgba(42,47,85,.75);
  background: rgba(14,15,34,.30);
  padding: 12px 14px;
}
summary{
  cursor:pointer;
  font-weight:800;
  color:var(--txt);
}
details p{ color:var(--muted); line-height:1.6; margin: 10px 0 0; }

/* Toast */
.toast{
  position: fixed;
  right: 18px;
  bottom: 92px;
  width: min(360px, calc(100% - 36px));
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(57,230,255,.26);
  background: rgba(14,15,34,.70);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  z-index: 70;
}
.toast__title{ font-weight:900; margin-bottom: 4px; }
.toast__body{ color:var(--muted); font-size: 13px; line-height:1.5; }

/* Footer */
.footer{
  border-top: 1px solid rgba(42,47,85,.45);
  padding: 34px 0 18px;
  background: rgba(7,7,18,.35);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
}
.brand--footer .brand__sub{ display:none; }
.footer__txt{ margin: 10px 0 0; color:var(--muted2) }
.footer__cols{ display:flex; gap:40px; flex-wrap:wrap; }
.footer__cols h4{ margin:0 0 10px; color:var(--txt) }
.footer__cols a{ display:block; color:var(--muted); margin: 6px 0; }
.footer__bottom{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(42,47,85,.35);
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted2);
  font-size: 12px;
}
/* Floating contact widgets (snello, stabile, allineato a destra) */
.contact-fabs{
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: grid;
  gap: 10px;
  z-index: 80;
  justify-items: end;   /* allineamento a destra */
  align-items: end;
}

.fab{
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(42,47,85,.8);
  background: rgba(14,15,34,.62);
  box-shadow: 0 18px 60px rgba(0,0,0,.25);
  font-weight: 900;
  letter-spacing: .4px;
  cursor: pointer;
}
.fab:hover{ transform: translateY(-2px); transition: .15s ease; }

.fab svg{ width:22px; height:22px; display:block; fill: currentColor; }

.fab--wa{
  border-color: rgba(57,230,255,.35);
  background: linear-gradient(135deg, rgba(57,230,255,.18), rgba(14,15,34,.60));
  color:#25D366;
}
.fab--tg{
  border-color: rgba(124,92,255,.35);
  background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(14,15,34,.60));
  color:#229ED9;
}

/* AI pill (86x52) */
.fab--chat-pill{
  width: 86px;
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
  border-color: rgba(255,79,216,.35);
  background: linear-gradient(135deg, rgba(255,79,216,.16), rgba(14,15,34,.60));
  color: var(--txt);
}
.fab--chat-pill .fab__icon{ width: 22px; height: 22px; fill: currentColor; }
.fab--chat-pill .fab__label{ font-size: 12px; font-weight: 900; letter-spacing: .35px; }

/* Backdrop (chiusura click fuori) */
.chat-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  z-index: 89;
}
.chat-overlay[hidden]{ display:none !important; }

/* Chat drawer */
.chat-drawer{
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: min(420px, calc(100% - 36px));
  height: min(640px, calc(100% - 36px));
  border-radius: 18px;
  border: 1px solid rgba(57,230,255,.22);
  background: rgba(14,15,34,.85);
  box-shadow: var(--shadow);
  overflow: hidden;
  z-index: 90;
  display: grid;
  grid-template-rows: auto 1fr;
}
.chat-drawer[hidden]{ display:none !important; }

.chat-drawer__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(42,47,85,.55);
  background: rgba(7,7,18,.55);
}

.chat-drawer__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 900;
  font-size: 13px;
  color: var(--txt);
}
.chat-drawer__robot{
  width: 28px;
  height: 28px;
  display:inline-grid;
  place-items:center;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(42,47,85,.45);
}

.chat-drawer__close{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(42,47,85,.7);
  background: rgba(14,15,34,.6);
  color: var(--txt);
  cursor: pointer;
}

.chat-drawer__body{ position:relative; overflow:hidden; }
#n8n-chat{ width:100%; height:100%; }


/* =========================
   n8n CHAT – glass / trasparente (solo nel drawer)
   Dove agisce: solo dentro #chatDrawer (quindi non cambia il resto del sito)
   ========================= */
#chatDrawer{

  /* -------------------------
     1) Dimensioni finestra chat
     (qui la chat si adatta al contenitore drawer)
     ------------------------- */
  --chat--window--width: 100%;   /* larghezza chat = 100% del drawer */
  --chat--window--height: 100%;  /* altezza chat = 100% del drawer */


  /* -------------------------
     2) Palette base (colori “globali” usati dal tema n8n)
     In pratica influenzano highlight, bottoni, icone, accenti.
     ------------------------- */
  --chat--color--primary: #7c5cff;                 /* colore principale (accent) */
  --chat--color--secondary: #39e6ff;               /* colore secondario (accent) */
  --chat--color-dark: #0b0b1c;                     /* colore “scuro” di base */
  --chat--color-light: rgba(14,15,34,.25);         /* variante chiara/trasparente */
  --chat--color-white: #e8e9ff;                    /* “bianco” testo (in realtà off-white) */


  /* -------------------------
     3) Sfondo generale della chat + header
     Questi sono quelli che ti danno l’effetto “screen 1” (glass/trasparente)
     ------------------------- */
  --chat--body--background: rgba(14,15,34,.25);    /* sfondo area conversazione (dietro i messaggi) */
  --chat--header--background: rgba(7,7,18,.65);    /* sfondo barra superiore (titolo/chat header) */
  --chat--header--color: #e8e9ff;                  /* colore testo/icone nel header */


  /* -------------------------
     4) Messaggi del BOT (a sinistra)
     ------------------------- */
  --chat--message--bot--background: #7c5cff;       /* sfondo bubble del BOT (violaceo nel tuo test) */
  --chat--message--bot--color: #e8e9ff;            /* colore testo nei messaggi del BOT */


  /* -------------------------
     5) Messaggi dell’UTENTE (a destra)
     ------------------------- */
  --chat--message--user--background: rgba(57,230,255,.18); /* sfondo bubble utente (aqua trasparente) */
  --chat--message--user--color: #e8e9ff;                   /* colore testo bubble utente */


  /* -------------------------
     6) Input in basso (barra di scrittura)
     ------------------------- */
  --chat--input--background: #34354D;     /* sfondo della barra input */
  --chat--input--text-color: #e8e9ff;              /* colore testo digitato + placeholder (se supportato) */
}


/* -------------------------
   7) EXTRA “glass”
   Forza i wrapper principali n8n ad essere trasparenti
   (serve quando vedi blocchi pieni che coprono il background)
   ------------------------- */
#chatDrawer .n8n-chat__window,
#chatDrawer .n8n-chat__layout{
  background: transparent !important; /* elimina eventuale sfondo pieno dei wrapper n8n */
}

/* =========================================
   MOBILE / RESPONSIVE PATCH (append at end)
   Obiettivo: layout 1-colonna, CTA leggibili,
   nav compatta, griglie che collassano, chat ok
   ========================================= */

/* 0) Migliora rendering testo su mobile */
html{
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* === Chat periodic pulse (soft+) === */
@keyframes chatPulseSoft {
  0%, 100% { 
    transform: scale(1);
  }
  50% { 
    transform: scale(1.05); /* leggermente più evidente di 1.03 */
  }
}

#chatFab.chat-pulse-active{
  animation: chatPulseSoft 2.1s ease-in-out infinite !important; /* più lenta = più premium */
  transform-origin: center;
  will-change: transform;

  /* glow leggermente aumentato ma ancora raffinato */
  filter: 
    drop-shadow(0 0 14px rgba(255,79,216,.24))
    drop-shadow(0 0 20px rgba(57,230,255,.14));
}
/* ===== RESPONSIVE (force at end) ===== */

/* Tablet */
@media (max-width: 980px){
  .container{ width: min(980px, calc(100% - 28px)); }

  .hero__inner{ grid-template-columns: 1fr; gap: 16px; }
  .hero{ padding: 52px 0 20px; }

  .hero__actions{ gap: 10px; }

  .grid--3, .pricing, .steps{ grid-template-columns: repeat(2, 1fr); }

  .formwrap{ grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 680px){
  .nav, .topbar__cta{ display: none !important; }
  .hamburger{ display: inline-grid !important; place-items: center; }

  h1{ font-size: clamp(28px, 8vw, 40px); line-height: 1.06; }
  .lead{ font-size: 15px; line-height: 1.65; }

  .badge{ font-size: 12px; padding: 7px 10px; }
  .proof{ gap: 10px; }
  .proof__item{ min-width: 0; flex: 1 1 140px; }

  .glass{ padding: 14px; }

  .grid--3, .pricing, .steps{ grid-template-columns: 1fr; }

  .section{ padding: 44px 0; }

  .logos__inner, .logos__row{ justify-content: flex-start; gap: 10px; }

  .form__row{ grid-template-columns: 1fr; }

  .callout{ flex-direction: column; align-items: stretch; }
  .callout .btn{ width: 100%; }

  .footer__bottom{ flex-direction: column; align-items: flex-start; }

  .contact-fabs{ right: 14px; bottom: 14px; gap: 8px; }
  .fab{ width: 48px; height: 48px; border-radius: 16px; }
  .fab--chat-pill{ width: 78px; height: 48px; border-radius: 16px; }

  .chat-drawer{
    right: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    height: min(86vh, 640px);
  }
}

/* Mobile menu */
@media (max-width: 680px){
  .mobile[hidden]{ display:none !important; }
  .mobile{ display:block; }
}