/* ============================================================
   Lio — Landing page styles (extends site.css)
   ============================================================ */

/* ── Lio face (animated SVG) ───────────────────────── */
.lio-face { display: inline-block; line-height: 0; color: var(--blue-500); }
.lio-face svg { width: 100%; height: 100%; display: block; overflow: visible; }
.lio-ink { transition: filter 450ms ease-out; }
.lio-stroke { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.lio-eye { fill: currentColor; transform-box: fill-box; transform-origin: center; animation: lio-blink 5.4s infinite; }
.lio-eye--r { animation-delay: 60ms; }
.lio-mouth--happy { opacity: 0; transition: opacity 280ms ease-out; }
.lio-mouth--rest  { opacity: 1; transition: opacity 280ms ease-out; }

.lio-float { animation: lio-float 6.5s ease-in-out infinite; transform-origin: 50% 60%; }

.lio-face:hover .lio-mouth--happy,
.lio-face.is-happy .lio-mouth--happy { opacity: 1; }
.lio-face:hover .lio-mouth--rest,
.lio-face.is-happy .lio-mouth--rest { opacity: 0; }
.lio-face.is-happy .lio-ink { filter: drop-shadow(0 0 9px rgba(0, 119, 253, 0.5)); }

@keyframes lio-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%, 96% { transform: scaleY(0.1); }
}
@keyframes lio-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3.5px); }
}
@media (prefers-reduced-motion: reduce) {
  .lio-eye, .lio-float { animation: none; }
}

/* ── Lio nav logo ──────────────────────────────────── */
.lio-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.lio-logo .lio-face { width: 30px; height: 31px; }
.lio-logo__wm { display: flex; align-items: baseline; gap: 7px; }
.lio-logo__name { font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--blue-500); line-height: 1; }
.lio-logo__by { font-family: var(--font-body); font-size: 12.5px; font-weight: 500; color: var(--n-400); letter-spacing: 0.01em; }
.nav--on-dark:not(.is-scrolled) .lio-logo__by { color: rgba(255,255,255,0.55); }

/* ── HERO ──────────────────────────────────────────── */
.lio-hero { position: relative; padding: calc(var(--nav-h) + 84px) 0 104px; overflow: hidden; }
.lio-hero__bg {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 540px at 78% 22%, rgba(0,119,253,0.08), transparent 62%),
    radial-gradient(680px 420px at 12% 92%, rgba(0,119,253,0.05), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M.5 40V.5H40' fill='none' stroke='rgba(0%2C0%2C0%2C0.05)'/%3E%3C/svg%3E") top left / 40px 40px repeat;
}
.lio-hero__grid { position: relative; display: grid; grid-template-columns: 1.04fr 0.96fr; gap: 60px; align-items: center; }
.lio-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--blue-600);
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: var(--r-pill); padding: 7px 14px 7px 11px;
}
.lio-badge .lio-face { width: 18px; height: 19px; }
.lio-hero h1 { margin-top: 26px; }
.lio-hero h1 em { font-style: normal; color: var(--blue-500); }
.lio-hero .lede { margin-top: 22px; max-width: 50ch; }
.lio-hero .btn-row { margin-top: 34px; }
.lio-hero .micro { margin-top: 18px; display: flex; align-items: center; gap: 8px; }
.lio-hero .micro b { color: var(--n-700); font-weight: 600; }

/* working card */
.workcard {
  background: #fff; border: 1px solid var(--n-200); border-radius: var(--r-xl);
  box-shadow: 0 1px 2px rgba(13,16,24,0.04), 0 34px 64px -34px rgba(13,16,24,0.22);
  padding: 22px 22px 20px; position: relative;
}
.workcard__top { display: flex; align-items: center; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid var(--n-100); }
.workcard__avatar {
  width: 56px; height: 56px; flex: none; border-radius: 16px;
  background: var(--blue-50); border: 1px solid var(--blue-100);
  display: grid; place-items: center; padding: 9px;
}
.workcard__avatar .lio-face { width: 100%; height: 100%; }
.workcard__who { display: flex; flex-direction: column; gap: 3px; }
.workcard__who small { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--n-400); }
.workcard__who strong { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--n-950); letter-spacing: -0.01em; }
.workcard__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--green); }
.workcard__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: lio-pulse 2.2s infinite; }
@keyframes lio-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

