:root {
  --ink-800: rgb(12, 12, 12);
  --ink-700: rgb(26, 28, 35);
  --ink-600: rgb(33, 32, 46);
  --slate-500: rgb(97, 100, 117);
  --slate-300: rgb(135, 135, 167);
  --white: rgb(255, 255, 255);
  --canvas: rgb(248, 248, 251);
  --line-200: rgb(235, 236, 242);
  --line-400: rgb(215, 217, 228);
  --purple-600: rgb(125, 0, 212);
  --purple-700: rgb(90, 0, 160);
  --purple-100: rgba(125, 0, 212, 0.10);
  --green-600: rgb(8, 123, 54);
  --green-100: rgba(8, 123, 54, 0.10);
  --orange-600: rgb(247, 86, 27);
  --orange-100: rgba(247, 86, 27, 0.10);
  --text-primary: var(--ink-800);
  --text-heading: var(--ink-700);
  --text-strong: var(--ink-600);
  --text-secondary: var(--slate-500);
  --text-tertiary: var(--slate-300);
  --surface-inverse: var(--ink-800);
  --accent: var(--purple-600);
  --accent-soft: var(--purple-100);
  --status-live: var(--green-600);
  --status-live-soft: var(--green-100);
  --status-alert: var(--orange-600);
  --status-alert-soft: var(--orange-100);
  --shadow-card: 0px 2px 42px 0px rgba(0, 0, 0, 0.08);
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--text-primary); font-family: var(--font-sans); letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); }
a:hover { color: var(--purple-700); }
button, input { font-family: inherit; letter-spacing: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.wordmark { font-weight: 800; font-size: 27px; line-height: 1; letter-spacing: -0.06em; color: var(--accent); text-decoration: none; display: inline-flex; align-items: center; }
.wordmark.small { font-size: 20px; }
a.wordmark:hover { color: var(--accent); }

.nav { max-width: 1200px; margin: 0 auto; padding: 22px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.nav-brand { display: flex; align-items: center; gap: 12px; }
.nav-sep { width: 1px; height: 20px; background: var(--line-400); }
.nav-name { font-size: 17px; font-weight: 600; color: var(--text-heading); }
.nav-links { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 14px; font-weight: 500; }
.nav-links a { color: var(--text-secondary); text-decoration: none; }
.nav-links a:hover { color: var(--text-heading); }
.nav-links a[aria-current="page"] { color: var(--accent, #7D00D4); font-weight: 600; }
.nav-links a[aria-current="page"] { color: var(--accent, #7D00D4); font-weight: 600; }
.nav-links a.cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 100px; background: var(--surface-inverse); color: var(--white); font-weight: 600; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 100px; border: 0; font-size: 15px; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform 120ms cubic-bezier(0.2, 0, 0, 1), opacity 120ms; }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.accent { background: var(--accent); color: var(--white); }
.btn.dark { background: var(--surface-inverse); color: var(--white); }
.btn.ghost { box-shadow: inset 0 0 0 1px var(--line-400); color: var(--text-primary); background: var(--white); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 13px; }

.footer { max-width: 1200px; margin: 0 auto; padding: 28px 32px 40px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-secondary); }
.footer > div { display: flex; align-items: center; gap: 10px; }

.phone { width: 360px; max-width: 100%; border-radius: 48px; background: #111111; padding: 12px; box-shadow: 0 30px 60px rgba(17, 25, 39, .18); flex-shrink: 0; }
.screen { border-radius: 38px; overflow: hidden; background: #EFEAE2; display: flex; flex-direction: column; height: 680px; position: relative; letter-spacing: normal; font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif; }
.wa-head { background: #F6F6F6; padding: 18px 12px 10px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid #E2E2E2; }
.wa-head .icon { background: none; border: 0; padding: 2px; display: inline-flex; cursor: pointer; color: #007AFF; }
.wa-avatar { width: 36px; height: 36px; border-radius: 50%; background: #7D00D4; color: #FFFFFF; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; flex-shrink: 0; }
.wa-who { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.wa-name { display: inline-flex; align-items: center; gap: 4px; font-size: 16px; font-weight: 600; color: #111B21; }
.wa-sub { font-size: 12px; color: #667781; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-msgs { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; overscroll-behavior: contain; }
.wa-day { align-self: center; padding: 4px 10px; border-radius: 8px; background: #FFFFFF; font-size: 12px; color: #54656F; box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13); }
.wa-note { align-self: center; max-width: 88%; padding: 5px 10px; border-radius: 8px; background: #FFEECD; font-size: 11.5px; line-height: 1.35; color: #54656F; text-align: center; }
.wa-note button { margin-top: 6px; border: 0; border-radius: 100px; background: #7D00D4; color: #fff; font-size: 12px; font-weight: 600; padding: 5px 12px; cursor: pointer; }
.b { max-width: 84%; padding: 6px 8px 4px 10px; font-size: 14px; line-height: 1.35; color: #111B21; box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13); white-space: pre-wrap; overflow-wrap: anywhere; }
.b.me { align-self: flex-end; max-width: 80%; border-radius: 8px 0 8px 8px; background: #D9FDD3; }
.b.bot { align-self: flex-start; border-radius: 0 8px 8px 8px; background: #FFFFFF; }
.b .src { display: block; margin-top: 4px; font-size: 12px; color: #667781; }
.b .work { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; padding-top: 5px; border-top: 1px solid #EEF0F2; font-size: 11.5px; line-height: 1.35; color: #7D00D4; }
.b .work::before { content: ""; flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%; background: #7D00D4; transform: translateY(-1px); }
.b .meta { display: inline-flex; align-items: center; gap: 2px; float: right; margin: 6px 0 -2px 10px; font-size: 11px; color: #667781; white-space: nowrap; }
.b .meta svg { flex-shrink: 0; }
.b .meta.pending svg path { stroke: #8696A0; }
.b a { color: #027EB5; }
.b.typing { color: #667781; font-style: italic; }
.b.voice { min-width: 230px; white-space: normal; }
.vrow { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.vplay { width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: #54656F; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; padding: 0; }
.b.me .vplay { color: #3B4A54; }
.vbars { flex: 1; height: 26px; display: flex; align-items: center; gap: 2px; cursor: pointer; }
.vbars span { flex: 1; min-width: 2px; border-radius: 2px; background: #A9B6BD; }
.vbars span.on { background: #34B7F1; }
.b.me .vbars span { background: #9DB5A5; }
.b.me .vbars span.on { background: #1FA855; }
.vavatar { width: 34px; height: 34px; border-radius: 50%; background: #7D00D4; color: #fff; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; position: relative; }
.b.me .vavatar { background: #DFE5E7; color: #54656F; }
.vavatar .mic { position: absolute; right: -3px; bottom: -3px; width: 15px; height: 15px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; }
.vavatar .mic svg { width: 10px; height: 10px; }
.vtime { display: flex; justify-content: space-between; font-size: 11px; color: #667781; padding-left: 40px; margin-top: -2px; }
.vtrans { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(0, 0, 0, .06); font-size: 12.5px; color: #3B4A54; font-style: italic; white-space: pre-wrap; }
.wa-sys { align-self: center; max-width: 90%; padding: 5px 10px; border-radius: 8px; background: #FFFFFF; font-size: 12px; color: #54656F; text-align: center; box-shadow: 0 1px 0.5px rgba(11, 20, 26, .13); }
.wa-sys.err { background: #FDE2E2; color: #8A1C1C; }
.wa-chips { display: flex; gap: 6px; overflow-x: auto; padding: 6px 10px; background: #F6F6F6; border-top: 1px solid #E2E2E2; scrollbar-width: none; }
.wa-chips::-webkit-scrollbar { display: none; }
.wa-chips button { flex-shrink: 0; border: 1px solid #D1D7DB; background: #fff; color: #111B21; border-radius: 100px; padding: 6px 11px; font-size: 12.5px; cursor: pointer; }
.wa-chips button:hover { border-color: #7D00D4; color: #7D00D4; }
.wa-bar { background: #F6F6F6; padding: 8px 10px 22px; display: flex; align-items: center; gap: 10px; border-top: 1px solid #E2E2E2; }
.wa-bar .icon { background: none; border: 0; padding: 0; display: inline-flex; cursor: pointer; color: #007AFF; }
.wa-bar .icon:disabled { opacity: .4; cursor: default; }
.wa-input { flex: 1; min-width: 0; height: 34px; border-radius: 17px; background: #FFFFFF; border: 1px solid #E2E2E2; padding: 0 12px; font-size: 14px; color: #111B21; outline: none; }
.wa-input::placeholder { color: #8696A0; }
.wa-mic { width: 34px; height: 34px; border-radius: 50%; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; background: transparent; color: #007AFF; touch-action: none; user-select: none; -webkit-user-select: none; flex-shrink: 0; }
.wa-mic.send { background: #007AFF; color: #fff; }
.wa-mic.rec { background: #FF3B30; color: #fff; transform: scale(1.15); }
.wa-rec { flex: 1; display: flex; align-items: center; gap: 10px; font-size: 14px; color: #111B21; min-width: 0; }
.wa-rec .dot { width: 10px; height: 10px; border-radius: 50%; background: #FF3B30; animation: blink 1s infinite; flex-shrink: 0; }
.wa-rec .hint { color: #8696A0; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wa-rec .trash { background: none; border: 0; color: #8696A0; cursor: pointer; padding: 0; display: inline-flex; }
@keyframes blink { 50% { opacity: .2; } }
.wa-lock { position: absolute; left: 0; right: 0; bottom: 0; background: #FFFFFF; border-radius: 22px 22px 0 0; box-shadow: 0 -10px 40px rgba(11, 20, 26, .14); display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 22px 30px; text-align: center; z-index: 2; animation: sheet-in 420ms cubic-bezier(.2, 0, 0, 1); }
.wa-lock h3 { margin: 0; font-size: 17px; color: #111B21; }
.wa-lock p { margin: 0; font-size: 13px; color: #54656F; line-height: 1.45; }
.wa-lock form { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.wa-lock input { height: 44px; border-radius: 12px; border: 1px solid #D1D7DB; padding: 0 14px; font-size: 15px; background: #fff; }
.wa-lock .err { color: #B42318; font-size: 12.5px; min-height: 16px; }

@media (max-width: 900px) {
  .nav { padding: 18px 20px; }
  .footer { padding: 24px 20px 32px; }
}
@media (max-width: 420px) {
  .phone { width: 100%; border-radius: 40px; padding: 10px; }
  .screen { height: 620px; border-radius: 32px; }
}

@keyframes sheet-in { from { transform: translateY(100%); } to { transform: none; } }
@keyframes bubble-in { from { opacity: 0; transform: translateY(6px) scale(.98); } to { opacity: 1; transform: none; } }
.b, .wa-sys, .wa-note { animation: bubble-in 260ms cubic-bezier(.2, 0, 0, 1); }
.b.example { opacity: .92; }
.rec-wave { flex: 1; min-width: 40px; height: 28px; }
.vbars span { transition: height 90ms linear, background-color 200ms; }
.vbars.live span { background: #7D00D4; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}
.logo { display: inline-flex; }
.logo img { height: 24px; width: auto; display: block; }
.foot-logo { height: 18px; width: auto; }
.wa-avatar img { width: 18px; height: 18px; display: block; }
.vavatar img { width: 16px; height: 16px; }