/*
 * Presentation page (templates/home.php). Self-contained: it does not load app.css.
 * Identity "Botta e risposta" (brand/a-botta-e-risposta): milk paper, ink and maize yellow, used as a ground and never as text;
 * Parkinsans headings; message-bubble corners as the
 * recurring shape. Every animation shows what the product does; with prefers-reduced-motion everything rests in
 * its final, readable state.
 */

@font-face {
    font-family: "Parkinsans"; /* SIL OFL: assets/fonts/LICENSE-parkinsans.txt */
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url("../fonts/parkinsans-latin-wght.woff2") format("woff2");
}

:root {
    --bg: #fffdf7;
    --bg-2: #f6f0e0;
    --card: #ffffff;
    --ink: #221e1a;
    --ink-2: #4a443c;
    --muted: #6b655c;
    --rule: #e9e2d0;
    --dark: #221e1a;
    --dark-deep: #15120f;
    --dark-rule: #453e35;
    --on-dark: #fffdf7;
    --on-dark-muted: #bdb4a5;
    --mais: #ffc83d;
    --mais-deep: #f2b41f;
    --burro: #fff1c9;
    --online: #37c871;
    --amber: #ffe9a8;

    --font-head: "Parkinsans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --text-xs: 0.8125rem;
    --text-sm: 0.875rem;
    --text-lg: 1.25rem;
    --text-display: clamp(2.75rem, 6.4vw + 0.5rem, 6.25rem);
    --text-section: clamp(2rem, 3vw + 1rem, 3.5rem);
    --text-lead: clamp(1.0625rem, 0.4vw + 1rem, 1.3125rem);

    --container: 1200px;
    --gutter: 32px;
    --gap: 20px;
    --section: 128px;
    --r-xl: 40px;
    --r-lg: 28px;
    --r-md: 18px;
    --r-sm: 12px;
    /* A message bubble: three round corners and the tail corner */
    --bubble: 18px 18px 18px 5px;
    --bubble-me: 18px 18px 5px 18px;
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
    --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --shadow: 0 1px 2px rgb(34 30 26 / 6%), 0 14px 32px -16px rgb(34 30 26 / 22%);
    --shadow-lg: 0 30px 60px -28px rgb(20 16 12 / 55%);
}

/* Base */

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 1rem/1.55 var(--font-body); -webkit-font-smoothing: antialiased; }
::selection { background: var(--mais); color: var(--ink); }
:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
a { color: inherit; text-underline-offset: 0.18em; }
h1, h2, h3, p, ul, dl, dd, figure, pre { margin: 0; }
ul { padding: 0; list-style: none; }
h1, h2, h3 { font-family: var(--font-head); font-weight: 700; text-wrap: balance; overflow-wrap: break-word; }
h1 { font-size: var(--text-display); line-height: 0.98; letter-spacing: -0.035em; }
h2 { max-width: 18ch; font-size: var(--text-section); line-height: 1.02; letter-spacing: -0.03em; }
h3 { font-size: 1.375rem; line-height: 1.15; letter-spacing: -0.015em; }
p { text-wrap: pretty; }
svg { display: block; }
button { font: inherit; }
[hidden] { display: none !important; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.lead { max-width: 54ch; color: var(--ink-2); font-size: var(--text-lead); line-height: 1.45; }
.eyebrow { display: inline-block; margin-bottom: 16px; padding: 5px 12px; border-radius: var(--bubble); background: var(--burro); color: var(--dark); font-size: var(--text-sm); font-weight: 600; }
.icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.skip { position: absolute; left: 16px; top: -96px; z-index: 500; padding: 8px 16px; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); }
.skip:focus-visible { top: 16px; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding-inline: 24px; border: 2px solid var(--ink); border-radius: 999px; background: var(--mais); color: var(--ink); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--spring); }
.btn:hover { background: var(--ink); color: var(--bg); transform: translateY(-2px); }
.btn:active { transform: none; }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }

.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; border-radius: var(--r-sm); }
.brand .logo { width: auto; height: 30px; }
.brand__mark { display: grid; place-items: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 12px 12px 12px 4px; background: var(--mais); color: var(--ink); }
.brand__mark .logo { width: 70%; height: auto; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0; border-radius: 50%; background: var(--burro); color: var(--dark); font-size: var(--text-xs); font-weight: 700; }
.dot { display: inline-block; width: 8px; height: 8px; flex-shrink: 0; margin-right: 6px; border-radius: 50%; background: var(--online); }
.tag { padding: 1px 7px; border-radius: 999px; background: var(--bg-2); color: var(--ink-2); font-size: 11px; font-weight: 600; }

/* Navigation: a floating bar */

.nav { position: fixed; inset-inline: 0; top: 14px; z-index: 300; pointer-events: none; }
.nav__bar { position: relative; display: flex; align-items: center; gap: 16px; width: auto; max-width: calc(var(--container) - 2 * var(--gutter)); min-height: 64px; margin-inline: max(var(--gutter) / 2, (100% - var(--container)) / 2 + var(--gutter)); padding: 8px 8px 8px 16px; border: 1px solid var(--rule); border-radius: 22px; background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); pointer-events: auto; transition: box-shadow 250ms var(--ease); }
.nav.is-scrolled .nav__bar { box-shadow: var(--shadow); }
.nav__brand { margin-right: auto; }
.nav__links { display: flex; align-items: center; gap: 2px; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 14px; border-radius: 14px; font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.nav__links a:hover { background: var(--burro); }
.nav__links .nav__action { margin-left: 8px; border-radius: 999px; background: var(--mais); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.nav__links .nav__action:hover { background: var(--ink); color: var(--bg); }
.nav__toggle { display: none; min-height: 44px; padding-inline: 16px; border: 0; border-radius: 14px; background: var(--burro); color: var(--ink); font-weight: 600; cursor: pointer; }

/* Hero: centred text on paper, then the example conversation on a green stage */

.hero { padding-block: 168px 96px; text-align: center; }
.hero__text { display: grid; gap: 24px; justify-items: center; }
.chip { display: inline-flex; align-items: center; padding: 6px 14px 6px 12px; border: 1px solid var(--rule); border-radius: 999px; background: var(--card); font-size: var(--text-sm); font-weight: 600; animation: fade-up 700ms var(--ease) backwards; }
.chip .dot { animation: pulse 2s ease-out infinite; }
.hero h1 { max-width: 13ch; animation: fade-up 800ms var(--ease) 80ms backwards; }
.hero mark { display: inline-block; padding: 0.02em 0.2em 0.08em; border-radius: 0.34em 0.34em 0.34em 0.08em; background: var(--mais); color: var(--ink); transform: rotate(-2deg); transform-origin: 0 100%; animation: pop 700ms var(--spring) 520ms backwards; }
.hero .lead { animation: fade-up 800ms var(--ease) 180ms backwards; }
.hero__actions { justify-content: center; animation: fade-up 800ms var(--ease) 260ms backwards; }
.hero__facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; color: var(--muted); font-size: var(--text-sm); animation: fade-up 800ms var(--ease) 340ms backwards; }
.hero__facts li { display: flex; align-items: center; gap: 6px; }
.hero__facts .icon { width: 16px; height: 16px; color: var(--dark); }
@keyframes fade-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes pop { from { opacity: 0; transform: rotate(-8deg) scale(0.4); } }
@keyframes pulse { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--online) 60%, transparent); } 70%, to { box-shadow: 0 0 0 8px transparent; } }

/* The example conversation: the visitor's widget on a site and the agent's panel on a phone, in step */

.duet { margin-top: 72px; padding: 40px 40px 20px; border-radius: var(--r-xl); background: var(--dark) radial-gradient(circle, rgb(255 253 247 / 12%) 1.2px, transparent 1.6px) 0 0 / 22px 22px; color: var(--on-dark); text-align: left; animation: fade-up 900ms var(--ease) 420ms backwards; }
.duet__stage { position: relative; max-width: 880px; height: 486px; margin-inline: auto; }
.duet__side { position: absolute; top: 0; padding: 4px 12px; border-radius: var(--bubble); background: var(--mais); color: var(--ink); font-size: var(--text-xs); font-weight: 600; }
.duet__side--v { left: 0; }
.duet__side--a { right: 0; border-radius: var(--bubble-me); }
.site { position: absolute; left: 0; bottom: 0; width: calc(100% - 276px); height: 440px; overflow: hidden; border-radius: var(--r-md); background: var(--card); color: var(--ink); box-shadow: var(--shadow-lg); }
.site__bar { display: flex; align-items: center; gap: 6px; height: 36px; padding-inline: 12px; background: var(--bg-2); }
.site__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); }
.site__bar span { margin-left: 8px; padding: 2px 12px; border-radius: 999px; background: var(--card); color: var(--muted); font-size: 11px; }
.site__page { display: grid; gap: 12px; align-content: start; padding: 24px; padding-right: 300px; }
.site__page b, .site__page i, .site__page u { display: block; border-radius: 6px; background: var(--bg-2); }
.site__page b { width: 60%; height: 22px; background: var(--burro); }
.site__page i { height: 10px; }
.site__page i:nth-of-type(2) { width: 82%; } .site__page i:nth-of-type(3) { width: 58%; }
.site__page div { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 12px; }
.site__page u { height: 120px; background: var(--bg); }
.site__page u:nth-child(3) { display: none; }

.wgt, .phone { display: flex; flex-direction: column; font-size: 13px; line-height: 1.35; }
.wgt { position: absolute; right: 16px; bottom: 16px; width: 266px; height: 364px; overflow: hidden; border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--rule); }
.wgt__head { display: grid; gap: 1px; padding: 12px 16px; background: var(--dark); color: var(--on-dark); }
.wgt__head span { display: flex; align-items: center; font-size: 11px; color: var(--on-dark-muted); }
.wgt__log, .phone__log { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 12px; overflow: hidden; }
.wgt__log > :first-child, .phone__log > :first-child { margin-top: auto; }
.msg { max-width: 86%; padding: 8px 12px; border-radius: var(--bubble); transform-origin: 0 100%; animation: msg-in 380ms var(--spring) both; }
.msg--them { align-self: flex-start; background: var(--bg-2); }
.msg--me { align-self: flex-end; border-radius: var(--bubble-me); background: var(--dark); color: var(--on-dark); transform-origin: 100% 100%; }
.wgt__typing { display: flex; align-items: center; gap: 6px; padding: 0 12px 6px; color: var(--muted); font-size: 11px; }
.dots { display: inline-flex; gap: 3px; }
.dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--dark); animation: chat-dot 900ms ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 150ms; } .dots i:nth-child(3) { animation-delay: 300ms; }
.composer { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 6px 6px 12px; border-top: 1px solid var(--rule); }
.composer__text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; }
.composer__text:empty::before { content: attr(data-placeholder); color: var(--muted); }
.composer__text:not(:empty)::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: text-bottom; background: var(--dark); animation: blink 900ms steps(1) infinite; }
.composer__send { display: grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 10px 10px 4px 10px; background: var(--burro); color: var(--dark); transition: background-color 200ms var(--ease), transform 300ms var(--spring); }
.composer__send svg { width: 15px; height: 15px; }
.composer:has(.composer__text:not(:empty)) .composer__send { background: var(--mais); transform: scale(1.08); }
@keyframes msg-in { from { opacity: 0; transform: translateY(10px) scale(0.6); } }
@keyframes chat-dot { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes blink { 50% { opacity: 0; } }

.phone { position: absolute; right: 0; bottom: 0; width: 240px; height: 440px; overflow: hidden; border: 7px solid var(--dark-deep); border-radius: 36px; background: var(--bg); color: var(--ink); box-shadow: var(--shadow-lg), 0 0 0 1.5px var(--mais); }
.phone__head { display: flex; align-items: center; gap: 8px; padding: 16px 12px 12px; background: var(--card); border-bottom: 1px solid var(--rule); }
.phone__head p { display: grid; flex: 1; min-width: 0; }
.phone__head p strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.phone__head p span { display: flex; align-items: center; overflow: hidden; color: var(--muted); font-size: 10.5px; white-space: nowrap; }
.phone .msg--them { background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
.phone .msg--me { background: var(--mais); color: var(--ink); }
.phone .composer { background: var(--card); }
.phone__push { position: absolute; inset: 6px 6px auto; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 18px; background: var(--dark-deep); color: var(--on-dark); font-size: 11.5px; opacity: 0; transform: translateY(-130%); transition: transform 520ms var(--spring), opacity 300ms var(--ease); }
.phone__push.is-on { opacity: 1; transform: none; }
.phone__push .brand__mark, .v-push .brand__mark { width: 26px; height: 26px; border-radius: 9px 9px 9px 3px; background: var(--mais); color: var(--ink); }
.phone__push p, .v-push__note p { display: grid; min-width: 0; }
.phone__push p span, .v-push__note p span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 0.8; }
.duet__caption { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 880px; margin: 20px auto 0; color: var(--on-dark-muted); font-size: var(--text-xs); }
.duet__toggle { min-height: 36px; padding: 0 14px; border: 1px solid var(--dark-rule); border-radius: 12px; background: transparent; color: var(--on-dark); font-size: var(--text-xs); font-weight: 600; cursor: pointer; transition: border-color 200ms var(--ease); }
.duet__toggle:hover { border-color: var(--mais); }
.duet :focus-visible, .install__ai :focus-visible, .footer :focus-visible { outline-color: var(--mais); }

/* Installation: the snippet types itself, the status check answers, the launcher appears on the site */

.install { padding-block: var(--section); background: var(--bg-2); }
.install__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: center; }
.install__text { display: grid; gap: 24px; }
.facts { display: grid; gap: 10px; color: var(--ink-2); }
.facts li { display: flex; align-items: flex-start; gap: 12px; }
.facts .icon { width: 22px; height: 22px; margin-top: 1px; padding: 4px; border-radius: 50%; background: var(--mais); color: var(--ink); }
.install__demo { position: relative; padding-bottom: 138px; }
.code { border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 8px; background: var(--dark-deep); color: var(--on-dark); box-shadow: var(--shadow-lg); font: var(--text-sm)/1.7 var(--font-mono); }
.code__bar { display: flex; align-items: center; gap: 6px; padding: 14px 20px; border-bottom: 1px solid var(--dark-rule); }
.code__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--dark-rule); }
.code__bar span { margin-left: 8px; color: var(--on-dark-muted); font-size: var(--text-xs); }
.code__body { padding: 16px 24px 8px; font: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.code__body code { font: inherit; }
.code__check { margin: 0 24px; padding-block: 12px 24px; border-top: 1px dashed var(--dark-rule); overflow-wrap: anywhere; transition: opacity 420ms var(--ease); }
.c-dim { color: color-mix(in srgb, var(--on-dark-muted) 70%, transparent); }
.c-tag { color: var(--mais); } .c-attr { color: var(--amber); } .c-str { color: #f4c9a0; } .c-ok { color: var(--mais); }
.c-caret { display: none; width: 2px; height: 1.15em; margin-left: 1px; vertical-align: text-bottom; background: var(--mais); animation: blink 900ms steps(1) infinite; }
.install__demo.is-typing .c-caret { display: inline-block; }
.install__site { position: absolute; right: 24px; bottom: 0; width: min(300px, 72%); height: 150px; overflow: hidden; border-radius: var(--r-md); background: var(--card); box-shadow: var(--shadow), 0 0 0 1px var(--rule); }
.install__site .site__page { padding: 16px; }
.launcher .logo { width: 30px; height: auto; }
.launcher { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 16px 16px 5px 16px; background: var(--mais); color: var(--ink); transition: transform 650ms var(--spring), opacity 200ms; }
.launcher::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--mais-deep); animation: ping 2.4s var(--ease) infinite; }
.js .install__demo:not(.is-done) .launcher { opacity: 0; transform: scale(0.2) rotate(-30deg); }
.js .install__demo:not(.is-done) .code__check { opacity: 0; }
@keyframes ping { from { opacity: 0.7; transform: none; } 70%, to { opacity: 0; transform: scale(1.8); } }
.install__ai { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; gap: 16px 40px; align-items: center; padding: 32px 40px; border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 8px; background: var(--dark); color: var(--on-dark); }
.install__ai p { color: var(--on-dark-muted); }
.link { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 14px; border: 1px solid var(--dark-rule); border-radius: 12px; font: var(--text-sm) var(--font-mono); text-decoration: none; transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease); }
.link:hover { background: var(--mais); border-color: var(--mais); color: var(--ink); }

/* Features: a bento of six cards, each with a small looping vignette */

.features { padding-block: var(--section); }
.head { display: grid; gap: 16px; margin-bottom: 56px; }
.head--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; gap: 32px; }
.cards { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
.card { --vig: var(--bg); grid-column: span 6; display: grid; gap: 10px; align-content: start; padding: 12px 12px 28px; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--card); transition: transform 350ms var(--spring), opacity 420ms var(--ease); }
.card:hover { transform: translateY(-4px); }
.card--wide { grid-column: span 7; }
.card--dark, .card--burro { grid-column: span 5; }
.card--dark { --vig: var(--dark-deep); border-color: var(--dark); background: var(--dark); color: var(--on-dark); }
.card--burro { --vig: color-mix(in srgb, var(--card) 55%, var(--burro)); border-color: var(--burro); background: var(--burro); }
.card--mais { --vig: var(--mais-deep); border-color: var(--mais); background: var(--mais); }
.card h3, .card p { padding-inline: 16px; }
.card p { color: var(--ink-2); }
.card--dark p { color: var(--on-dark-muted); }
.card--mais p { color: var(--ink); }
.vig { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; height: 210px; margin-bottom: 14px; overflow: hidden; border-radius: var(--r-md); background: var(--vig); color: var(--ink); font-size: 13px; line-height: 1.35; }
.vig svg { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

.v-lang { flex-direction: column; }
.v-lang__chips, .v-lang__agents { display: flex; gap: 8px; }
.v-lang__chips span { display: grid; place-items: center; min-width: 44px; height: 32px; border-radius: var(--bubble); background: var(--card); box-shadow: 0 0 0 1px var(--rule); font-size: 12px; font-weight: 700; animation: lang-on 10s infinite; animation-delay: calc(var(--n) * 2s); }
.v-lang__agents .avatar { width: 40px; height: 40px; background: var(--card); box-shadow: 0 0 0 1px var(--rule); }
.v-lang__agents .avatar:nth-child(1) { animation: agent-g 10s infinite; }
.v-lang__agents .avatar:nth-child(2) { animation: agent-c 10s infinite; }
.v-lang__agents .avatar:nth-child(3) { animation: agent-l 10s infinite; }
@keyframes lang-on { 0%, 18% { background: var(--dark); color: var(--mais); transform: translateY(-4px); } 20%, 100% { background: var(--card); color: inherit; transform: none; } }
@keyframes agent-g { 0%, 38% { background: var(--mais); transform: scale(1.15); } 40%, 100% { background: var(--card); transform: none; } }
@keyframes agent-c { 0%, 39%, 60%, 79% { background: var(--card); transform: none; } 40%, 58%, 80%, 98% { background: var(--mais); transform: scale(1.15); } }
@keyframes agent-l { 0%, 59%, 80%, 100% { background: var(--card); transform: none; } 60%, 78% { background: var(--mais); transform: scale(1.15); } }

.v-push { align-items: flex-end; }
.v-push__phone { width: 220px; height: 160px; padding: 12px 8px; border: 6px solid #0c0a08; border-bottom: 0; border-radius: 30px 30px 0 0; background: var(--dark); }
.v-push__note { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 16px; background: var(--card); font-size: 11.5px; animation: note-in 6s var(--ease) infinite; }
@keyframes note-in { 0% { opacity: 0; transform: translateY(-140%); } 10%, 82% { opacity: 1; transform: none; } 92%, 100% { opacity: 0; transform: translateY(-20%); } }

.v-mail .msg { align-self: center; animation: none; }
.v-mail__line { position: relative; width: 72px; border-top: 2px dashed var(--rule); }
.v-mail__line i { position: absolute; top: -5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--dark); animation: mail-go 3.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }
.v-mail__env { display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--bubble); background: var(--mais); animation: mail-pop 3.2s var(--ease) infinite; }
.v-mail__env svg { stroke: var(--ink); }
@keyframes mail-go { 0% { opacity: 0; transform: none; } 15% { opacity: 1; } 60% { opacity: 1; transform: translateX(66px); } 70%, 100% { opacity: 0; transform: translateX(66px); } }
@keyframes mail-pop { 0%, 58%, 100% { transform: none; } 68% { transform: scale(1.16) rotate(-4deg); } }

.v-map__land { position: absolute; inset: 16px; background: color-mix(in srgb, var(--dark) 30%, transparent); -webkit-mask: url(../img/world.svg) 0 0 / 100% 100% no-repeat; mask: url(../img/world.svg) 0 0 / 100% 100% no-repeat; }
.v-map > i { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: var(--dark); box-shadow: 0 0 0 2px var(--mais); }
.v-map > i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--dark); animation: pin 2.8s var(--ease) infinite; animation-delay: calc(var(--n) * 400ms); }
@keyframes pin { from { opacity: 0.55; transform: none; } 70%, to { opacity: 0; transform: scale(4.5); } }

.v-canned { flex-direction: column; align-items: stretch; gap: 8px; padding-inline: 12%; }
.v-canned span { padding: 9px 14px; overflow: hidden; border-radius: var(--bubble-me); background: var(--card); box-shadow: 0 0 0 1px var(--rule); white-space: nowrap; text-overflow: ellipsis; animation: canned-on 6s infinite; animation-delay: calc(var(--n) * 2s); }
@keyframes canned-on { 0%, 30% { background: var(--dark); color: var(--on-dark); transform: translateX(8px); } 33%, 100% { background: var(--card); color: inherit; transform: none; } }

.v-team .avatar { width: 46px; height: 46px; background: var(--card); font-size: var(--text-sm); }
.v-team__track { position: relative; width: 170px; height: 34px; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.v-team__chat { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 5px; height: 30px; padding-inline: 10px; border-radius: var(--bubble); background: var(--dark); color: var(--on-dark); font-size: 11.5px; white-space: nowrap; animation: pass 5s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate; }
.v-team__chat svg { width: 14px; height: 14px; stroke: var(--mais); }
@keyframes pass { 0%, 25% { left: 0; transform: none; } 75%, 100% { left: 100%; transform: translateX(-100%); } }

/* Privacy: a plain list, one line per promise */

.trust { padding-block: 0 var(--section); }
.trust__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 64px; align-items: start; }
.trust__grid > div:first-child { position: sticky; top: 128px; }
.trust dl { display: grid; }
.trust dl > div { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 4px 16px; padding-block: 24px; border-top: 1px solid var(--rule); }
.trust dl > div:last-child { border-bottom: 1px solid var(--rule); }
.trust dl > div::before { content: ""; grid-row: span 2; width: 36px; height: 36px; border-radius: 12px 12px 12px 4px; background: var(--mais) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23221e1a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 18px no-repeat; }
.trust dt { font: 700 var(--text-lg)/1.2 var(--font-head); letter-spacing: -0.015em; }
.trust dd { grid-column: 2; color: var(--ink-2); }