.workcard__rows { display: flex; flex-direction: column; padding: 6px 0 0; }
.wrow {
  display: flex; align-items: center; gap: 12px; padding: 12px 2px;
  border-bottom: 1px solid var(--n-100); font-size: 14px;
  opacity: 0; transform: translateY(6px); transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.wrow.is-on { opacity: 1; transform: none; }
.wrow:last-child { border-bottom: none; }
.wrow__label { color: var(--n-600); }
.wrow__val { margin-left: auto; font-weight: 600; color: var(--n-900); display: inline-flex; align-items: center; gap: 8px; }
.wrow__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }

.workcard__say {
  margin-top: 16px; display: flex; align-items: center; gap: 10px;
  background: var(--blue-50); border: 1px solid var(--blue-100);
  border-radius: 14px; padding: 11px 14px; font-size: 13.5px; color: var(--blue-700);
  opacity: 0; transform: translateY(6px); transition: opacity 420ms ease-out, transform 420ms ease-out;
}
.workcard__say.is-on { opacity: 1; transform: none; }
.workcard__say svg { flex: none; color: var(--blue-500); }

/* ── Social proof: logos + metrics ─────────────────── */
.proof { padding: 60px 0 92px; }
.proof__head { text-align: center; max-width: 720px; margin: 0 auto; }
.proof__title { font-family: var(--font-display); font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -0.02em; color: var(--n-700); line-height: 1.3; }
.proof__counts { display: inline-flex; flex-direction: row; align-items: center; gap: 18px; margin-top: 18px; flex-wrap: wrap; justify-content: center; }
.proof__count { font-size: 15px; color: var(--n-600); }
.proof__count b { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--blue-600); letter-spacing: -0.01em; }
.proof__count-sep { width: 1px; height: 18px; background: var(--n-300); display: block; }

.logos { margin: 40px 0 4px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
.logos__track { display: flex; align-items: center; gap: 64px; width: max-content; animation: logos-scroll 52s linear infinite; }
.logos:hover .logos__track { animation-duration: 120s; }
@keyframes logos-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.logos__track img { height: 38px; width: auto; flex: none; object-fit: contain; opacity: 0.55; filter: grayscale(1); transition: opacity 200ms ease-out; -webkit-user-drag: none; user-select: none; pointer-events: none; }
.logos:hover .logos__track img { opacity: 0.78; }
@media (prefers-reduced-motion: reduce) { .logos__track { animation: none; flex-wrap: wrap; justify-content: center; row-gap: 28px; } }

.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 40px; }
.metric { text-align: center; padding: 28px 32px; }
.metric + .metric { border-left: 1px solid var(--n-150); }
.metric__icon { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 18px; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-500); display: grid; place-items: center; }
.metric__n { font-family: var(--font-display); font-size: clamp(42px, 5vw, 58px); font-weight: 700; letter-spacing: -0.03em; color: var(--n-950); line-height: 1; }
.metric__l { margin: 12px auto 0; font-size: 14px; color: var(--n-600); line-height: 1.5; max-width: 26ch; }
@media (max-width: 760px) { .metrics { grid-template-columns: 1fr; } .metric + .metric { border-left: none; border-top: 1px solid var(--n-150); } }
#come-funziona { padding-top: 60px; }

/* ── Frameworks / trust strip (legacy, unused) ─────── */
.lio-mini { padding: 0 0 8px; }
.lio-mini__inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; padding: 30px 0; border-top: 1px solid var(--n-200); border-bottom: 1px solid var(--n-200); }
.lio-mini__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--n-400); }
.lio-mini__item { font-size: 14px; color: var(--n-600); font-weight: 500; }
.lio-mini__sep { width: 4px; height: 4px; border-radius: 50%; background: var(--n-300); }

