/* ===========================================================
   Lazolingo — header, footer, hero, page sections
   =========================================================== */

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: oklch(0.987 0.004 85 / 0.82);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent; transition: border-color .2s, box-shadow .2s, background .2s;
}
.site-header.scrolled { border-bottom-color: var(--border); box-shadow: 0 1px 0 oklch(0.9 0.01 235 / .5); }
.header-row { display: flex; align-items: center; gap: var(--s4); height: 74px; }
.desktop-nav { display: flex; align-items: center; gap: 4px; margin-inline-start: var(--s4); }
.navlink {
  font-weight: 600; font-size: 15px; color: var(--ink-soft); padding: 9px 13px; border-radius: 8px;
  text-decoration: none; transition: color .15s, background .15s; white-space: nowrap;
}
.navlink:hover { color: var(--primary-deep); background: var(--primary-tint); text-decoration: none; }
.navlink.active { color: var(--primary-deep); background: var(--primary-tint); }
.header-actions { display: flex; align-items: center; gap: var(--s3); margin-inline-start: auto; }
.header-cta { padding: 11px 18px; font-size: 15px; }
.menu-btn { display: none; background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); }

.mobile-menu { position: sticky; top: 74px; z-index: 49; background: var(--surface); border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-md); animation: slideDown .2s ease; }
.mobile-menu .wrap { padding-block: var(--s3) var(--s5); }
.mobile-link { display: flex; align-items: center; justify-content: space-between; padding: 15px 6px;
  font-weight: 600; font-size: 18px; color: var(--ink); border-bottom: 1px solid var(--border-soft); text-decoration: none; }
.mobile-link svg { color: var(--ink-mute); }
.mobile-link.active { color: var(--primary-deep); }
.mobile-link.active svg { color: var(--primary); }
.mobile-cta { display: flex; flex-direction: column; gap: var(--s3); margin-top: var(--s5); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 940px) {
  .desktop-nav, .header-cta { display: none; }
  .menu-btn { display: inline-flex; }
}

/* ---------- footer ---------- */
.site-footer { background: var(--primary-deep); color: oklch(0.92 0.01 235); margin-top: var(--s8); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s7); padding-top: var(--s8); padding-bottom: var(--s6); }
.footer-tagline { color: oklch(0.82 0.015 235); max-width: 40ch; margin-top: var(--s4); font-size: 15.5px; }
.footer-phi { display: inline-flex; align-items: center; gap: 9px; margin-top: var(--s5); padding: 9px 14px;
  border-radius: 8px; background: oklch(1 0 0 / .08); color: oklch(0.88 0.01 235); font-size: 13.5px; font-weight: 600; }
.footer-phi svg { color: oklch(0.78 0.05 70); }
.footer-h { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: oklch(0.74 0.045 173); margin-bottom: var(--s4); }
.footer-col { display: flex; flex-direction: column; gap: var(--s3); }
.foot-link { color: oklch(0.88 0.01 235); font-size: 15.5px; font-weight: 500; text-decoration: none; width: fit-content; }
.foot-link:hover { color: #fff; text-decoration: underline; }
.footer-base { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap;
  padding-top: var(--s5); padding-bottom: var(--s6); border-top: 1px solid oklch(1 0 0 / .12);
  font-size: 14px; color: oklch(0.78 0.015 235); }
.footer-area { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr; gap: var(--s6); } }

/* ---------- reveal (default visible; animation only when JS confirms) ---------- */
.reveal { opacity: 1; transform: none; }
.js-anim .reveal { opacity: 0; transition: opacity .6s cubic-bezier(.2,.7,.2,1); }
.js-anim .reveal.in { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .reveal, .js-anim .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ---------- language selector ---------- */
.lang-select { position: relative; display: inline-flex; align-items: center; }
.lang-select-icon { position: absolute; left: 9px; color: var(--ink-mute); pointer-events: none; }
.lang-select-el { appearance: none; -webkit-appearance: none; -moz-appearance: none;
  font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--border); border-radius: 9px;
  padding: 7px 26px 7px 29px; cursor: pointer; transition: border-color .15s, background .15s; max-width: 160px; }
.lang-select-el:hover { border-color: var(--primary-line); }
.lang-select-el:focus-visible { outline: 2px solid var(--primary); outline-offset: 1px; }
.lang-select::after { content: ""; position: absolute; right: 12px; width: 6px; height: 6px; pointer-events: none;
  border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute); transform: rotate(45deg) translateY(-1px); }
.lang-select.light .lang-select-icon { color: rgba(255,255,255,.72); }
.lang-select.light .lang-select-el { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.28); }
.lang-select.light::after { border-color: rgba(255,255,255,.72); }
[dir="rtl"] .lang-select-icon { left: auto; right: 9px; }
[dir="rtl"] .lang-select-el { padding: 7px 29px 7px 26px; }
[dir="rtl"] .lang-select::after { right: auto; left: 12px; }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; min-height: calc(100vh - 74px); min-height: calc(100svh - 74px);
  display: flex; flex-direction: column; justify-content: center; padding-block: clamp(40px, 6vw, 80px);
  background:
    radial-gradient(120% 90% at 88% -10%, var(--primary-tint), transparent 55%),
    radial-gradient(80% 80% at 0% 110%, var(--accent-tint), transparent 50%),
    var(--bg);
  border-bottom: 1px solid var(--border-soft); }
.hero-grid { display: grid; grid-template-columns: 0.85fr 1.25fr; gap: clamp(24px, 3.5vw, 48px); align-items: center; }
.hero-kicker { font-size: clamp(13.5px, 1.5vw, 16px); letter-spacing: 0.055em; margin-bottom: var(--s5); gap: 9px;
  white-space: pre-line; align-items: flex-start; line-height: 1.5; }
.hero-kicker svg { margin-top: 2px; }
.kicker-text { white-space: pre-line; }
/* legal page + demo note */
.legal-updated { color: var(--ink-mute); font-size: 14px; margin-top: var(--s2); }
.legal-block { margin-top: var(--s6); }
.legal-block h2 { font-size: clamp(19px, 2.2vw, 24px); margin-bottom: var(--s3); }
.legal-block p { color: var(--ink-soft); line-height: 1.65; margin-bottom: var(--s3); max-width: 70ch; }
.demo-note { margin: var(--s3) auto 0; max-width: 62ch; font-size: 13.5px; line-height: 1.5; color: var(--ink-mute); text-align: center; }
.hero-kicker svg { width: 18px; height: 18px; }
.hero h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.08; margin-bottom: var(--s5); text-wrap: normal; }
.hero-copy p, .hero-copy h1 { text-wrap: normal; }
.hero .lead { max-width: 46ch; margin-bottom: var(--s6); }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.hero-meta { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-mute); font-size: 14.5px; font-weight: 600; margin-top: var(--s5); }
.hero-meta svg { color: var(--ok); width: 17px; height: 17px; }
.hero-visual { position: relative; }
.hero-pic { display: block; }
.hero-photo { display: block; width: 100%; height: auto; aspect-ratio: 5/4; object-fit: cover; object-position: center; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.hero-float { position: absolute; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-md); padding: 13px 16px; display: flex; align-items: center; gap: 11px; }
.hero-float .icon-tile { width: 38px; height: 38px; }
.hero-float .icon-tile svg { width: 19px; height: 19px; }
.hero-float strong { display: block; font-size: 14.5px; line-height: 1.25; color: var(--ink); }
.hero-float span { display: block; font-size: 12.5px; line-height: 1.3; color: var(--ink-mute); margin-top: 1px; }
.hero-float > div { min-width: 0; }
.hero-float.a { top: 22px; left: -22px; }
.hero-float.b { bottom: 26px; right: -18px; }
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { order: -1; max-width: 600px; margin-inline: auto; }
  .hero-float.a { left: 8px; } .hero-float.b { right: 8px; }
}

/* ---------- generic section header ---------- */
.sec-head { max-width: 62ch; margin-bottom: var(--s7); }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head h2 { font-size: clamp(27px, 3.6vw, 40px); margin-bottom: var(--s4); }

/* ---------- trust row ---------- */
.trust-band { background: var(--surface); border-block: 1px solid var(--border); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
.trust-item { display: flex; flex-direction: column; gap: var(--s3); }
.trust-item h3 { font-family: var(--sans); font-size: 17px; font-weight: 700; }
.trust-item p { font-size: 14.5px; color: var(--ink-soft); }
@media (max-width: 820px) { .trust-grid { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); } }
@media (max-width: 460px) { .trust-grid { grid-template-columns: 1fr; } }

/* ---------- how it works ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); counter-reset: step; position: relative; }
.step { position: relative; }
.step-num { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 11px; background: var(--primary); color: #fff; font-family: var(--serif); font-weight: 600; font-size: 19px;
  margin-bottom: var(--s4); box-shadow: var(--shadow-sm); }
.step h3 { font-family: var(--sans); font-size: 18px; font-weight: 700; margin-bottom: var(--s2); }
.step p { font-size: 14.5px; color: var(--ink-soft); }
.step-line { position: absolute; top: 20px; left: 50%; right: -50%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--primary-line) 0 6px, transparent 6px 12px); z-index: 0; }
.step:last-child .step-line { display: none; }
@media (max-width: 820px) { .steps { grid-template-columns: 1fr 1fr; gap: var(--s6) var(--s5); } .step-line { display: none; } }
@media (max-width: 440px) { .steps { grid-template-columns: 1fr; } }

/* ---------- audience split ---------- */
.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); }
.aud-card { display: flex; flex-direction: column; gap: var(--s4); position: relative; overflow: hidden; }
.aud-card .tag { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.aud-card.client { background: linear-gradient(160deg, var(--primary-tint), var(--surface)); border-color: var(--primary-line); }
.aud-card.client .tag { color: var(--primary-deep); }
.aud-card.interp { background: linear-gradient(160deg, var(--accent-tint), var(--surface)); border-color: oklch(0.88 0.04 65); }
.aud-card.interp .tag { color: var(--accent-deep); }
.aud-card h3 { font-size: 25px; }
.aud-card p { color: var(--ink-soft); flex: 1; }
@media (max-width: 720px) { .aud-grid { grid-template-columns: 1fr; } }

/* ---------- generic card grids ---------- */
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s5); }
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s5); }
.card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s5); }
@media (max-width: 1000px) { .card-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .card-grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 540px) { .card-grid-4 { grid-template-columns: 1fr; } }
@media (max-width: 720px) { .card-grid-2 { grid-template-columns: 1fr; } }
.feature h3 { font-family: var(--sans); font-size: 19px; font-weight: 700; margin: var(--s4) 0 var(--s2); }
.feature p { color: var(--ink-soft); font-size: 15px; }

/* ---------- page intro ---------- */
.page-intro { background: var(--surface); border-bottom: 1px solid var(--border); padding-block: clamp(40px, 6vw, 72px); }
.page-intro h1 { font-size: clamp(30px, 4.6vw, 50px); margin-bottom: var(--s4); }
.page-intro .lead { max-width: 56ch; }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.about-body p + p { margin-top: var(--s4); }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s5); }
.stat .n { font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--primary-deep); }
.stat .l { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px; }
@media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- value list ---------- */
.value-row { display: flex; gap: var(--s4); padding: var(--s5) 0; border-bottom: 1px solid var(--border-soft); }
.value-row:last-child { border-bottom: none; }
.value-row h3 { font-family: var(--sans); font-size: 18px; font-weight: 700; margin-bottom: 3px; }
.value-row p { color: var(--ink-soft); font-size: 15px; }

/* ---------- assurance list ---------- */
.assure-list { display: grid; gap: var(--s3); }
.assure-item { display: flex; gap: var(--s3); align-items: flex-start; font-size: 16px; color: var(--ink-soft); }
.assure-item svg { color: var(--ok); width: 22px; height: 22px; flex: none; margin-top: 1px; }

/* ---------- faq ---------- */
.faq-list { max-width: 800px; margin-inline: auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q { width: 100%; text-align: start; background: none; border: none; cursor: pointer; padding: var(--s5) 0;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); }
.faq-q:hover { color: var(--primary-deep); }
.faq-icon { flex: none; width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
  display: grid; place-items: center; color: var(--primary); transition: transform .2s, background .2s; font-size: 20px; }
.faq-item.open .faq-icon { transform: rotate(45deg); background: var(--primary-tint); }
.faq-a { overflow: hidden; max-height: 0; transition: max-height .3s ease, padding .3s ease; }
.faq-item.open .faq-a { max-height: 320px; padding-bottom: var(--s5); }
.faq-a p { color: var(--ink-soft); font-size: 16px; max-width: 68ch; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.contact-list { display: grid; gap: var(--s4); }
.contact-row { display: flex; gap: var(--s4); align-items: flex-start; padding: var(--s4) 0; border-bottom: 1px solid var(--border-soft); }
.contact-row:last-child { border-bottom: none; }
.contact-row .k { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.contact-row .v { font-size: 17px; color: var(--ink); font-weight: 600; }
.contact-row a.v { color: var(--primary-deep); }
.contact-map { aspect-ratio: 4/3; min-height: 280px; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--primary-deep); color: #fff; border-radius: var(--r-lg); padding: clamp(32px, 5vw, 56px);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s6); flex-wrap: wrap;
  background-image: radial-gradient(60% 120% at 100% 0%, oklch(0.5 0.08 173), transparent 60%); }
.cta-band h2 { color: #fff; font-size: clamp(24px, 3.4vw, 34px); max-width: 22ch; }
.cta-band p { color: oklch(0.86 0.02 230); margin-top: var(--s3); max-width: 44ch; }
.cta-band .cta-actions { display: flex; gap: var(--s3); flex-wrap: wrap; }

/* ---------- forms layout ---------- */
.form-shell { display: grid; grid-template-columns: 1fr 340px; gap: clamp(28px, 4vw, 56px); align-items: start; }
.form-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: clamp(22px, 3vw, 40px); box-shadow: var(--shadow-sm); }
.form-aside { position: sticky; top: 96px; display: flex; flex-direction: column; gap: var(--s4); }
.aside-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s5); }
.aside-card h4 { font-family: var(--sans); font-size: 15px; font-weight: 700; margin-bottom: var(--s3); display: flex; gap: 8px; align-items: center; }
.aside-card h4 svg { width: 18px; height: 18px; color: var(--primary); }
.aside-step { display: flex; gap: 11px; padding: 9px 0; font-size: 14.5px; color: var(--ink-soft); }
.aside-step b { color: var(--ink); font-weight: 700; }
.aside-num { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--primary-tint); color: var(--primary-deep);
  display: grid; place-items: center; font-size: 13px; font-weight: 700; }
.form-section { margin-bottom: var(--s6); }
.form-section-title { font-family: var(--sans); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--primary-deep); margin-bottom: var(--s4); padding-bottom: var(--s3); border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; gap: 8px; }
.form-section-title .num { width: 22px; height: 22px; border-radius: 6px; background: var(--primary); color: #fff; display: grid; place-items: center; font-size: 12px; }
.form-actions { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s5); }
.form-actions .same-day { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-mute); font-size: 14px; font-weight: 600; }
.form-actions .same-day svg { width: 16px; height: 16px; color: var(--ok); }
@media (max-width: 880px) { .form-shell { grid-template-columns: 1fr; } .form-aside { position: static; order: -1; flex-direction: row; flex-wrap: wrap; } .aside-card { flex: 1; min-width: 240px; } }

/* ---------- confirmation ---------- */
.confirm { max-width: 600px; margin-inline: auto; text-align: center; padding-block: var(--s7); }
.confirm-ring { width: 84px; height: 84px; border-radius: 999px; background: var(--ok-tint); color: var(--ok);
  display: grid; place-items: center; margin: 0 auto var(--s5); animation: pop .4s cubic-bezier(.2,1.4,.4,1); }
.confirm-ring svg { width: 44px; height: 44px; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.confirm h2 { font-size: 30px; margin-bottom: var(--s4); }
.confirm p { color: var(--ink-soft); font-size: 17px; max-width: 50ch; margin-inline: auto; }
.confirm-ref { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--s5); padding: 12px 18px;
  border-radius: var(--r-md); background: var(--primary-tint); border: 1px solid var(--primary-line); }
.confirm-ref .k { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.confirm-ref .v { font-family: ui-monospace, Menlo, monospace; font-size: 16px; font-weight: 700; color: var(--primary-deep); }

/* ---------- AI differentiator tiers ---------- */
.ai-section .sec-head { max-width: 720px; }
.tier-card { display: flex; flex-direction: column; gap: var(--s3); }
.tier-tag { align-self: flex-start; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; background: var(--primary-tint); border: 1px solid var(--primary-line); color: var(--primary-deep); }
.tier-tag.hot { background: var(--accent); border-color: var(--accent); color: oklch(0.22 0.04 50); }
.tier-card.tier-feature { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary) inset, var(--shadow-md); }
.tier-card h3 { font-size: 23px; }
.tier-card > p { color: var(--ink-soft); flex: 1; }
.tier-points { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 10px; }
.tier-points li { display: flex; gap: 9px; align-items: flex-start; font-size: 15px; color: var(--ink); font-weight: 500; }
.tier-points li svg { width: 18px; height: 18px; color: var(--ok); flex: none; margin-top: 2px; }
.ai-cta { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s7); }

/* ---------- languages band ---------- */
.langs-band { background: var(--surface); border-block: 1px solid var(--border); }
.langs-band .sec-head { max-width: 720px; }
.lang-chips { display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: center; max-width: 900px; margin: 0 auto; }
.lang-chip { padding: 9px 16px; border-radius: 999px; background: var(--primary-tint); border: 1px solid var(--primary-line);
  color: var(--primary-deep); font-weight: 600; font-size: 15px; }
.lang-chip:last-child { background: var(--accent-tint); border-color: oklch(0.86 0.05 65); color: var(--accent-deep); }

/* ---------- live AI interpreting demo ---------- */
.section.demo-section {
  padding-block: calc(var(--header-h) + var(--demo-gap)) var(--demo-gap);
}
.demo-section {
  --demo-head: clamp(7rem, 17vh, 10.5rem);
  --demo-chrome: clamp(14rem, 34vh, 17rem);
  --demo-gap: clamp(var(--s3), 2.5vh, var(--s4));
  height: 100svh;
  height: 100dvh;
  max-height: 100svh;
  max-height: 100dvh;
  padding-block: calc(var(--header-h) + var(--demo-gap)) var(--demo-gap);
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex; flex-direction: column; box-sizing: border-box;
  overflow: hidden;
}
.demo-section .wrap {
  flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start;
  gap: clamp(var(--s2), 1.8vh, var(--s3));
  width: 100%; padding-top: 0; padding-bottom: 0; overflow: hidden;
}
.demo-section--oncall {
  --demo-head: clamp(2.5rem, 6vh, 3.5rem);
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}
.demo-section--oncall .wrap { gap: clamp(var(--s2), 1.2vh, var(--s3)); }
.demo-section--oncall .demo-sec-head {
  position: static; width: auto; height: auto; margin: 0; padding: 0;
  overflow: visible; clip: auto; white-space: normal; border: 0;
  min-height: 0;
}
.demo-section--oncall .demo-sec-head .eyebrow,
.demo-section--oncall .demo-sec-head .lead,
.demo-section--oncall .demo-sec-head .demo-note {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.demo-section--oncall .demo-sec-head h2 {
  font-size: clamp(16px, 2.4vh, 20px); margin-bottom: 0;
}
.demo-sec-head {
  flex: none; max-width: 720px; margin-inline: auto; margin-bottom: 0; text-align: center;
  min-height: var(--demo-head);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.demo-sec-head h2 { font-size: clamp(22px, 4.2vh, 36px); line-height: 1.15; margin-bottom: var(--s2); }
.demo-sec-head .lead { font-size: clamp(14px, 2.1vh, 18px); line-height: 1.45; margin-top: var(--s2) !important; }
.demo-sec-head .demo-note { font-size: 12px; margin-top: var(--s2); }
.demo-shell {
  flex: 1; min-height: 0; width: 100%; max-width: 1100px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: 0; padding-bottom: 0; overflow: hidden;
}
.demo-shell--idle {
  max-width: 900px;
  align-items: center;
  justify-content: center;
}
.demo-shell--idle .demo-call-controls {
  flex: none; width: 100%; margin-top: var(--demo-gap);
  min-height: var(--demo-chrome);
  display: flex; flex-direction: column; align-items: center;
}
.demo-shell--idle .demo-call-slot {
  position: relative; flex: 1; width: 100%; max-width: 520px;
  min-height: calc(var(--demo-chrome) - 26px);
}
.demo-shell--idle .demo-call-idle {
  position: absolute; inset: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.demo-shell--cols {
  display: grid;
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: clamp(var(--s3), 2vw, var(--s5));
  align-items: stretch;
}
.demo-shell--oncall {
  flex: 1;
  min-height: 0;
}
.demo-col {
  min-width: 0;
  min-height: 0;
}
.demo-col--agent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--s2), 1.5vh, var(--s3));
  padding: clamp(var(--s3), 2.5vh, var(--s4));
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.demo-col--chat {
  display: flex;
  flex-direction: column;
}
.demo-agent-meta {
  display: flex; flex-direction: column; gap: 4px; width: 100%;
}
.demo-agent-name {
  margin: 0; font-size: clamp(17px, 2.2vh, 20px); font-weight: 800; color: var(--ink);
  font-family: var(--serif);
}
.demo-agent-status,
.demo-agent-caption {
  margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-mute); font-weight: 600;
}
.demo-agent-start {
  display: flex; flex-direction: column; align-items: center; width: 100%;
}
.demo-agent-toolbar {
  display: flex; flex-direction: row; align-items: flex-start; justify-content: center;
  gap: var(--s4); width: 100%; margin-top: auto; padding-top: var(--s2);
}
.demo-agent-toolbar-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 72px; flex: none;
}
.demo-agent-btn {
  width: 52px; height: 52px; min-width: 52px; min-height: 52px;
  margin: 0; padding: 0; box-sizing: border-box; flex: none;
  border-radius: 50%; border: 1px solid var(--border);
  display: grid; place-items: center; cursor: pointer;
  transition: transform .15s, background .15s, border-color .15s, box-shadow .15s;
}
.demo-agent-btn--mic {
  background: var(--surface); color: var(--primary-deep);
  box-shadow: var(--shadow-sm);
}
.demo-agent-btn--mic:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-tint); }
.demo-agent-btn--mic.is-active {
  background: oklch(0.58 0.18 25); border-color: oklch(0.72 0.14 25 / .5); color: #fff;
  animation: demo-pulse-dot 1.2s ease-in-out infinite;
}
.demo-agent-btn--mic.is-muted {
  background: var(--surface-2); border-color: var(--border); color: var(--ink-mute);
  animation: none;
}
.demo-agent-btn--mic:disabled { opacity: .45; cursor: not-allowed; }
.demo-agent-btn--hangup {
  border: none; background: oklch(0.58 0.18 25); color: #fff;
  box-shadow: 0 8px 24px oklch(0.55 0.18 25 / .45);
}
.demo-agent-btn--hangup:hover { background: oklch(0.62 0.2 25); transform: scale(1.04); }
.demo-agent-tool-label {
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-mute); line-height: 1.2; text-align: center; width: 100%;
}
.demo-langs--agent {
  width: 100%; margin-top: auto;
}
.demo-chat-panel {
  flex: 1; min-height: clamp(16rem, 42vh, 24rem);
  display: flex; flex-direction: column;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.demo-shell--oncall .demo-chat-panel {
  min-height: 0;
}
.demo-chat-panel .demo-chat-thread {
  flex: 1; min-height: 0; max-height: none;
  border: none; border-radius: 0;
  background-color: oklch(0.98 0.008 85);
  background-image:
    linear-gradient(oklch(0.99 0.006 85 / .58), oklch(0.99 0.006 85 / .58)),
    url("assets/demo-chat-bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.demo-chat-panel .demo-chat-thread--empty p {
  background: oklch(0.99 0.006 85 / .82);
  padding: 8px 12px;
  border-radius: var(--r-sm);
}
.demo-composer--panel {
  flex: none; margin-top: 0; padding: var(--s3);
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.demo-composer--panel .demo-composer-form {
  width: 100%;
}
.demo-avatar {
  flex: none; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.demo-shell--idle .demo-avatar-visual {
  --demo-orbit: min(
    72vw,
    34vmin,
    calc(100svh - var(--header-h) - var(--demo-head) - var(--demo-chrome) - var(--demo-gap) * 4),
    calc(100dvh - var(--header-h) - var(--demo-head) - var(--demo-chrome) - var(--demo-gap) * 4)
  );
}
.demo-col--agent .demo-avatar-visual {
  --demo-orbit: min(42vw, 22vmin, 9.5rem);
}
.demo-shell--oncall .demo-col--agent .demo-avatar-visual {
  --demo-orbit: min(36vw, 18vmin, 7.5rem);
}
.demo-avatar--oncall:not(.demo-avatar--thinking):not(.demo-avatar--speaking) .demo-avatar-visual {
  box-shadow: 0 0 0 3px oklch(0.55 0.09 173 / .28); border-radius: 50%;
}
.demo-lang-select {
  width: 100%;
}
.demo-lang-select .lang-select-el {
  width: 100%;
  max-width: none;
  font-size: 13px;
}
.demo-langs--agent .demo-lang span { font-size: 11px; }
.demo-langs--agent .demo-swap { width: 34px; height: 34px; margin-bottom: 2px; font-size: 15px; }
.demo-chat-thread {
  flex: 1; min-height: 5.5rem; max-height: clamp(7.5rem, 22vh, 11rem);
  overflow-y: auto; overflow-x: hidden;
  display: flex; flex-direction: column; gap: 8px;
  padding: 10px 8px; margin: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: oklch(0.97 0.01 235 / .65);
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

.demo-chat-thread--empty {
  align-items: center; justify-content: center; text-align: center;
}
.demo-chat-thread--empty p {
  margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-mute); font-weight: 500;
}
.demo-chat-anchor { height: 1px; flex: none; }
.demo-bubble {
  max-width: 82%; padding: 9px 13px; border-radius: 18px;
  font-size: 14px; line-height: 1.4; word-break: break-word;
  box-shadow: 0 1px 2px oklch(0.2 0.02 235 / .08);
}
.demo-section--oncall .demo-bubble {
  max-width: 88%;
  padding: 11px 15px;
  font-size: 15px;
  line-height: 1.45;
}
.demo-bubble--user {
  align-self: flex-end; margin-left: auto;
  background: #34c759; color: #fff;
  border-bottom-right-radius: 5px;
}
.demo-bubble--interp {
  align-self: flex-start; margin-right: auto;
  background: #007aff; color: #fff;
  border-bottom-left-radius: 5px;
}
.demo-bubble--pending { opacity: .82; font-style: italic; }
.demo-composer {
  flex: none; width: 100%; display: flex; flex-direction: column; gap: 6px;
  margin-top: auto; padding-top: var(--s2);
}

.demo-composer-status {
  margin: 0; font-size: 11.5px; line-height: 1.3; color: var(--ink-mute);
  font-weight: 600; text-align: center;
}
.demo-composer-row {
  display: flex; align-items: center; gap: var(--s2); width: 100%;
}
.demo-composer-form {
  flex: 1; min-width: 0; display: flex; align-items: stretch;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.demo-composer-input {
  flex: 1; min-width: 0; border: none !important; box-shadow: none !important;
  padding: 10px 14px; font-size: 14px; background: transparent;
}
.demo-composer-input:focus { outline: none; }
.demo-composer-send {
  flex: none; width: 40px; border: none; background: transparent;
  color: var(--primary); display: grid; place-items: center; cursor: pointer;
  transition: color .15s, background .15s;
}
.demo-composer-send:hover:not(:disabled) { background: var(--primary-tint); color: var(--primary-deep); }
.demo-composer-send:disabled { opacity: .35; cursor: not-allowed; }
.demo-composer-mic { width: 46px !important; height: 46px !important; flex: none; }
.demo-limit-back {
  position: fixed; inset: 0; z-index: 90;
  background: oklch(0.2 0.02 235 / .5);
  display: grid; place-items: center; padding: var(--s5);
}
.demo-limit-card {
  width: min(100%, 420px); padding: clamp(22px, 4vw, 32px);
  border-radius: var(--r-lg); background: var(--surface);
  box-shadow: var(--shadow-lg); text-align: center;
}
.demo-limit-eyebrow {
  margin: 0 0 var(--s2); font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; color: var(--primary-deep);
}
.demo-limit-card h3 { margin: 0 0 var(--s2); font-family: var(--serif); font-size: clamp(20px, 4vw, 26px); color: var(--ink); }
.demo-limit-sub {
  margin: 0 0 var(--s3); font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--ink);
}
.demo-limit-body { margin: 0 0 var(--s4); font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.demo-limit-meta { margin: 0 0 var(--s4); font-size: 13px; font-weight: 700; color: var(--ink-mute); }
.demo-limit-actions { display: flex; flex-direction: column; gap: var(--s2); align-items: stretch; }
.demo-limit-btn { width: 100%; justify-content: center; }
.demo-limit-reset {
  margin-top: var(--s2); border: none; background: none; color: var(--primary-deep);
  font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline;
  text-underline-offset: 2px;
}
.demo-limit-reset:hover { color: var(--primary); }
.demo-limit-dismiss {
  margin-top: var(--s2); border: none; background: none; color: var(--ink-mute);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.demo-limit-dismiss:hover { color: var(--ink); }
.demo-call-toolbar {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s2); width: 100%; margin-top: auto; padding-top: var(--s2);
}
.demo-call-toolbar .demo-speak-btn {
  width: 52px; height: 52px; flex: none;
}
.demo-call-toolbar .demo-speak-hint {
  margin: 0; font-size: 12px; line-height: 1.3; text-align: left;
}
.demo-call-hangup--inline {
  flex: none; flex-direction: row; gap: 0; padding: 0;
}
.demo-call-hangup--inline .demo-call-hangup-btn {
  width: 52px; height: 52px;
}
.demo-call-toolbar--type {
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
}
.demo-call-toolbar--type .demo-type-bar--inline {
  grid-column: 1; grid-row: 1;
  display: flex; gap: var(--s2); align-items: stretch; min-width: 0;
}
.demo-call-toolbar--type .demo-speak-hint--type {
  grid-column: 1; grid-row: 2; margin: 0; text-align: left;
}
.demo-call-toolbar--type .demo-call-hangup--inline {
  grid-column: 2; grid-row: 1 / span 2; align-self: center;
}
.demo-type-bar--inline .demo-type-input {
  flex: 1; min-width: 0; padding: 10px 12px; font-size: 14px;
}
.demo-type-send {
  flex: none; padding: 10px 16px; border: none; border-radius: var(--r-sm);
  background: var(--primary); color: #fff; font-size: 13px; font-weight: 700;
  cursor: pointer; white-space: nowrap; transition: background .15s;
}
.demo-type-send:hover:not(:disabled) { background: var(--primary-deep); }
.demo-type-send:disabled { opacity: .45; cursor: not-allowed; }
.demo-call-status {
  margin: 0; min-height: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute);
  font-family: ui-monospace, Menlo, monospace; opacity: 0; pointer-events: none;
  flex-wrap: wrap;
}
.demo-col--agent .demo-call-status--live {
  line-height: 1.35;
}
.demo-call-status--live { opacity: 1; }
.demo-call-dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--primary); opacity: 0;
}
.demo-call-status--live .demo-call-dot {
  opacity: 1; animation: demo-pulse-dot 1.2s ease-in-out infinite;
}
.demo-call-actions {
  flex: none; display: flex; align-items: center; justify-content: center; width: 100%;
  min-height: 84px; margin: var(--demo-gap) 0 0; padding: 0;
}
.demo-call-start {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px 12px 12px;
  border: none; border-radius: 999px; cursor: pointer; background: var(--primary); color: #fff;
  font-size: 15px; font-weight: 700; box-shadow: 0 8px 28px oklch(0.55 0.09 173 / .35);
  transition: transform .15s, background .15s;
}
.demo-call-start:hover:not(:disabled) { background: var(--primary-deep); transform: translateY(-1px); }
.demo-call-start:disabled { opacity: .7; cursor: wait; transform: none; }
.demo-call-error {
  margin: var(--s3) 0 0; max-width: 36ch; font-size: 13px; line-height: 1.45;
  font-weight: 600; color: oklch(0.52 0.18 25); text-align: center;
}
.demo-call-start-icon {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: oklch(0.4 0.08 175 / .45);
}
.demo-call-hangup {
  display: flex; flex-direction: column; align-items: center; gap: 6px; border: none; background: none;
  color: var(--ink-soft); cursor: pointer; padding: 0;
}
.demo-call-hangup-btn {
  width: 60px; height: 60px; border-radius: 50%; display: grid; place-items: center;
  background: oklch(0.58 0.18 25); color: #fff; box-shadow: 0 8px 24px oklch(0.55 0.18 25 / .45);
  transition: transform .15s, background .15s;
}
.demo-call-hangup:hover .demo-call-hangup-btn { background: oklch(0.62 0.2 25); transform: scale(1.04); }
.demo-call-hangup span:last-child { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.demo-avatar-status-row {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; width: 100%;
}
.demo-avatar-status {
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute);
}
.demo-avatar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); flex: none; }
.demo-avatar-dot--listening { background: oklch(0.72 0.14 25); animation: demo-pulse-dot 1.2s ease-in-out infinite; }
.demo-avatar-dot--thinking { background: oklch(0.68 0.12 295); animation: demo-pulse-dot 1.2s ease-in-out infinite; }
.demo-avatar-dot--speaking { background: var(--primary); animation: demo-pulse-dot 1.2s ease-in-out infinite; }
.demo-avatar-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px;
  background: var(--ok-tint); border: 1px solid oklch(0.62 0.08 155 / .35);
  color: var(--ok); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
}
.demo-avatar-visual {
  --demo-orbit: min(
    72vw,
    34vmin,
    calc(100svh - var(--header-h) - var(--demo-head) - var(--demo-chrome) - var(--demo-gap) * 4),
    calc(100dvh - var(--header-h) - var(--demo-head) - var(--demo-chrome) - var(--demo-gap) * 4)
  );
  --demo-face: calc(var(--demo-orbit) / 1.12);
  position: relative; width: var(--demo-orbit); height: var(--demo-orbit); display: grid; place-items: center;
  flex: none;
}
.demo-avatar--listening .demo-avatar-visual { box-shadow: 0 0 0 3px oklch(0.72 0.14 25 / .35); border-radius: 50%; }
.demo-avatar--muted .demo-avatar-visual { box-shadow: 0 0 0 3px oklch(0.62 0.02 240 / .4); border-radius: 50%; }
.demo-avatar--muted.demo-avatar--oncall:not(.demo-avatar--thinking):not(.demo-avatar--speaking) .demo-avatar-visual {
  box-shadow: 0 0 0 3px oklch(0.62 0.02 240 / .45);
}
.demo-avatar--thinking .demo-avatar-visual { box-shadow: 0 0 0 3px oklch(0.68 0.12 295 / .35); border-radius: 50%; }
.demo-avatar--speaking .demo-avatar-visual { box-shadow: 0 0 0 3px oklch(0.55 0.09 173 / .45); border-radius: 50%; }
.demo-avatar-ring {
  position: relative; z-index: 2; width: var(--demo-face); height: var(--demo-face); border-radius: 50%; overflow: hidden;
  border: 2px solid var(--primary-line); box-shadow: var(--shadow-md);
}
.demo-avatar-photo {
  width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  display: block; background: var(--surface-2);
}
.demo-avatar-orbit {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 1;
}
.demo-avatar-orbit-bar {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 12px; margin-left: -2px;
  margin-top: calc(var(--demo-orbit) * -0.5);
  border-radius: 4px; background: var(--primary);
  transform-origin: 50% calc(var(--demo-orbit) * 0.5); opacity: .45;
}
.demo-avatar--speaking .demo-avatar-orbit { opacity: 1; }
.demo-avatar--speaking .demo-avatar-orbit-bar { animation: demo-orbit-bar .45s ease-in-out infinite alternate; opacity: .95; }
.demo-avatar--speaking .demo-avatar-orbit-bar:nth-child(odd) { animation-duration: .38s; }
.demo-avatar--speaking .demo-avatar-orbit-bar:nth-child(3n) { animation-duration: .52s; }
.demo-avatar-think {
  position: absolute; top: 4px; right: 4px; z-index: 3; display: flex; gap: 5px; padding: 6px 8px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.demo-avatar-think span { width: 6px; height: 6px; border-radius: 50%; background: oklch(0.68 0.12 295); animation: demo-dot 1s ease-in-out infinite; }
.demo-avatar-think span:nth-child(2) { animation-delay: .15s; }
.demo-avatar-think span:nth-child(3) { animation-delay: .3s; }
.demo-avatar-name { margin: 0; font-family: var(--serif); font-size: 21px; font-weight: 600; color: var(--ink); }
.demo-avatar-caption { margin: 0; max-width: 28ch; font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.demo-avatar-eq {
  display: flex; align-items: flex-end; justify-content: center; gap: 3px; height: 32px;
  padding: 6px 14px; border-radius: 999px; background: var(--primary-tint); border: 1px solid var(--primary-line);
  opacity: 0; transition: opacity .2s;
}
.demo-avatar-eq-bar {
  width: 3px; height: 10px; border-radius: 2px;
  background: linear-gradient(180deg, var(--primary), oklch(0.66 0.115 56));
  transform-origin: center bottom;
}
.demo-avatar--listening .demo-avatar-eq,
.demo-avatar--speaking .demo-avatar-eq { opacity: 1; }
.demo-avatar--listening .demo-avatar-eq-bar,
.demo-avatar--speaking .demo-avatar-eq-bar { animation: demo-eq-bar .42s ease-in-out infinite alternate; }
@keyframes demo-dot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-4px); opacity: 1; } }
@keyframes demo-orbit-bar { 0% { height: 8px; opacity: .4; } 100% { height: 28px; opacity: 1; } }
@keyframes demo-eq-bar { 0% { transform: scaleY(.3); } 100% { transform: scaleY(1.2); } }
@keyframes demo-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .demo-avatar--speaking .demo-avatar-orbit-bar { animation: none; }
  .demo-avatar--speaking .demo-avatar-orbit { opacity: 0; }
}
.demo-input-modes { display: flex; gap: var(--s2); flex-wrap: wrap; justify-content: center; }
.demo-input-mode {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface); font-size: 14px; font-weight: 600;
  color: var(--ink-soft); cursor: pointer; transition: all .15s;
}
.demo-input-mode:hover:not(:disabled) { border-color: var(--primary-line); color: var(--ink); }
.demo-input-mode.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.demo-input-mode:disabled { opacity: .45; cursor: not-allowed; }
.demo-input-block {
  width: 100%; display: flex; flex-direction: column; gap: var(--s3);
  padding: var(--s4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.demo-type-bar { display: flex; gap: var(--s2); align-items: stretch; }
.demo-type-input { flex: 1; min-width: 0; }
.demo-speak-bar { display: flex; flex-direction: column; align-items: center; gap: var(--s3); text-align: center; }
.demo-speak-btn {
  width: 64px; height: 64px; border-radius: 50%; border: 1px solid var(--border);
  background: var(--surface); color: var(--primary-deep); cursor: pointer;
  display: grid; place-items: center; transition: all .15s; box-shadow: var(--shadow-sm);
}
.demo-speak-btn:hover { border-color: var(--primary); background: var(--primary-tint); }
.demo-speak-btn.active {
  background: oklch(0.58 0.18 25); border-color: oklch(0.72 0.14 25 / .5); color: #fff;
  animation: demo-pulse-dot 1.2s ease-in-out infinite;
}
.demo-speak-btn.muted {
  background: var(--surface-2); border-color: var(--border); color: var(--ink-mute);
  animation: none;
}
.demo-speak-btn.muted:hover { border-color: var(--ink-mute); color: var(--ink-soft); }
.demo-speak-hint { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.demo-live {
  display: flex; flex-direction: column; gap: 6px; text-align: center;
  min-height: 3.4em; flex: none;
}
.demo-live-src, .demo-live-out {
  margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
.demo-live-placeholder { color: var(--ink-mute); font-weight: 500; }
.demo-live-src span, .demo-live-out span {
  font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-mute); margin-right: 6px;
}
.demo-live-out { color: var(--ink); font-weight: 600; }
.demo-live-out span { color: var(--primary-deep); }
.demo-langs { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s3); align-items: end; width: 100%; }
.demo-lang { display: flex; flex-direction: column; gap: 6px; }
.demo-lang span { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-mute); }
.demo-swap { align-self: center; margin-bottom: 4px; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--primary); display: grid; place-items: center; cursor: pointer; transition: all .15s; }
.demo-swap:hover { background: var(--primary-tint); border-color: var(--primary); }
.demo-actions { display: flex; align-items: center; justify-content: center; gap: var(--s3); flex-wrap: wrap; }
.demo-note { font-size: 13.5px; color: var(--ink-mute); text-align: center; }
@media (max-width: 820px) {
  .demo-shell--cols {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(14rem, 1fr);
  }
  .demo-col--agent {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--s2) var(--s3);
    padding: var(--s3);
  }
  .demo-col--agent .demo-avatar { width: auto; }
  .demo-col--agent .demo-avatar-visual { --demo-orbit: min(28vw, 18vmin, 5.5rem); }
  .demo-agent-meta { flex: 1 1 140px; text-align: left; }
  .demo-agent-start,
  .demo-agent-toolbar,
  .demo-langs--agent { width: 100%; }
  .demo-agent-toolbar { margin-top: 0; }
  .demo-chat-panel { min-height: clamp(14rem, 38vh, 20rem); }
}
@media (max-width: 620px) {
  .demo-section { --demo-head: clamp(6.5rem, 15vh, 9.5rem); --demo-chrome: clamp(13rem, 36vh, 16rem); }
}
@media (max-height: 700px) {
  .demo-section { --demo-head: 6.5rem; --demo-chrome: 12.5rem; }
  .demo-section--oncall { --demo-head: 2rem; }
  .demo-section--oncall .demo-sec-head h2 { font-size: 16px; }
  .demo-shell--oncall .demo-col--agent .demo-avatar-visual { --demo-orbit: min(28vw, 14vmin, 5.5rem); }
  .demo-chat-panel { min-height: clamp(12rem, 44vh, 18rem); }
  .demo-agent-btn { width: 46px; height: 46px; min-width: 46px; min-height: 46px; }
}

/* ---------- modal ---------- */
.modal-back { position: fixed; inset: 0; z-index: 80; background: oklch(0.2 0.02 235 / .45);
  display: grid; place-items: center; padding: var(--s5); animation: slideDown .2s ease; }
.modal { background: var(--surface); border-radius: var(--r-lg); padding: clamp(24px, 4vw, 40px); max-width: 460px; text-align: center;
  box-shadow: var(--shadow-lg); }
.modal-icon { width: 56px; height: 56px; border-radius: var(--r-md); background: var(--primary-tint); color: var(--primary-deep);
  display: grid; place-items: center; margin: 0 auto var(--s4); }
.modal h3 { font-size: 23px; margin-bottom: var(--s3); }
.modal p { color: var(--ink-soft); }
.modal-actions { display: flex; gap: var(--s3); justify-content: center; flex-wrap: wrap; margin-top: var(--s5); }

/* ---------- chat widget ---------- */
.chat-fab { position: fixed; right: 22px; bottom: 22px; z-index: 70; width: 58px; height: 58px; border-radius: 999px;
  border: none; background: var(--primary); color: #fff; box-shadow: var(--shadow-lg); cursor: pointer;
  display: grid; place-items: center; transition: transform .15s, background .15s; }
.chat-fab:hover { background: var(--primary-deep); transform: translateY(-2px); }
@keyframes teaserIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
.chat-teaser { position: fixed; right: 22px; bottom: 92px; z-index: 69; max-width: 256px;
  display: flex; align-items: stretch; overflow: hidden; text-align: start;
  background: var(--surface); border: 1px solid var(--primary-line); border-radius: 16px; border-bottom-right-radius: 5px;
  box-shadow: var(--shadow-lg); transition: border-color .15s, transform .15s; animation: teaserIn .22s ease; }
.chat-teaser:hover { border-color: var(--primary); transform: translateY(-1px); }
.chat-teaser-open { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px;
  padding: 12px 6px 12px 15px; background: transparent; border: none; cursor: pointer; text-align: start; font: inherit; color: inherit; }
.chat-teaser-wave { flex: none; font-size: 15px; line-height: 1.35; }
.chat-teaser-text { font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink); white-space: pre-line; }
.chat-teaser-x { flex: none; align-self: stretch; width: 30px; border: none; background: transparent;
  color: var(--ink-mute); font-size: 18px; line-height: 1; cursor: pointer; display: grid; place-items: start center; padding-top: 9px; }
.chat-teaser-x:hover { color: var(--ink); }
@media (max-width: 440px) { .chat-teaser { right: 8px; max-width: calc(100vw - 88px); } }
.chat-panel { position: fixed; right: 22px; bottom: 92px; z-index: 70; width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100vh - 140px));
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden; animation: slideDown .18s ease; }
.chat-head { display: flex; align-items: center; gap: 9px; padding: 14px 16px; background: var(--primary-deep); color: #fff; font-size: 15px; }
.chat-dot { width: 9px; height: 9px; border-radius: 999px; background: oklch(0.78 0.14 150); box-shadow: 0 0 0 3px oklch(0.78 0.14 150 / .3); }
.chat-x { margin-inline-start: auto; background: rgba(255,255,255,.14); border: none; color: #fff; width: 30px; height: 30px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.chat-msg { max-width: 85%; padding: 10px 13px; border-radius: 14px; font-size: 14.5px; line-height: 1.45; white-space: pre-wrap; }
.chat-msg.bot { background: var(--surface); border: 1px solid var(--border); color: var(--ink); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-msg.me { background: var(--primary); color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--surface); }
.chat-input .input { flex: 1; }
.chat-input .btn { padding: 10px 16px; }
@media (max-width: 440px) { .chat-panel { right: 8px; left: 8px; width: auto; } }

/* ---------- interpreting with a heart ---------- */
.heart-section { background: linear-gradient(180deg, var(--accent-tint), var(--surface)); }
.heart-section .sec-head { max-width: 720px; }
.heart-kicker { text-align: center; margin-top: var(--s7); font-family: var(--serif); font-style: italic;
  font-size: clamp(20px, 2.6vw, 27px); color: var(--primary-deep); }