/* Call to action and footer */

.cta { padding-bottom: var(--section); }
.cta-band { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; padding: 72px 64px; border-radius: var(--r-xl) var(--r-xl) var(--r-xl) 10px; background: var(--mais); }
.cta-band h2 { max-width: 14ch; font-size: clamp(2.25rem, 4vw + 1rem, 4.5rem); }
.cta-band p { max-width: 40ch; margin-top: 16px; font-size: var(--text-lead); }
.cta-band__actions { display: grid; gap: 12px; justify-items: start; }
.cta-band .btn { background: var(--ink); color: var(--bg); }
.cta-band .btn:hover { background: var(--card); color: var(--ink); }
.cta-band__link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration-thickness: 2px; }
.footer { background: var(--dark); color: var(--on-dark); }
.footer__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 64px; padding-block: 56px; }
.footer__about { display: grid; gap: 12px; }
.footer .brand .logo { height: 40px; }
.footer__about p:last-child { max-width: 46ch; color: var(--on-dark-muted); }
.footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer__links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; transition: color 200ms var(--ease); }
.footer__links a:hover { color: var(--mais); }

/* One entrance: blocks appear once, when they scroll into view */

.js [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(20px) scale(0.98); }
[data-reveal] { transition: opacity 420ms var(--ease), transform 600ms var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }

/* Narrower screens */

@media (max-width: 62rem) {
    :root { --gutter: 24px; --section: 88px; }
    .install__grid, .install__ai, .head--split, .cta-band, .trust__grid { grid-template-columns: minmax(0, 1fr); }
    .install__grid { gap: 48px; }
    .install__text { order: -1; }
    .trust__grid > div:first-child { position: static; }
    .card, .card--wide, .card--dark, .card--burro { grid-column: span 6; }
    .cta-band { padding: 48px 32px; }
    .duet { padding: 24px 24px 16px; }
    .site__page { padding-right: 24px; }
}
@media (max-width: 52rem) {
    .nav__toggle { display: inline-flex; align-items: center; }
    .js .nav__links:not(.is-open) { display: none; }
    .nav__links { position: absolute; top: calc(100% + 8px); left: 0; right: 0; display: grid; gap: 2px; padding: 8px; border: 1px solid var(--rule); border-radius: 22px; background: var(--card); box-shadow: var(--shadow); }
    .nav__links a { min-height: 48px; font-size: 1rem; }
    .nav__links .nav__action { margin: 4px 0 0; justify-content: center; }
    .card, .card--wide, .card--dark, .card--burro { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
    :root { --gutter: 16px; --section: 72px; --r-xl: 28px; }
    .hero { padding-block: 128px 64px; }
    .btn { white-space: normal; text-align: center; }
    .hero__actions .btn { flex: 1 1 100%; }
    /* The site around the widget goes away: widget and phone stand side by side, each under its label */
    .duet { margin-top: 48px; padding: 16px 12px; }
    .duet__stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; height: auto; }
    .duet__side, .site, .wgt { position: static; width: auto; }
    .duet__side { justify-self: start; font-size: 11px; }
    .duet__side--a { justify-self: end; }
    .site { height: auto; overflow: visible; background: none; box-shadow: none; }
    .site > .site__bar, .site > .site__page { display: none; }
    .wgt, .phone { height: 380px; font-size: 12px; }
    .phone { position: relative; width: auto; border-width: 5px; border-radius: 26px; }
    .install__ai { padding: 24px; }
    .code__body, .code__check { font-size: var(--text-xs); }
    .code__body { padding-inline: 16px; } .code__check { margin-inline: 16px; }
    .cta-band { padding: 40px 24px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .js [data-reveal]:not(.is-in) { opacity: 1; transform: none; }
}