/* ── Flow (come funziona) ──────────────────────────── */
.flow {
  display: grid; grid-template-columns: auto auto 1fr; gap: 28px; align-items: center;
  background: var(--n-50); border: 1px solid var(--n-200); border-radius: var(--r-xl);
  padding: 36px 40px; margin-top: 56px;
}
.flow__node {
  display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
}
.flow__chip {
  background: #fff; border: 1px solid var(--n-200); border-radius: 14px;
  width: 88px; height: 88px; display: grid; place-items: center; color: var(--blue-500);
}
.flow__chip svg { width: 30px; height: 30px; }
.flow__node span { font-size: 12.5px; font-weight: 600; color: var(--n-700); }
.flow__lio {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 0 4px;
}
.flow__lio-face { width: 92px; height: 95px; background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: 22px; display: grid; place-items: center; padding: 14px; }
.flow__lio-face .lio-face { width: 100%; height: 100%; }
.flow__lio span { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--blue-600); }
.flow__arrow { color: var(--n-300); display: grid; place-items: center; }
.flow__outs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.flow__out {
  display: flex; align-items: center; gap: 10px; background: #fff;
  border: 1px solid var(--n-200); border-radius: 12px; padding: 13px 15px;
  font-size: 13.5px; font-weight: 600; color: var(--n-800);
}
.flow__out i { width: 8px; height: 8px; border-radius: 3px; background: var(--blue-400); flex: none; }
.flow__out:nth-child(2) i { background: var(--green); }
.flow__out:nth-child(3) i { background: var(--amber); }
.flow__out:nth-child(4) i { background: #8B5CF6; }

/* ── Steps (come funziona detail) ──────────────────── */
.lio-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.lio-step { position: relative; }
.lio-step__n {
  width: 40px; height: 40px; border-radius: 12px; background: var(--blue-50);
  border: 1px solid var(--blue-100); color: var(--blue-600);
  display: grid; place-items: center; font-family: var(--font-mono); font-weight: 500; font-size: 14px;
  margin-bottom: 18px;
}
.lio-step h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--n-950); }
.lio-step p { margin: 9px 0 0; font-size: 14px; line-height: 1.6; color: var(--n-600); }

/* ── Capability cards ──────────────────────────────── */
.cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.cap { background: #fff; border: 1px solid var(--n-200); border-radius: var(--r-lg); padding: 28px; transition: border-color 140ms ease-out, box-shadow 140ms ease-out, transform 140ms ease-out; }
.cap:hover { border-color: var(--blue-200); box-shadow: 0 14px 34px -18px rgba(0,119,253,0.22); transform: translateY(-2px); }
.cap__icon { width: 46px; height: 46px; border-radius: 13px; background: var(--blue-50); border: 1px solid var(--blue-100); color: var(--blue-500); display: grid; place-items: center; margin-bottom: 18px; }
.cap h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--n-950); }
.cap p { margin: 9px 0 0; font-size: 14px; line-height: 1.6; color: var(--n-600); }

/* ── Comparison (time-to-assessment) ──────────────── */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.cmp__col { border-radius: var(--r-lg); padding: 30px; border: 1px solid var(--n-200); background: #fff; }
.cmp__col--without { background: var(--n-50); }
.cmp__col--with { background: var(--blue-50); border-color: var(--blue-100); box-shadow: 0 18px 44px -26px rgba(0,119,253,0.28); }
.cmp__tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.cmp__col--without .cmp__tag { color: var(--n-500); }
.cmp__col--with .cmp__tag { color: var(--blue-600); }
.cmp__col--with .cmp__tag .lio-face { width: 18px; height: 19px; }
.cmp ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cmp li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; line-height: 1.5; }
.cmp__col--without li { color: var(--n-600); }
.cmp__col--with li { color: var(--n-800); font-weight: 500; }
.cmp li svg { flex: none; margin-top: 2px; }

/* ── "Non è una chat" — assistant panel ───────────── */
.notchat { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.notchat__points { display: flex; flex-direction: column; gap: 6px; margin-top: 34px; }
.npoint { padding: 20px 0; border-top: 1px solid var(--n-200); }
.npoint:last-child { border-bottom: 1px solid var(--n-200); }
.npoint h3 { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; color: var(--n-950); }
.npoint p { margin: 6px 0 0; font-size: 14.5px; color: var(--n-600); line-height: 1.55; }

.chatpanel { background: #fff; border: 1px solid var(--n-200); border-radius: var(--r-xl); padding: 24px; box-shadow: 0 30px 60px -34px rgba(13,16,24,0.2); }
.chatpanel__head { display: flex; align-items: center; gap: 13px; padding-bottom: 18px; border-bottom: 1px solid var(--n-100); margin-bottom: 18px; }
.chatpanel__avatar { width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--blue-50); border: 1px solid var(--blue-100); display: grid; place-items: center; padding: 8px; }
.chatpanel__avatar .lio-face { width: 100%; height: 100%; }
.chatpanel__head strong { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--n-950); display: block; }
.chatpanel__head small { font-size: 12.5px; color: var(--n-500); }
.chatline { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 13px; background: var(--n-50); font-size: 14px; color: var(--n-800); margin-bottom: 10px; }
.chatline svg { flex: none; }
.chatline--done { background: #ECFDF5; color: #047857; }
.chatline--ask { background: var(--blue-50); color: var(--blue-700); font-weight: 600; }
.chatline--ask .btn { margin-left: auto; }

/* ── Benefits ──────────────────────────────────────── */
.ben-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ben { padding: 4px; }
.ben strong { font-family: var(--font-display); font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--n-950); display: block; }
.ben p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--n-600); }
.ben__bar { width: 38px; height: 3px; border-radius: 2px; background: var(--blue-500); margin-bottom: 18px; }

/* ── Pricing ───────────────────────────────────────── */
.price { max-width: 560px; margin: 0 auto; text-align: center; background: #fff; border: 1px solid var(--n-200); border-radius: var(--r-xl); padding: 40px 36px; position: relative; overflow: hidden; box-shadow: 0 24px 50px -30px rgba(13,16,24,0.18); }
.price__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 300px at 50% -10%, rgba(0,119,253,0.08), transparent 60%); }
.price__face { width: 54px; height: 56px; margin: 0 auto 16px; }
.price__amount { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.03em; color: var(--n-950); line-height: 1; }
.price__amount span { font-size: clamp(42px, 6vw, 60px); }
.price__amount sub { font-size: 17px; font-weight: 500; color: var(--n-500); vertical-align: baseline; }
.price__sub { margin: 12px auto 0; font-size: 14.5px; color: var(--n-600); max-width: 40ch; line-height: 1.55; }
.price .btn-row { justify-content: center; margin-top: 22px; }

/* ── Final CTA face ────────────────────────────────── */
.lio-cta__face { width: 84px; height: 86px; margin: 0 auto 26px; }
.lio-cta__face .lio-face { color: #fff; }
.cta-band .lio-say { margin-top: 28px; font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--blue-200); font-style: italic; }

/* ── Footer 3-col variant ──────────────────────────── */
.footer__grid--3 { grid-template-columns: 1.8fr 1fr 1fr; }
@media (max-width: 1024px) { .footer__grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px)  { .footer__grid--3 { grid-template-columns: 1fr; } }

/* ── Footer 2-col variant (landing) ────────────────── */
.footer__grid--2 { grid-template-columns: 1.5fr 1fr; }
@media (max-width: 640px) { .footer__grid--2 { grid-template-columns: 1fr; gap: 32px; } }

/* ── Sticky CTA bar ─────────────────────────────────── */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  transform: translateY(120%); transition: transform 320ms ease-out;
  padding: 0 20px; display: flex; justify-content: center;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__inner {
  width: 100%; max-width: 1180px; display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--n-200); border-bottom: none;
  box-shadow: 0 -10px 34px rgba(13,16,24,0.14);
  border-radius: 16px 16px 0 0; padding: 14px 22px;
}
.sticky-cta__face { width: 30px; height: 31px; flex: none; }
.sticky-cta__text { font-size: 14.5px; font-weight: 600; color: var(--n-800); flex: 1; }
@media (max-width: 640px) {
  .sticky-cta { padding: 0; }
  .sticky-cta__inner { border-radius: 0; padding: 12px 16px; }
  .sticky-cta__text { font-size: 13px; }
}

/* ── Framework section outer grid ─────────────────── */
.lio-framework-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: start; }
@media (max-width: 980px) { .lio-framework-grid { grid-template-columns: 1fr; gap: 48px; } }

/* ── Framework cards inner grid ───────────────────── */
.lio-fw-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .lio-fw-cards { grid-template-columns: 1fr; } }

/* ── Dashboard callout grid ────────────────────────── */
.lio-dashboard-callout { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
@media (max-width: 980px) { .lio-dashboard-callout { grid-template-columns: 1fr; gap: 32px; } }

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 980px) {
  .lio-hero__grid { grid-template-columns: 1fr; gap: 48px; }
  .cap-grid { grid-template-columns: 1fr 1fr; }
  .lio-steps { grid-template-columns: 1fr 1fr; gap: 28px; }
  .notchat { grid-template-columns: 1fr; gap: 40px; }
  .ben-grid { grid-template-columns: 1fr; gap: 28px; }
  .flow { grid-template-columns: 1fr; gap: 24px; justify-items: center; text-align: center; }
  .flow__arrow { transform: rotate(90deg); }
  .flow__outs { grid-template-columns: 1fr 1fr; width: 100%; }
}
@media (max-width: 620px) {
  .cap-grid { grid-template-columns: 1fr; }
  .lio-steps { grid-template-columns: 1fr; }
  .cmp { grid-template-columns: 1fr; }
  .flow__outs { grid-template-columns: 1fr; }
  .price { padding: 32px 24px; }
}