@font-face { font-family: Rajdhani; font-weight: 500; font-display: swap; src: url(fonts/rajdhani-500-latin.woff2) format("woff2"); }
@font-face { font-family: Rajdhani; font-weight: 600; font-display: swap; src: url(fonts/rajdhani-600-latin.woff2) format("woff2"); }
@font-face { font-family: Rajdhani; font-weight: 700; font-display: swap; src: url(fonts/rajdhani-700-latin.woff2) format("woff2"); }

:root {
  --bg: #080b14; --panel: #0e1526; --panel-2: #131f37; --panel-3: #1a2c4d;
  --cyan: #3fd8ff; --cyan-2: #8be9ff; --magenta: #ff2f7e; --text: #eaf2f8; --text-2: #c3d1e2; --muted: #8fa3bd;
  --wa: #25D366; --ok: #22c55e; --r: 16px;
  --ease: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: Rajdhani, system-ui, sans-serif; font-weight: 500; font-size: 18px; line-height: 1.5;
  background-image: linear-gradient(rgba(63,216,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(63,216,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
}
a { color: var(--cyan); }
b, strong { font-weight: 700; color: #fff; }
h1, h2, h3 { font-weight: 700; line-height: 1.08; margin: 0 0 .5em; }
h1 { font-size: clamp(34px, 9vw, 64px); }
h2 { font-size: clamp(28px, 6.5vw, 46px); }
h3 { font-size: 24px; }
.acc { color: var(--cyan); }
.kicker { text-transform: uppercase; letter-spacing: .15em; color: var(--cyan); font-weight: 700; font-size: 14px; margin-bottom: 10px; display: block; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }
section { padding: 56px 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 12px 22px; border-radius: 999px; border: 1px solid var(--cyan);
  background: var(--cyan); color: #04121a; font: 700 18px/1 Rajdhani, sans-serif; text-decoration: none; cursor: pointer;
  box-shadow: 0 0 24px rgba(63,216,255,.28); transition: filter .15s var(--ease), transform .15s var(--ease);
}
.btn:hover { filter: brightness(1.08); } .btn:active { transform: scale(.98); }
.btn.sec { background: transparent; color: var(--cyan); box-shadow: none; }
.btn.wa { background: var(--wa); border-color: var(--wa); color: #fff; box-shadow: none; }
.btn.full { width: 100%; }

/* header */
header.top { position: sticky; top: 0; z-index: 30; background: rgba(8,11,20,.88); backdrop-filter: blur(8px); border-bottom: 1px solid var(--panel-3); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; gap: 10px; }
header.top img { height: 30px; width: auto; display: block; }
header.top .btn { min-height: 40px; padding: 8px 14px; font-size: 15px; }

/* hero */
.hero { padding: 36px 0 24px; }
.hero p.lead { font-size: 21px; color: var(--text-2); max-width: 760px; }
.badge { display: inline-flex; gap: 8px; align-items: center; border: 1px solid var(--magenta); color: #fff; background: rgba(255,47,126,.12);
  border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 15px; margin: 6px 0 18px; }
.badge i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); display: inline-block; box-shadow: 0 0 10px var(--magenta); }
.buyer-q { margin-top: 18px; font-weight: 700; font-size: 20px; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.chip { min-height: 52px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--panel-3); background: var(--panel); color: var(--text);
  font: 600 16px/1.2 Rajdhani, sans-serif; text-align: left; cursor: pointer; transition: border-color .15s, background .15s; }
.chip[aria-pressed="true"] { border-color: var(--cyan); background: rgba(63,216,255,.12); box-shadow: 0 0 16px rgba(63,216,255,.2); }
.hero-cta { display: grid; gap: 10px; margin-top: 18px; }

/* per buyer */
.pb { display: grid; gap: 14px; }
.card { background: linear-gradient(180deg, var(--panel), var(--bg)); border: 1px solid var(--panel-3); border-radius: var(--r); padding: 20px; }
.card h3 { font-size: 22px; }
.card ul { margin: 0; padding-left: 20px; } .card li { margin: 4px 0; }
.card.meccanismo { border-color: var(--cyan); }

/* agenti */
.agenti { display: grid; grid-template-columns: 1fr; gap: 14px; }
.agente { position: relative; border-radius: var(--r); overflow: hidden; border: 1px solid var(--panel-3); background: var(--panel); display: grid; grid-template-columns: 112px 1fr; }
.agente img { width: 112px; height: 100%; min-height: 150px; object-fit: cover; object-position: center 22%; display: block; }
.agente .dx { padding: 14px 14px 14px 14px; display: flex; flex-direction: column; gap: 6px; }
.agente .nome { font-size: 24px; font-weight: 700; color: #fff; line-height: 1; }
.agente .ruolo { text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; color: var(--cyan); border-left: 3px solid var(--cyan); padding-left: 8px; }
.agente p { margin: 2px 0 6px; font-size: 16px; color: var(--text-2); line-height: 1.35; }
.agente .azioni { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.agente .azioni .btn { min-height: 42px; padding: 8px 14px; font-size: 16px; }
.agente.tony { border-color: var(--cyan); box-shadow: 0 0 24px rgba(63,216,255,.18); }
.online { position: absolute; top: 8px; left: 8px; background: rgba(0,0,0,.62); backdrop-filter: blur(6px); border-radius: 4px; padding: 2px 7px; font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--ok); }

/* flusso */
.flusso { display: grid; gap: 10px; counter-reset: f; }
.flusso li { list-style: none; background: var(--panel); border: 1px solid var(--panel-3); border-radius: 12px; padding: 14px 14px 14px 52px; position: relative; }
.flusso li::before { counter-increment: f; content: counter(f); position: absolute; left: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--cyan); color: #04121a; font-weight: 700; display: grid; place-items: center; font-size: 15px; }
.flusso { padding: 0; margin: 0; }

/* numeri */
.numeri { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.num { background: var(--panel); border: 1px solid var(--panel-3); border-radius: var(--r); padding: 16px; }
.num b { display: block; font-size: 32px; color: var(--cyan); line-height: 1; margin-bottom: 4px; }
.num span { font-size: 15px; color: var(--text-2); line-height: 1.3; display: block; }
.nota { font-size: 14px; color: var(--muted); margin-top: 10px; }

/* moduli */
form.modulo { display: grid; gap: 10px; }
.modulo label { font-size: 15px; font-weight: 600; color: var(--text-2); display: grid; gap: 4px; }
.modulo input, .modulo select { min-height: 50px; border-radius: 10px; border: 1px solid var(--panel-3); background: #0b1120; color: #fff; font: 500 18px Rajdhani, sans-serif; padding: 10px 12px; width: 100%; }
.modulo input:focus, .modulo select:focus { outline: 2px solid var(--cyan); border-color: transparent; }
.modulo .consenso { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 14px; color: var(--muted); }
.modulo .consenso input { min-height: auto; width: 22px; height: 22px; flex: none; margin-top: 2px; }
.esito { font-weight: 700; min-height: 1.2em; }
.esito.ok { color: var(--ok); } .esito.ko { color: var(--magenta); }
.doppio { display: grid; gap: 14px; }

/* luca */
.luca { display: grid; gap: 16px; align-items: end; }
.luca img { width: 100%; max-width: 320px; height: auto; display: block; margin: 0 auto; }
blockquote { margin: 0; font-style: italic; font-size: 20px; color: var(--text-2); }
blockquote footer { font-style: normal; color: var(--cyan); font-weight: 700; margin-top: 6px; }

footer.fondo { border-top: 1px solid var(--panel-3); padding: 28px 0 100px; color: var(--muted); font-size: 15px; }
footer.fondo a { margin-right: 14px; }

/* widget WhatsApp di Chiara */
.wa-widget { position: fixed; right: 14px; bottom: 14px; z-index: 40; display: flex; align-items: center; gap: 8px; background: #fff; color: #0e1a2b; border-radius: 999px;
  padding: 6px 14px 6px 6px; font-weight: 700; font-size: 15px; text-decoration: none; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.wa-widget span.cerchio { width: 40px; height: 40px; border-radius: 50%; background: var(--wa); display: grid; place-items: center; }
.wa-widget img { width: 22px; height: 22px; }
@media (max-width: 759px) { .wa-widget { padding: 6px; font-size: 0; gap: 0; } .wa-widget span.cerchio { width: 52px; height: 52px; } main { padding-bottom: 40px; } }

/* chat */
.chat { position: fixed; inset: 0; z-index: 60; background: var(--bg); display: none; flex-direction: column; }
.chat.aperta { display: flex; }
.chat-testa { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--panel-3); background: var(--panel); padding-top: max(10px, env(safe-area-inset-top)); }
.chat-testa img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: center 22%; }
.chat-testa .chi { flex: 1; line-height: 1.1; } .chat-testa .chi b { font-size: 19px; } .chat-testa .chi small { display: block; color: var(--ok); font-size: 13px; font-weight: 600; }
.chat-testa button { background: none; border: 0; color: var(--text); font-size: 30px; width: 44px; height: 44px; cursor: pointer; }
.chat-tab { display: flex; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--panel-3); overflow-x: auto; }
.chat-tab button { flex: none; min-height: 36px; border-radius: 999px; border: 1px solid var(--panel-3); background: var(--panel); color: var(--text); font: 600 15px Rajdhani; padding: 4px 12px; cursor: pointer; }
.chat-tab button[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
.chat-corpo { flex: 1; overflow-y: auto; padding: 14px 12px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
.msg { max-width: 86%; padding: 10px 13px; border-radius: 16px; font-size: 17px; line-height: 1.4; word-wrap: break-word; }
.msg p { margin: 0 0 6px; } .msg p:last-child { margin: 0; } .msg ul, .msg ol { margin: 4px 0; padding-left: 20px; }
.msg.bot { background: var(--panel-2); border: 1px solid var(--panel-3); align-self: flex-start; border-bottom-left-radius: 4px; }
.msg.io { background: var(--cyan); color: #04121a; align-self: flex-end; border-bottom-right-radius: 4px; }
.msg.io b { color: #04121a; }
.msg.evento { align-self: center; background: rgba(34,197,94,.12); border: 1px solid var(--ok); color: #d7ffe6; font-size: 15px; font-weight: 600; text-align: center; }
.chat.wa .chat-corpo { background: #0b141a; } .chat.wa .msg.bot { background: #202c33; border-color: #202c33; } .chat.wa .msg.io { background: #005c4b; color: #e9edef; } .chat.wa .msg.io b { color: #fff; }
.digita { align-self: flex-start; color: var(--muted); font-size: 15px; }
.chat-suggerimenti { display: flex; gap: 6px; padding: 0 12px 8px; overflow-x: auto; }
.chat-suggerimenti button { flex: none; border: 1px solid var(--panel-3); background: var(--panel); color: var(--text-2); border-radius: 999px; padding: 6px 12px; font: 600 14px Rajdhani; cursor: pointer; }
.chat-piede { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--panel-3); background: var(--panel); padding-bottom: max(10px, env(safe-area-inset-bottom)); }
.chat-piede textarea { flex: 1; resize: none; min-height: 48px; max-height: 120px; border-radius: 22px; border: 1px solid var(--panel-3); background: #0b1120; color: #fff; font: 500 17px Rajdhani; padding: 12px 14px; }
.chat-piede button { width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--cyan); color: #04121a; font-size: 22px; font-weight: 700; cursor: pointer; flex: none; }

/* voce */
.voce { position: fixed; inset: 0; z-index: 70; background: rgba(4,8,16,.94); display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 24px; text-align: center; }
.voce.aperta { display: flex; }
.voce img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 2px solid var(--cyan); box-shadow: 0 0 40px rgba(63,216,255,.4); }
.voce.parla img { animation: pulsa 1.2s var(--ease) infinite; }
@keyframes pulsa { 50% { box-shadow: 0 0 70px rgba(63,216,255,.8); } }
.voce .stato { font-size: 20px; color: var(--text-2); min-height: 1.5em; }

@media (min-width: 760px) {
  body { font-size: 19px; }
  .chips { grid-template-columns: repeat(3, 1fr); }
  .hero-cta { grid-template-columns: repeat(3, max-content); }
  .pb { grid-template-columns: repeat(2, 1fr); }
  .agenti { grid-template-columns: repeat(2, 1fr); }
  .numeri { grid-template-columns: repeat(4, 1fr); }
  .doppio { grid-template-columns: 1fr 1fr; }
  .luca { grid-template-columns: 1fr 320px; }
  .chat { inset: auto 20px 20px auto; width: 420px; height: min(720px, calc(100vh - 40px)); border: 1px solid var(--panel-3); border-radius: 18px; overflow: hidden; box-shadow: 0 10px 50px rgba(0,0,0,.6); }
}
@media (min-width: 1100px) { .agenti { grid-template-columns: repeat(3, 1fr); } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }