:root {
  --ink: #22232a;
  --muted: #7c7f87;
  --yellow: #ffd43b;
  --yellow-hover: #f8c422;
  --amber: #af7b09;
  --pale-yellow: #fff8df;
  --line: #edeef2;
  --soft: #f7f8fb;
  --green: #579272;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 95px; }
body { margin: 0; color: var(--ink); background: #fff; font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
button, a, summary, input { outline-offset: 5px; }
:focus-visible { outline: 3px solid #987014; }
.icon { display: inline-block; width: 22px; height: 22px; object-fit: contain; flex-shrink: 0; vertical-align: middle; }
.icon-button { display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; width: 36px; height: 36px; border-radius: 8px; }
.icon-button:hover { background: #f4f4f7; }
.wrap, .nav-wrap { width: calc(100% - 96px); max-width: 1200px; margin-inline: auto; }
.site-header { position: sticky; top: 0; z-index: 30; height: 76px; background: #ffffffee; border-bottom: 1px solid #f2f2f580; backdrop-filter: blur(18px); }
.nav-wrap { display: flex; align-items: center; height: 100%; gap: 42px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: #26262e; white-space: nowrap; font-size: 24px; font-weight: 700; letter-spacing: -.6px; }
.brand-icon { display: grid; place-items: center; width: 41px; height: 41px; border-radius: 12px; background: var(--yellow); }
.brand-icon img { width: 27px; height: 27px; }
.brand-ai { margin-left: 6px; font-size: 23px; font-weight: 750; letter-spacing: -1px; }
.brand-service { font-size: 18px; font-weight: 500; margin-left: 6px; }
.nav-wrap nav { display: flex; gap: 32px; margin-left: auto; align-items: center; }
.nav-wrap nav a { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; white-space: nowrap; color: #555660; }
.nav-wrap nav a:hover { color: #936607; }
.nav-wrap nav .nav-home { color: #1f2026; }
.nav-badge { font-size: 9px; line-height: 1; padding: 3px 4px; border-radius: 4px; background: var(--yellow); color: #4b3a12; font-weight: 700; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 17px 28px; border: 1px solid transparent; border-radius: 8px; font-size: 16px; font-weight: 500; white-space: nowrap; line-height: 1.5; transition: background .18s ease, box-shadow .18s ease, transform .18s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--yellow); color: #3c3010; box-shadow: 0 5px 16px #efbd2820; }
.button-primary:hover { background: var(--yellow-hover); box-shadow: 0 7px 20px #d6a11c28; }
.button-outline { border-color: #d6b865; color: #8d6911; background: #ffffff45; }
.button-outline:hover { background: #fff9e7; }
.nav-cta { padding: 10px 17px; font-size: 14px; border-color: #dcdce2; gap: 12px; background: white; }
.nav-cta .icon { width: 16px; height: 16px; }
.nav-cta:hover { background: var(--pale-yellow); border-color: #e1c375; }
.menu-toggle { display: none; }

.hero { position: relative; padding-top: 38px; isolation: isolate; }
.hero-atmosphere { position: absolute; left: 0; top: -270px; width: 100%; height: 1010px; max-width: none; object-fit: cover; object-position: center bottom; z-index: -1; pointer-events: none; }
.hero-copy { text-align: center; }
.hero-eyebrow { padding: 9px 16px; border: 1px solid #e9dfc9; border-radius: 30px; background: #ffffffb8; box-shadow: 0 3px 12px #70551308; display: inline-flex; align-items: center; justify-content: center; gap: 9px; color: #756e5c; font-size: 12px; line-height: 1.5; }
.hero-eyebrow .icon { width: 18px; height: 18px; }
.hero-eyebrow>span:last-child { color: #856b28; font-size: 11px; }
.eyebrow-separator { width: 1px; height: 12px; background: #d9d5ca; margin-inline: 4px; }
.hero h1 { margin: 23px 0 24px; font-size: clamp(37px, 4.7vw, 64px); letter-spacing: -2px; line-height: 1.35; font-weight: 720; }
.hero h1 span { color: #24251f; background: #ffd43b; padding: 0 .13em .04em; border-radius: .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.hero-description { font-size: 18px; color: #6e6e77; line-height: 1.8; margin: 0; letter-spacing: .1px; }
.hero-actions { display: flex; justify-content: center; gap: 16px; margin-top: 32px; }
.hero-actions .button-primary { min-width: 214px; }
.hero-actions .button-outline { min-width: 175px; }
.hero-actions .icon { width: 19px; height: 19px; }
.hero-note { font-size: 12px; letter-spacing: 1px; color: #736f65; margin: 17px 0 0; }
.product-stage { position: relative; margin-top: 84px; }
.product-callout { position: absolute; left: 50%; top: -31px; transform: translateX(-50%); z-index: 2; display: flex; align-items: center; gap: 13px; background: #ffffffed; padding: 15px 28px 15px 17px; border-radius: 15px; border: 4px solid #fff6d9; box-shadow: 0 7px 28px #a5822119; white-space: nowrap; }
.callout-icon { display: grid; place-items: center; width: 43px; height: 43px; border-radius: 13px; background: #fff4cd; }
.callout-icon .icon { width: 24px; height: 24px; opacity: .65; }
.product-callout small { display: block; font-size: 12px; color: #726e63; margin-bottom: 5px; }
.product-callout strong { font-size: 14px; font-weight: 600; }
.workbench { background: #fff; border: 1px solid #e5dfc9; border-radius: 18px; box-shadow: 0 32px 65px -22px #64512d45, 0 0 0 7px #ffffff80; overflow: hidden; text-align: left; }
.workbench-titlebar { display: flex; align-items: center; gap: 28px; height: 54px; padding: 0 22px; border-bottom: 1px solid var(--line); background: #ffffffef; }
.workbench-name { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #74a685; box-shadow: 0 0 0 3px #edf6ee; flex-shrink: 0; }
.workbench-breadcrumb { color: #6e6e73; font-size: 11px; }
.workbench-breadcrumb span { color: #6e6e71; margin-inline: 12px; }
.workspace-demo-label { margin-left: auto; font-size: 10px; color: #716f6b; border: 1px solid #eeeae1; padding: 4px 7px; border-radius: 5px; }
.muted-icon { width: 21px; height: 21px; opacity: .4; }
.workbench-body { display: grid; grid-template-columns: 54px 206px minmax(0,1fr) 214px; height: 490px; }
.workspace-rail { padding: 14px 7px; display: flex; flex-direction: column; align-items: center; gap: 13px; background: #fafafd; border-right: 1px solid var(--line); }
.rail-brand { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 9px; background: var(--yellow); margin-bottom: 9px; }
.rail-brand .icon { width: 22px; height: 22px; }
.rail-item { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 8px; }
.rail-item .icon { width: 21px; height: 21px; opacity: .42; }
.rail-item.selected { background: #fff0b7; }
.rail-item.selected .icon { opacity: .8; }
.rail-bottom { margin-top: auto; }
.team-avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #eaebf1; color: #6c6d7b; font-size: 11px; }
.inbox { border-right: 1px solid var(--line); position: relative; background: #fff; min-width: 0; }
.inbox-heading { display: flex; align-items: center; padding: 18px 14px 14px; gap: 10px; }
.inbox-heading h2 { font-size: 14px; font-weight: 600; margin: 0; }
.inbox-heading h2 span { font-size: 10px; padding: 1px 5px; border-radius: 4px; font-weight: 400; background: #f3f3f6; color: #6e6e76; margin-left: 5px; }
.inbox-heading>.icon { width: 15px; height: 15px; opacity: .4; margin-left: auto; }
.inbox-search { display: flex; align-items: center; gap: 6px; background: #f5f5f9; border-radius: 6px; height: 31px; margin: 0 12px; padding: 0 8px; }
.inbox-search .icon { width: 14px; height: 14px; opacity: .35; }
.inbox-search input { min-width: 0; width: 100%; font-size: 11px; color: #6c6d7a; border: 0; background: transparent; outline: none; }
.inbox-search:focus-within { outline: 2px solid #d9b856; outline-offset: 2px; }
.inbox-search input::placeholder { color: #6e6e75; }
.inbox-filters { display: flex; gap: 13px; margin: 12px 14px 8px; }
.inbox-filters button { padding: 4px 0; color: #6e6e76; border: 0; background: transparent; font-size: 11px; }
.inbox-filters button.active { color: #8b691b; font-weight: 600; }
.conversation { width: 100%; border: 0; border-left: 3px solid transparent; background: #fff; display: flex; gap: 9px; padding: 16px 11px; text-align: left; }
.conversation.active { background: #fff9e7; border-left-color: #ebc047; }
.conversation:hover:not(.active) { background: #fafafd; }
.avatar { display: grid; place-items: center; width: 33px; height: 33px; flex-shrink: 0; border-radius: 9px; font-size: 12px; font-weight: 500; }
.avatar-lavender { background: #eae8f6; color: #756897; }
.avatar-peach { background: #f9e6dc; color: #8a6856; }
.avatar-blue { background: #e1eaf6; color: #5b7089; }
.conversation-content { min-width: 0; width: 100%; }
.conversation-title { display: flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; }
.conversation-title time { margin-left: auto; font-size: 9px; color: #706e69; font-weight: 400; }
.conversation-preview { display: block; color: #6e6d71; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 6px; }
.conversation-badge { display: inline-block; font-size: 9px; color: #826b2b; background: #fff1c5; padding: 3px 5px; margin-top: 7px; border-radius: 3px; }
.conversation-badge.human { color: #786a7c; background: #f0eaf4; }
.inbox-foot { position: absolute; display: flex; justify-content: center; gap: 6px; align-items: center; width: 100%; bottom: 17px; font-size: 9px; color: #6f6d73; }
.inbox-foot .icon { width: 14px; height: 14px; opacity: .5; }
.empty-search { font-size: 12px; color: #6e6e76; padding: 30px 14px; text-align: center; }
.chat-panel { display: flex; flex-direction: column; min-width: 0; min-height: 0; background: #fff; }
.chat-header { height: 64px; display: flex; align-items: center; gap: 10px; padding: 0 18px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.chat-header .avatar { width: 32px; height: 32px; }
.chat-header b { display: block; font-size: 13px; font-weight: 600; }
.chat-header small { display: block; margin-top: 5px; font-size: 10px; color: #706e74; }
.ai-badge { border: 0; appearance: none; display: flex; gap: 4px; align-items: center; font-size: 10px; padding: 5px 6px; background: #fff7d8; border-radius: 5px; color: #866c26; margin-left: auto; white-space: nowrap; }
.ai-badge .icon { width: 12px; height: 12px; opacity: .5; }
.ai-badge.human { color: #7b688a; background: #f0eaf6; }
.context-banner { display: flex; align-items: center; gap: 6px; background: #fcfbf6; padding: 9px 17px; font-size: 10px; color: #736e5f; }
.context-banner .icon { width: 13px; height: 13px; opacity: .35; }
.chat-messages { padding: 17px 19px; flex: 1; overflow-y: auto; min-height: 0; background: #fdfdff; scrollbar-width: thin; scrollbar-color: #e7e5dd transparent; }
.message-time { display: block; text-align: center; margin: 0 0 16px; color: #706e75; font-size: 9px; }
.message-row { display: flex; gap: 7px; margin-bottom: 16px; align-items: flex-start; }
.message-row .avatar { width: 24px; height: 24px; font-size: 10px; border-radius: 7px; }
.message-row.agent { flex-direction: row-reverse; }
.message-row.agent .avatar { background: var(--yellow); }
.message-row.agent .avatar .icon { width: 15px; height: 15px; }
.message-bubble { max-width: 88%; padding: 10px 13px; background: #f1f2f7; border-radius: 0 9px 9px 9px; font-size: 12px; line-height: 1.9; color: #666672; }
.agent .message-bubble { background: #fff4c9; border-radius: 9px 0 9px 9px; color: #746536; }
.message-bubble.manual { background: #eaeaf8; color: #6e6c8e; }
.message-system { text-align: center; font-size: 10px; color: #7b6e43; margin: 15px 0; }
.workspace-compose { height: 83px; padding: 11px 16px 10px; flex-shrink: 0; background: #fff; border-top: 1px solid var(--line); }
.workspace-compose>input { border: 0; width: 100%; min-width: 0; color: #6e6e78; outline: none; background: transparent; font-size: 11px; padding: 0; }
.workspace-compose>input::placeholder { color: #6e6d72; }
.compose-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.compose-bottom>span { font-size: 9px; color: #6f6d73; display: flex; gap: 4px; align-items: center; }
.compose-bottom>span .icon { width: 12px; height: 12px; opacity: .35; }
.compose-bottom button { width: 31px; height: 27px; display: grid; place-items: center; background: var(--yellow); border: 0; border-radius: 5px; }
.compose-bottom button .icon { width: 15px; height: 15px; opacity: .65; }
.compose-bottom button:disabled { background: #f0eff3; opacity: .8; }
.customer-panel { display: flex; flex-direction: column; padding: 20px 17px 16px; border-left: 1px solid var(--line); min-width: 0; }
.customer-panel-heading { display: flex; align-items: center; justify-content: space-between; }
.customer-panel-heading b { font-size: 12px; font-weight: 600; }
.customer-panel-heading>span { display: inline-flex; align-items: center; gap: 5px; font-size: 9px; color: #657166; }
.customer-panel-heading .live-dot { width: 4px; height: 4px; box-shadow: none; }
.customer-profile { display: flex; align-items: center; flex-direction: column; margin: 21px 0 15px; }
.customer-profile .avatar { width: 41px; height: 41px; font-size: 16px; border-radius: 50%; }
.customer-profile strong { font-size: 13px; font-weight: 500; margin-top: 9px; }
.customer-profile small { font-size: 9px; color: #716d75; margin-top: 5px; }
.customer-tags { display: flex; justify-content: center; gap: 5px; margin-bottom: 18px; flex-wrap: wrap; }
.customer-tags>span { font-size: 9px; color: #7f6d3a; background: #fff7dd; padding: 4px 6px; border-radius: 4px; }
.customer-tags>span:nth-child(2) { color: #736a8b; background: #f0ecf8; }
.customer-details { margin: 0; padding: 14px 0; border-top: 1px solid var(--line); }
.customer-details>div { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; margin-bottom: 13px; }
.customer-details>div:last-child { margin-bottom: 0; }
.customer-details dt { color: #706c74; }
.customer-details dd { margin: 0; color: #716c79; }
.customer-details dd.empty-value { color: #706c73; }
.customer-note label { display: flex; align-items: center; gap: 5px; color: #736d79; font-size: 10px; }
.customer-note label .icon { width: 12px; height: 12px; opacity: .4; }
.customer-note p { border: 1px solid #f0edf3; background: #faf9fc; border-radius: 5px; padding: 10px; line-height: 1.9; color: #726c79; font-size: 10px; margin: 8px 0 0; }
.takeover-button { margin-top: auto; display: flex; justify-content: center; align-items: center; gap: 7px; border: 1px solid #ede5cf; background: #fff9e8; border-radius: 6px; padding: 8px; font-size: 11px; color: #826d37; }
.takeover-button:hover { background: #fff0c0; }
.takeover-button .icon { width: 15px; height: 15px; opacity: .55; }
.product-assurance { display: flex; justify-content: center; align-items: center; gap: 33px; padding: 23px 0 0; }
.product-assurance>span { display: flex; align-items: center; gap: 6px; color: #6f6e74; font-size: 11px; }
.product-assurance .icon { width: 14px; height: 14px; opacity: .35; }
.product-assurance small { color: #706e73; font-size: 10px; }

.service-chain { padding: 65px 0 68px; text-align: center; border-bottom: 1px solid var(--line); }
.service-chain>p { font-size: 16px; color: #706e76; margin: 0 0 30px; }
.chain-items { display: flex; align-items: center; justify-content: center; gap: 33px; }
.chain-items>span { display: flex; align-items: center; gap: 10px; font-size: 20px; font-weight: 500; color: #56545f; }
.chain-items>span .icon { width: 29px; height: 29px; opacity: .6; }
.chain-items>.chain-arrow { width: 20px; height: 20px; opacity: .18; }
.section-heading { text-align: center; }
.section-eyebrow { font-size: 10px; font-weight: 600; font-family: Arial, sans-serif; letter-spacing: 2px; color: #7c6d44; }
.section-heading h2 { font-size: 36px; letter-spacing: -1px; font-weight: 650; line-height: 1.5; margin: 16px 0 17px; }
.section-heading>p { color: #706c76; font-size: 16px; line-height: 1.8; margin: 0; }
.mobile-break { display: none; }
.ai-features { padding: 86px 0 96px; }
.feature-tabs { display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; padding: 7px; background: #f6f5f1; border: 1px solid #eeece5; border-radius: 16px; margin-top: 48px; }
.feature-tabs>button { display: flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; padding: 17px 8px; font-size: 16px; color: #726d78; transition: color .2s, background .2s; }
.feature-tabs>button .icon { width: 21px; height: 21px; opacity: .5; }
.feature-tabs>button:hover { background: #fffdf5; }
.feature-tabs>button.active { color: #302b19; background: var(--yellow); border-color: #edc134; box-shadow: 0 3px 8px #a5811920; font-weight: 600; }
.feature-tabs>button.active .icon { opacity: .8; }
.feature-panel { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 77px; padding-top: 48px; }
.feature-copy { position: relative; padding: 8px 0; }
.feature-symbol { display: grid; place-items: center; width: 45px; height: 45px; border-radius: 12px; background: #fff4cb; margin-bottom: 22px; }
.feature-symbol .icon { width: 25px; height: 25px; opacity: .65; }
.feature-number { position: absolute; top: 23px; right: 20px; color: #716d75; font: 11px Arial,sans-serif; letter-spacing: 2px; }
.feature-copy h3 { font-size: 29px; font-weight: 650; line-height: 1.55; margin: 0 0 17px; letter-spacing: -.5px; }
.feature-copy>p { color: #726c78; font-size: 15px; line-height: 1.95; max-width: 440px; margin: 0; }
.feature-copy ul { list-style: none; padding: 0; margin: 25px 0 22px; }
.feature-copy li { position: relative; padding-left: 26px; color: #736d7a; font-size: 14px; line-height: 1.8; margin-bottom: 13px; }
.feature-copy li:before { content: ''; position: absolute; left: 0; top: 4px; width: 17px; height: 17px; background: url('assets/icons/check.svg') no-repeat center/contain; opacity: .5; }
.feature-demo-link { display: flex; align-items: center; gap: 14px; background: none; border: 0; padding: 0; color: #89691f; font-size: 14px; }
.feature-demo-link .icon { width: 17px; height: 17px; opacity: .5; }
.feature-visual { min-width: 0; min-height: 416px; padding: 31px; background: #fff9e8; border: 1px solid #f6ecd3; border-radius: 20px; display: flex; flex-direction: column; justify-content: center; gap: 17px; position: relative; overflow: hidden; }
.visual-topline { display: flex; align-items: center; gap: 7px; font-size: 11px; color: #7c6d46; }
.visual-topline .icon { width: 15px; height: 15px; opacity: .45; }
.settings-card { padding: 23px; background: #fff; border: 1px solid #f0e7cd; border-radius: 13px; box-shadow: 0 15px 30px #97845714; }
.settings-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 23px; }
.settings-card-head>span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff4cc; }
.settings-card-head .icon { width: 23px; height: 23px; opacity: .65; }
.settings-card-head small { display: block; font-size: 10px; color: #736d77; margin-bottom: 6px; }
.settings-card-head h4 { margin: 0; font-size: 21px; font-weight: 600; }
.settings-card-head>img { margin-left: auto; width: 19px; opacity: .3; }
.settings-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.settings-field { padding: 11px 12px; background: #fcfbf8; border: 1px solid #f0ece2; border-radius: 7px; }
.settings-field small { display: block; color: #736d71; font-size: 10px; margin-bottom: 7px; }
.settings-field b { font-size: 12px; font-weight: 500; color: #756c74; }
.settings-rule { margin-top: 15px; border-top: 1px solid var(--line); padding-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; }
.settings-rule span { padding: 5px 8px; background: #fff6dc; border-radius: 20px; font-size: 10px; color: #7c6d43; }
.test-card { display: flex; gap: 9px; padding: 13px 15px; background: #ffffffdb; border: 1px solid #f0e8d5; border-radius: 10px; }
.test-card>.icon { width: 19px; height: 19px; opacity: .5; margin-top: 2px; }
.test-card strong { font-size: 11px; font-weight: 500; color: #7c6e49; }
.test-card p { font-size: 11px; line-height: 1.8; color: #746d6c; margin: 5px 0 0; }
.visual-chat { background: #fff; border: 1px solid #e8e4e9; border-radius: 13px; padding: 20px; box-shadow: 0 10px 30px #6157730d; }
.visual-chat-title { display: flex; gap: 9px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 500; }
.visual-chat-title .avatar { width: 28px; height: 28px; font-size: 11px; }
.visual-chat-title small { margin-left: auto; font-size: 10px; font-weight: 400; color: #6f6d7b; }
.history-note { display: flex; align-items: center; gap: 6px; border: 1px dashed #ddd9ed; background: #f7f5fc; border-radius: 7px; padding: 10px; font-size: 10px; color: #716b7f; margin: 14px 0; }
.history-note .icon { width: 14px; height: 14px; opacity: .4; }
.visual-bubble { width: fit-content; max-width: 92%; background: #f2f2f8; padding: 11px 13px; border-radius: 8px; font-size: 12px; line-height: 1.8; margin-top: 13px; color: #726d7c; }
.visual-bubble.ai { margin-left: auto; background: #fff3c6; color: #7d6d3f; }
.material-card { border: 1px solid #f0dfaa; border-radius: 9px; background: #fffdf7; padding: 16px; margin-top: 16px; }
.material-card>small { color: #7d6d41; font-size: 10px; }
.material-card h4 { margin: 8px 0; font-size: 20px; font-weight: 600; }
.material-card p { font-size: 11px; color: #756e62; margin: 0 0 16px; }
.material-card>span { display: flex; justify-content: space-between; border-top: 1px solid #f0e5c8; padding-top: 12px; font-size: 11px; color: #836d32; }
.material-card .icon { width: 14px; height: 14px; opacity: .5; }
.lead-source { padding: 15px 19px; border: 1px solid #e6e9e3; background: #fff; border-radius: 10px; font-size: 12px; color: #6b7164; }
.lead-source small { display: block; font-size: 10px; color: #6d7068; margin-bottom: 8px; }
.lead-profile { border: 1px solid #e5e9df; border-radius: 13px; background: #fff; padding: 22px; box-shadow: 0 10px 30px #5666480d; }
.lead-profile-head { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; }
.lead-profile-head .avatar { width: 38px; height: 38px; border-radius: 50%; }
.lead-profile-head small { margin-left: auto; font-size: 10px; background: #edf5e8; color: #667359; border-radius: 4px; padding: 4px 6px; font-weight: 400; }
.lead-profile dl { display: grid; grid-template-columns: 1fr 1fr; gap: 17px; margin: 22px 0 0; }
.lead-profile dt { font-size: 10px; color: #6c7067; margin-bottom: 8px; }
.lead-profile dd { font-size: 12px; color: #66715d; margin: 0; }
.visual-synced { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: #67725b; }
.visual-synced .icon { width: 15px; height: 15px; opacity: .4; }
.handoff-status { display: flex; gap: 12px; align-items: center; border: 1px solid #e4deed; border-radius: 10px; padding: 16px; background: #ffffffde; }
.handoff-status>.icon { width: 25px; height: 25px; opacity: .45; }
.handoff-status b { display: block; font-size: 13px; font-weight: 500; color: #796a81; }
.handoff-status small { display: block; font-size: 10px; margin-top: 5px; color: #736c7a; }

.management-section { background: #191c23; border-block: 1px solid #2c3039; color: #fff; padding: 82px 0 86px; }
.management-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 43px; }
.management-card { padding: 27px 28px 24px; background: #252932; border: 1px solid #383d48; border-radius: 18px; }
.management-card-top { display: flex; align-items: center; justify-content: space-between; }
.management-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: #f4f3f8; }
.management-icon .icon { width: 23px; height: 23px; opacity: .55; }
.card-number { font: 11px Arial,sans-serif; color: #716e75; letter-spacing: 2px; }
.management-card h3 { margin: 22px 0 13px; font-size: 20px; font-weight: 600; }
.management-card>p { margin: 0; color: #736c79; font-size: 14px; line-height: 1.95; }
.account-preview { display: flex; flex-direction: column; gap: 8px; margin: 24px 0 4px; }
.account-preview>span { display: flex; align-items: center; padding: 7px 10px; gap: 9px; border: 1px solid #f0edf4; border-radius: 6px; font-size: 10px; color: #736b7a; }
.account-preview img { width: 15px; height: 15px; opacity: .6; }
.account-preview small { margin-left: auto; color: #687262; font-size: 9px; }
.phrase-preview { margin-top: 33px; display: flex; gap: 6px; flex-wrap: wrap; }
.phrase-preview>span { font-size: 10px; padding: 7px 10px; background: #f5f2fa; color: #746b80; border: 1px solid #eeebf3; border-radius: 5px; }
.phrase-preview>span:first-child { background: #fff6d7; border-color: #f3e8c7; color: #786e4d; }
.phrase-preview>div { display: flex; align-items: center; gap: 7px; border: 1px solid #eeeaf3; padding: 14px 9px; border-radius: 7px; color: #746c7b; font-size: 10px; width: 100%; margin-top: 10px; }
.phrase-preview .icon { width: 15px; height: 15px; opacity: .3; }
.phrase-preview>div>.icon:last-child { margin-left: auto; }
.team-preview { text-align: center; margin-top: 35px; }
.team-preview>div { display: flex; justify-content: center; }
.team-member { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; margin-left: -7px; border: 4px solid white; background: #ece7f7; color: #736b7e; font-size: 13px; }
.team-member:nth-child(2) { background: #f5e7de; color: #7c6c63; }
.team-member:nth-child(3) { background: #e6edf7; color: #676e7c; }
.team-member-ai { background: #ffefb7; }
.team-member-ai .icon { width: 24px; height: 24px; opacity: .45; }
.team-preview p { display: flex; align-items: center; justify-content: center; gap: 7px; color: #736c7a; font-size: 10px; margin-top: 15px; }
.team-preview .live-dot { width: 5px; height: 5px; }
.scenarios-section { padding: 88px 0; }
.scenario-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 34px; margin-top: 43px; }
.scenario-tabs { display: flex; flex-direction: column; gap: 12px; }
.scenario-tabs>button { padding: 24px; display: flex; align-items: center; gap: 15px; border: 1px solid #efebf3; background: #fff; border-radius: 11px; text-align: left; flex: 1; }
.scenario-tabs>button[aria-selected=true] { border-color: #e8c75e; background: #fff1b9; box-shadow: 0 5px 15px #a07d1410; }
.scenario-tab-icon { display: grid; place-items: center; width: 40px; height: 40px; background: #f5f1f9; border-radius: 11px; }
.scenario-tabs>button[aria-selected=true] .scenario-tab-icon { background: #fff0bf; }
.scenario-tab-icon .icon { width: 23px; height: 23px; opacity: .5; }
.scenario-tabs strong { display: block; font-size: 16px; font-weight: 500; }
.scenario-tabs small { display: block; font-size: 12px; color: #736b78; margin-top: 8px; }
.scenario-tabs>button>.icon { margin-left: auto; width: 18px; height: 18px; opacity: .3; }
.scenario-panel { border: 1px solid #ecdfbf; background: #fffaf0; border-radius: 20px; padding: 30px; box-shadow: 0 16px 40px -20px #785b2930; }
.scenario-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid #eee8dc; font-size: 13px; }
.scenario-label { color: #7c6d52; }
.scenario-indicator { display: flex; align-items: center; gap: 5px; color: #7a6d47; font-size: 11px; }
.scenario-indicator .icon { width: 15px; height: 15px; opacity: .5; }
.scenario-question { width: fit-content; max-width: 90%; margin: 25px 0 22px auto; border: 1px solid #f0ece2; background: #fff; border-radius: 10px; padding: 13px 16px; font-size: 13px; line-height: 1.85; color: #736d78; }
.scenario-answer { display: flex; gap: 9px; align-items: flex-start; }
.answer-avatar { width: 30px; height: 30px; display: grid; place-items: center; flex-shrink: 0; background: var(--yellow); border-radius: 8px; }
.answer-avatar .icon { width: 19px; height: 19px; opacity: .65; }
.scenario-answer p { background: #fff0be; color: #7e6d3e; font-size: 13px; line-height: 1.95; border-radius: 0 10px 10px 10px; padding: 15px 18px; margin: 0; }
.scenario-tags { display: flex; gap: 7px; flex-wrap: wrap; padding-left: 39px; margin-top: 22px; }
.scenario-tags>span { border: 1px solid #eddfb7; color: #7d6d46; border-radius: 5px; padding: 5px 8px; font-size: 10px; }
.scenario-caption { color: #746e64; font-size: 10px; text-align: right; margin: 18px 0 0; line-height: 1.8; }
.onboarding-section { padding: 10px 0 74px; }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 52px; margin-top: 45px; }
.steps article { display: flex; gap: 19px; padding: 23px 0; border-top: 1px solid #ebe5f0; }
.step-number { font: 600 32px Arial,sans-serif; color: #9b7711; line-height: 1.2; }
.steps h3 { font-size: 17px; font-weight: 500; margin: 0 0 13px; }
.steps p { font-size: 13px; line-height: 1.95; color: #756b7a; margin: 0; }
.setup-note { display: flex; justify-content: center; gap: 6px; align-items: center; font-size: 11px; color: #736d75; line-height: 1.8; margin: 18px 0 0; }
.setup-note .icon { width: 15px; height: 15px; opacity: .3; }
.faq-section { padding: 69px 0 86px; border-top: 1px solid #eee8f2; display: grid; grid-template-columns: .7fr 1.3fr; gap: 90px; }
.faq-section h2 { font-size: 32px; font-weight: 600; letter-spacing: -.5px; line-height: 1.6; margin: 16px 0; }
.faq-section>div>p { font-size: 14px; color: #746b79; }
.faq-list details { border-bottom: 1px solid #eee9f3; padding: 22px 0; }
.faq-list details:first-child { padding-top: 0; }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 17px; font-size: 15px; color: #736c79; font-weight: 500; line-height: 1.8; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .icon { width: 17px; height: 17px; opacity: .4; transition: transform .2s; }
.faq-list details[open] summary .icon { transform: rotate(180deg); }
.faq-list details p { font-size: 13px; color: #756a7a; line-height: 2; margin: 14px 27px 0 0; }
.cta-section { padding: 65px 0 72px; text-align: center; background: #ffda4b; border-block: 1px solid #f3c53b; }
.cta-label { display: inline-flex; align-items: center; gap: 8px; font: 500 10px Arial,sans-serif; letter-spacing: 2px; color: #7d6c43; }
.cta-label .icon { width: 18px; height: 18px; opacity: .4; }
.cta-section h2 { font-size: 36px; font-weight: 650; line-height: 1.5; letter-spacing: -.8px; margin: 19px 0 16px; }
.cta-section p { font-size: 15px; color: #786d5b; line-height: 1.9; margin: 0 0 29px; }
.cta-section .button { font-size: 15px; }
.footer { padding-block: 37px 24px; }
.footer-top { display: flex; align-items: center; gap: 25px; padding-bottom: 30px; }
.footer-top .brand { font-size: 20px; }
.footer-top .brand-icon { width: 35px; height: 35px; border-radius: 10px; }
.footer-top .brand-icon img { width: 23px; height: 23px; }
.footer-top .brand-ai { font-size: 19px; }
.footer-top .brand-service { font-size: 16px; }
.footer-top>p { font-size: 12px; color: #756c79; }
.footer-top>div { display: flex; gap: 27px; margin-left: auto; font-size: 12px; color: #746c7a; }
.footer-bottom { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; padding-top: 20px; border-top: 1px solid #f0eaf4; font-size: 10px; color: #736b75; }
.footer-bottom>.back-to-top { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 12px 20px; line-height: 1.8; }
.footer-legal a:hover { color: #8b691b; text-decoration: underline; }
.footer-bottom .icon { width: 12px; height: 12px; opacity: .25; }
.floating-demo { display: flex; align-items: center; gap: 8px; position: fixed; right: 20px; bottom: 23px; z-index: 20; padding: 13px 17px; border: 1px solid #eedba4; background: #fff8e3; border-radius: 12px; color: #876b2a; box-shadow: 0 7px 25px #76632612; font-size: 12px; }
.floating-demo .icon { width: 20px; height: 20px; opacity: .65; }
.floating-demo:hover { background: var(--yellow); }
dialog { width: calc(100% - 32px); max-width: 570px; max-height: calc(100dvh - 36px); padding: 28px; border: 1px solid #eeebdf; border-radius: 17px; color: var(--ink); box-shadow: 0 30px 100px #24193c36; }
dialog::backdrop { background: #25202e85; backdrop-filter: blur(5px); }
.dialog-heading { display: flex; justify-content: space-between; gap: 20px; }
.dialog-heading h2 { font-size: 23px; font-weight: 600; margin: 11px 0 0; }
.close-dialog { background: #f5f3f8; flex-shrink: 0; }
.close-dialog .icon { width: 20px; height: 20px; opacity: .5; }
.demo-explanation { color: #736c77; font-size: 12px; line-height: 1.9; margin: 17px 0; }
.demo-messages { height: 275px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; padding: 17px; background: #faf9fc; border: 1px solid #eeeaf3; border-radius: 10px; overflow-y: auto; scroll-behavior: smooth; }
.demo-bubble { max-width: 90%; background: #fff1bb; color: #7d6e42; font-size: 13px; line-height: 1.9; border-radius: 0 9px 9px 9px; padding: 12px 14px; white-space: pre-wrap; }
.demo-bubble.user { align-self: flex-end; background: white; border: 1px solid #e9e4f0; border-radius: 9px 0 9px 9px; color: #756b7d; }
.question-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0; }
.question-chips button { border: 1px solid #ece5f2; border-radius: 6px; padding: 7px 11px; background: white; font-size: 11px; color: #756a7c; }
.question-chips button:hover { background: #fff8df; border-color: #efdfa9; color: #806d32; }
#demo-form { display: flex; gap: 9px; }
#demo-input { border: 1px solid #e6deee; padding: 13px; border-radius: 8px; width: 100%; min-width: 0; font-size: 13px; color: #776981; }
#demo-input::placeholder { color: #736c78; }
#demo-form .button { padding: 11px 15px; }
#demo-form .button .icon { width: 20px; height: 20px; }
.reset-demo { display: flex; align-items: center; gap: 5px; margin: 15px auto 0; background: none; border: 0; padding: 0; color: #756c7b; font-size: 11px; }
.reset-demo .icon { width: 13px; height: 13px; opacity: .35; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
body.modal-open { overflow: hidden; }

/* Brand accents and depth. Motion respects the reduced-motion preference below. */
.nav-cta { background: var(--yellow); border-color: #eec632; font-weight: 600; }
.button-primary { color: #292718; font-weight: 600; box-shadow: 0 6px 0 -3px #d4a72d, 0 9px 20px #bd941523; }
.hero-actions .button-primary .icon { background: transparent; padding: 0; width: 20px; height: 20px; }
.button-outline { color: #3c3b34; border-color: #d2cbb7; background: #ffffffc9; }
.hero-atmosphere { filter: saturate(1.4); }
.bee-mascot { position: absolute; width: 222px; height: auto; right: 12px; top: -171px; z-index: 3; pointer-events: none; filter: drop-shadow(0 18px 12px #936d1722); animation: bee-hover 5s ease-in-out infinite; }
.platform-card { position: absolute; left: 10px; top: -81px; display: flex; align-items: center; gap: 12px; padding: 13px 18px 13px 13px; border: 1px solid #fff; border-radius: 14px; background: #ffffffcf; box-shadow: 0 8px 25px #8a681a14; transform: rotate(-4deg); }
.platform-card>span { display: grid; place-items: center; width: 39px; height: 39px; background: #252831; border-radius: 11px; }
.platform-card .icon { filter: invert(1); width: 22px; height: 22px; }
.platform-card strong { font-size: 12px; font-weight: 600; }
.platform-card small { display: block; font-size: 10px; color: #777265; margin-top: 6px; }
.product-callout { border-color: #ffe9a1; box-shadow: 0 9px 28px #84651e22; }
.chain-items>span .icon { padding: 9px; width: 44px; height: 44px; border-radius: 12px; background: #fff3c6; opacity: 1; }
.section-heading h2 { font-weight: 700; }
.feature-visual { box-shadow: inset 0 0 50px #ffffff50; transition: background-color .3s; }
.settings-card { transform: rotate(-2deg); box-shadow: 0 18px 28px -12px #76602040; }
.test-card { transform: rotate(1deg); box-shadow: 0 10px 20px -12px #70572d40; margin-left: 12px; }
.visual-chat, .lead-profile { box-shadow: 0 18px 30px -15px #4f3c6038; }
.management-section .section-eyebrow { color: #ffda61; }
.management-section .section-heading>p { color: #b3b8c3; }
.management-icon { background: #ffdc62; width: 46px; height: 46px; border-radius: 13px; }
.management-icon .icon { opacity: 1; }
.management-card { transition: transform .22s, border-color .22s, box-shadow .22s; }
.management-card:hover { transform: translateY(-6px); border-color: #817044; box-shadow: 0 18px 35px #00000020; }
.management-card>p, .team-preview p { color: #b8bdc8; }
.management-card .card-number { color: #979eae; }
.account-preview>span { background: #1e222a; border-color: #3d424e; color: #ced2dc; padding-block: 10px; }
.account-preview img, .phrase-preview .icon { filter: invert(1); opacity: .8; }
.account-preview small { color: #a2d2b0; }
.phrase-preview>span { background: #303541; border-color: #424957; color: #cdd2de; }
.phrase-preview>span:first-child { background: #514728; border-color: #756338; color: #ffe391; }
.phrase-preview>div { background: #1e222a; border-color: #3d424e; color: #c6cbd6; }
.team-member { border-color: #252932; }
.team-preview .live-dot { box-shadow: 0 0 0 3px #36473c; }
.scenario-tabs>button { transition: background .2s, border-color .2s, box-shadow .2s; }
.scenario-tabs>button:hover { border-color: #d9bd6c; }
.steps article { border-top: 3px solid #f2d774; }
.cta-label, .cta-section p { color: #5c4b22; }
.cta-section .button { background: #252831; border-color: #252831; color: #fff; box-shadow: 0 9px 20px #78601325; }
.cta-section .button .icon { background: transparent; filter: invert(1); padding: 0; width: 20px; height: 20px; }
.floating-demo { background: var(--yellow); color: #3d3317; border-color: #e5bf47; box-shadow: 0 7px 24px #66512428; }
@keyframes bee-hover { 0%,100% { transform: translateY(0) rotate(3deg); } 50% { transform: translateY(-8px) rotate(0); } }

@media (min-width: 1500px) {
  .wrap, .nav-wrap { max-width: 1260px; }
  .hero { padding-top: 78px; }
  .hero h1 { font-size: 62px; }
  .hero-description { font-size: 20px; }
  .product-stage { margin-top: 80px; }
  .workbench-body { height: 510px; grid-template-columns: 58px 220px minmax(0,1fr) 240px; }
  .message-bubble { font-size: 13px; }
  .customer-panel { padding-inline: 20px; }
  .customer-details>div, .customer-note p { font-size: 11px; }
}
@media (max-width: 1100px) {
  .wrap, .nav-wrap { width: calc(100% - 64px); }
  .nav-wrap { gap: 23px; }
  .nav-wrap nav { gap: 21px; }
  .brand { font-size: 21px; }
  .brand-ai { font-size: 21px; }
  .brand-service { font-size: 16px; }
  .nav-wrap nav a, .nav-cta { font-size: 12px; }
  .hero h1 { font-size: 45px; }
  .hero-description { font-size: 16px; }
  .workbench-body { grid-template-columns: 48px 184px minmax(0,1fr) 187px; }
  .workbench-breadcrumb { display: none; }
  .customer-panel { padding-inline: 13px; }
  .chat-header { padding-inline: 13px; }
  .chat-messages { padding-inline: 13px; }
  .message-bubble { font-size: 11px; padding: 10px 11px; }
  .conversation { padding-inline: 9px; gap: 7px; }
  .conversation .avatar { width: 28px; height: 28px; }
  .conversation-title { font-size: 11px; }
  .conversation-title time { font-size: 8px; }
  .product-assurance { gap: 20px; }
  .product-assurance small { font-size: 9px; }
  .chain-items { gap: 23px; }
  .chain-items>span { font-size: 18px; gap: 8px; }
  .chain-items>span .icon { width: 25px; height: 25px; }
  .section-heading h2 { font-size: 31px; }
  .feature-panel { gap: 44px; }
  .feature-copy h3 { font-size: 26px; }
  .feature-copy>p { font-size: 14px; }
  .feature-copy li { font-size: 13px; }
  .feature-visual { padding: 23px; }
  .settings-card { padding: 20px; }
  .settings-card-head h4 { font-size: 19px; }
  .management-grid { gap: 17px; }
  .management-card { padding: 23px 21px 20px; }
  .management-card h3 { font-size: 18px; }
  .management-card>p { font-size: 13px; }
  .phrase-preview { gap: 4px; }
  .phrase-preview>span { font-size: 9px; padding: 7px; }
  .phrase-preview>div { font-size: 9px; gap: 4px; }
  .scenario-layout { gap: 26px; }
  .scenario-tabs>button { padding: 20px; }
  .scenario-panel { padding: 24px; }
  .steps { gap: 28px; }
  .steps article { gap: 14px; }
  .steps h3 { font-size: 16px; }
  .steps p { font-size: 12px; }
  .faq-section { gap: 60px; }
}
@media (max-width: 850px) {
  .platform-card { display: none; }
  .bee-mascot { width: 168px; top: -126px; right: 0; }
  .wrap, .nav-wrap { width: calc(100% - 44px); }
  .site-header { height: 68px; }
  .nav-wrap { gap: 10px; }
  .brand { font-size: 20px; }
  .brand-icon { width: 36px; height: 36px; border-radius: 10px; }
  .brand-icon img { width: 24px; height: 24px; }
  .brand-ai { font-size: 20px; }
  .brand-service { font-size: 15px; }
  .nav-wrap nav { gap: 16px; }
  .nav-wrap nav a { font-size: 11px; }
  .nav-wrap nav .nav-home { display: none; }
  .nav-cta { padding: 9px 12px; gap: 8px; margin-left: 8px; font-size: 11px; }
  .hero { padding-top: 48px; }
  .hero h1 { font-size: 38px; letter-spacing: -1.3px; }
  .hero-description { font-size: 15px; }
  .hero-actions .button { font-size: 14px; padding: 15px 22px; }
  .hero-actions .button-primary { min-width: 197px; }
  .hero-actions .button-outline { min-width: 160px; }
  .product-stage { margin-top: 65px; }
  .hero-atmosphere { height: 880px; top: -50px; }
  .product-callout { padding: 11px 20px 11px 12px; top: -29px; }
  .product-callout strong { font-size: 12px; }
  .product-callout small { font-size: 10px; }
  .callout-icon { width: 36px; height: 36px; border-radius: 10px; }
  .callout-icon .icon { width: 21px; height: 21px; }
  .workbench-titlebar { height: 48px; padding-inline: 15px; }
  .workbench-name { font-size: 11px; }
  .workspace-demo-label { font-size: 9px; }
  .workbench-body { grid-template-columns: 45px 181px minmax(0,1fr); height: 458px; }
  .customer-panel { display: none; }
  .chat-header { padding-inline: 17px; }
  .chat-messages { padding-inline: 17px; }
  .message-bubble { font-size: 12px; }
  .product-assurance { gap: 22px; flex-wrap: wrap; row-gap: 12px; }
  .product-assurance>span { font-size: 10px; }
  .product-assurance small { flex-basis: 100%; text-align: center; font-size: 9px; }
  .service-chain { padding: 47px 0 48px; }
  .service-chain>p { font-size: 14px; }
  .chain-items { gap: 17px; }
  .chain-items>span { gap: 7px; font-size: 15px; }
  .chain-items>span .icon { width: 21px; height: 21px; }
  .chain-items>.chain-arrow { width: 17px; height: 17px; }
  .ai-features { padding: 65px 0; }
  .section-heading h2 { font-size: 29px; }
  .section-heading>p { font-size: 14px; }
  .feature-tabs { margin-top: 34px; }
  .feature-tabs>button { font-size: 13px; gap: 7px; padding-block: 17px; }
  .feature-tabs>button .icon { width: 18px; height: 18px; }
  .feature-panel { gap: 30px; grid-template-columns: 1fr 1fr; padding-top: 34px; }
  .feature-copy h3 { font-size: 24px; }
  .feature-copy>p { font-size: 13px; }
  .feature-copy li { font-size: 12px; padding-left: 23px; }
  .feature-copy li:before { width: 15px; height: 15px; }
  .feature-symbol { margin-bottom: 17px; }
  .feature-number { right: 0; }
  .feature-visual { min-height: 380px; padding: 18px; gap: 13px; border-radius: 15px; }
  .settings-card { padding: 16px; }
  .settings-card-head { gap: 8px; margin-bottom: 19px; }
  .settings-card-head>span { width: 33px; height: 33px; border-radius: 9px; }
  .settings-card-head .icon { width: 19px; height: 19px; }
  .settings-card-head h4 { font-size: 16px; }
  .settings-card-head>img { display: none; }
  .settings-field { padding: 9px; }
  .settings-field b { font-size: 10px; }
  .settings-fields { gap: 8px; }
  .settings-rule { gap: 4px; }
  .settings-rule span { font-size: 9px; padding: 5px 6px; }
  .test-card { padding: 11px; gap: 7px; }
  .test-card p { font-size: 10px; }
  .visual-chat { padding: 15px; }
  .visual-bubble { font-size: 11px; }
  .visual-chat-title { font-size: 12px; }
  .visual-chat-title small { font-size: 9px; }
  .management-section { padding: 65px 0; }
  .management-grid { grid-template-columns: 1fr; gap: 17px; margin-top: 34px; }
  .management-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; padding: 24px; }
  .management-card-top { grid-column: 1; }
  .management-card h3 { grid-column: 1; margin-top: 17px; }
  .management-card>p { grid-column: 1; font-size: 13px; }
  .management-card>.account-preview, .management-card>.phrase-preview, .management-card>.team-preview { grid-column: 2; grid-row: 1/4; align-self: center; margin: 0; }
  .phrase-preview>span { font-size: 11px; }
  .phrase-preview>div { font-size: 11px; padding: 16px 10px; }
  .account-preview>span { font-size: 12px; padding: 10px; }
  .team-member { width: 54px; height: 54px; }
  .team-preview p { font-size: 11px; }
  .scenarios-section { padding: 65px 0; }
  .scenario-layout { grid-template-columns: .8fr 1.2fr; gap: 19px; }
  .scenario-tabs>button { gap: 11px; padding: 18px 15px; }
  .scenario-tabs strong { font-size: 14px; }
  .scenario-tabs small { font-size: 10px; }
  .scenario-tabs>button>.icon { display: none; }
  .scenario-tab-icon { width: 33px; height: 33px; border-radius: 9px; }
  .scenario-tab-icon .icon { width: 20px; height: 20px; }
  .scenario-panel { padding: 21px; }
  .scenario-panel-header { font-size: 11px; }
  .scenario-indicator { font-size: 9px; }
  .scenario-question, .scenario-answer p { font-size: 11px; }
  .scenario-answer p { padding: 13px; }
  .scenario-tags { padding-left: 0; gap: 5px; }
  .scenario-tags>span { font-size: 9px; padding: 4px 6px; }
  .scenario-caption { font-size: 9px; }
  .onboarding-section { padding-bottom: 53px; }
  .steps { gap: 21px; margin-top: 35px; }
  .steps article { flex-direction: column; }
  .step-number { font-size: 27px; }
  .steps h3 { font-size: 15px; }
  .steps p { font-size: 12px; }
  .setup-note { font-size: 10px; }
  .faq-section { gap: 35px; padding: 53px 0 62px; grid-template-columns: .7fr 1.3fr; }
  .faq-section h2 { font-size: 27px; }
  .faq-section>div>p { font-size: 12px; line-height: 1.9; }
  .faq-list summary { font-size: 13px; }
  .faq-list details p { font-size: 12px; }
  .cta-section { padding: 54px 0 60px; }
  .cta-section h2 { font-size: 29px; }
  .cta-section p { font-size: 13px; }
  .footer-top { gap: 17px; flex-wrap: wrap; }
  .footer-top>p { margin-left: auto; }
  .footer-top>div { flex-basis: 100%; justify-content: flex-start; }
  .floating-demo { right: 14px; bottom: 16px; padding: 11px 13px; font-size: 11px; }
}
@media (max-width: 600px) {
  .bee-mascot { width: 119px; top: -109px; right: -7px; }
  .hero h1 span { width: fit-content; margin: 5px auto 0; padding-inline: 12px; }
  .product-stage .product-callout { left: 0; transform: none; padding-right: 10px; gap: 7px; }
  .product-callout .callout-icon { width: 26px; height: 30px; }
  .product-callout strong { letter-spacing: -.3px; }
  .feature-tabs { padding: 4px; border-radius: 12px; }
  .feature-tabs>button { border-radius: 8px; }
  .wrap, .nav-wrap { width: calc(100% - 36px); }
  .nav-wrap nav { display: none; position: absolute; top: 68px; left: 0; right: 0; padding: 24px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px #00000005; }
  .nav-wrap nav.open { display: flex; gap: 25px; flex-wrap: wrap; }
  .nav-wrap nav a, .nav-wrap nav .nav-home { display: inline-flex; font-size: 14px; }
  .menu-toggle { display: inline-flex; width: 30px; }
  .nav-cta { margin-left: auto; font-size: 11px; padding: 9px 10px; }
  .nav-cta .icon { width: 14px; height: 14px; }
  .brand { font-size: 18px; gap: 7px; }
  .brand-ai { font-size: 18px; margin-left: 4px; }
  .brand-service { font-size: 14px; margin-left: 4px; }
  .brand-icon { width: 32px; height: 32px; border-radius: 9px; }
  .brand-icon img { width: 23px; height: 23px; }
  .hero { padding-top: 35px; }
  .hero-eyebrow { font-size: 10px; gap: 7px; }
  .hero-eyebrow .icon { width: 16px; height: 16px; }
  .hero-eyebrow>span:last-child, .eyebrow-separator { display: none; }
  .hero h1 { font-size: 34px; line-height: 1.48; letter-spacing: -1px; margin: 20px 0 17px; }
  .hero h1 span { display: block; }
  .hero-description { font-size: 14px; max-width: 340px; margin-inline: auto; line-height: 1.95; }
  .hero-actions { gap: 11px; margin-top: 25px; }
  .hero-actions .button { font-size: 13px; padding: 14px 17px; gap: 12px; }
  .hero-actions .button-primary { min-width: 0; }
  .hero-actions .button-outline { min-width: 0; }
  .hero-actions .icon { width: 17px; height: 17px; }
  .hero-note { font-size: 10px; margin-top: 16px; }
  .hero-atmosphere { height: 830px; top: 15px; object-position: center bottom; }
  .product-stage { margin-top: 104px; }
  .product-callout { border-width: 3px; padding: 9px 17px 9px 10px; gap: 9px; top: -66px; border-radius: 12px; }
  .product-callout strong { font-size: 11px; }
  .product-callout small { font-size: 9px; margin-bottom: 4px; }
  .callout-icon { width: 32px; height: 32px; }
  .callout-icon .icon { width: 19px; height: 19px; }
  .workbench { border-radius: 12px; }
  .workbench-titlebar { padding-inline: 12px; height: 47px; gap: 7px; }
  .workbench-name { font-size: 10px; gap: 6px; }
  .workbench-titlebar>.icon { display: none; }
  .workspace-demo-label { font-size: 8px; padding: 3px 5px; }
  .workbench-body { grid-template-columns: 1fr; height: 458px; }
  .workspace-rail, .inbox { display: none; }
  .chat-header { height: 60px; padding: 0 15px; }
  .chat-header b { font-size: 12px; }
  .chat-header small { font-size: 9px; }
  .ai-badge { font-size: 9px; padding: 5px; cursor: pointer; }
  .context-banner { font-size: 9px; padding: 9px 14px; }
  .chat-messages { padding: 15px; }
  .message-bubble { font-size: 12px; }
  .message-time { font-size: 9px; margin-bottom: 13px; }
  .workspace-compose { height: 77px; padding-inline: 13px; }
  .workspace-compose>input { font-size: 10px; }
  .compose-bottom>span { font-size: 8px; }
  .product-assurance { gap: 15px; padding-top: 19px; row-gap: 12px; }
  .product-assurance>span { font-size: 9px; gap: 4px; }
  .product-assurance .icon { width: 12px; height: 12px; }
  .product-assurance small { font-size: 8px; }
  .service-chain { padding: 40px 0 42px; }
  .service-chain>p { font-size: 13px; margin-bottom: 23px; }
  .chain-items { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 320px; margin-inline: auto; }
  .chain-items>span { font-size: 16px; justify-content: center; gap: 10px; }
  .chain-items>span .icon { width: 23px; height: 23px; }
  .chain-items>.chain-arrow { display: none; }
  .ai-features { padding: 52px 0 56px; }
  .section-eyebrow { font-size: 9px; letter-spacing: 1.5px; }
  .section-heading h2 { font-size: 27px; line-height: 1.5; margin: 13px 0 15px; }
  .mobile-break { display: block; }
  .section-heading>p { font-size: 13px; line-height: 1.9; }
  .feature-tabs { margin-top: 28px; gap: 0; }
  .feature-tabs>button { flex-direction: column; gap: 9px; padding: 13px 2px; font-size: 11px; border-bottom-width: 2px; }
  .feature-tabs>button .icon { width: 20px; height: 20px; }
  .feature-panel { grid-template-columns: 1fr; padding-top: 27px; gap: 23px; }
  .feature-copy { padding-top: 0; }
  .feature-symbol { width: 39px; height: 39px; border-radius: 10px; margin-bottom: 16px; }
  .feature-symbol .icon { width: 22px; height: 22px; }
  .feature-number { top: 12px; right: 4px; font-size: 10px; }
  .feature-copy h3 { font-size: 26px; margin-bottom: 13px; }
  .feature-copy>p { font-size: 14px; line-height: 1.95; }
  .feature-copy ul { margin: 22px 0; }
  .feature-copy li { font-size: 13px; margin-bottom: 10px; }
  .feature-demo-link { font-size: 13px; }
  .feature-visual { min-height: 380px; padding: 23px; gap: 16px; }
  .settings-card { padding: 20px; }
  .settings-card-head { gap: 11px; }
  .settings-card-head>span { width: 38px; height: 38px; }
  .settings-card-head h4 { font-size: 20px; }
  .settings-card-head small { font-size: 10px; }
  .settings-card-head>img { display: block; }
  .settings-fields { gap: 10px; }
  .settings-field { padding: 11px; }
  .settings-field b { font-size: 12px; }
  .settings-rule span { font-size: 10px; padding: 5px 7px; }
  .test-card { padding: 12px; }
  .test-card p { font-size: 11px; }
  .visual-chat { padding: 18px; }
  .visual-bubble { font-size: 12px; }
  .management-section { padding: 52px 0; }
  .management-grid { gap: 16px; margin-top: 28px; }
  .management-card { display: block; padding: 25px; }
  .management-card h3 { font-size: 20px; margin: 20px 0 13px; }
  .management-card>p { font-size: 14px; }
  .management-card>.account-preview, .management-card>.phrase-preview, .management-card>.team-preview { margin-top: 26px; }
  .phrase-preview { gap: 7px; }
  .phrase-preview>span { font-size: 11px; padding: 7px 11px; }
  .phrase-preview>div { font-size: 11px; }
  .team-preview { padding-bottom: 8px; }
  .scenarios-section { padding: 52px 0; }
  .scenarios-section .section-heading h2 { font-size: 25px; }
  .scenario-layout { grid-template-columns: 1fr; margin-top: 28px; gap: 18px; }
  .scenario-tabs { flex-direction: row; gap: 8px; }
  .scenario-tabs>button { flex-direction: column; gap: 9px; text-align: center; padding: 13px 7px; }
  .scenario-tab-icon { background: transparent; width: 28px; height: 28px; }
  .scenario-tabs>button[aria-selected=true] .scenario-tab-icon { background: transparent; }
  .scenario-tabs strong { font-size: 12px; }
  .scenario-tabs small { display: none; }
  .scenario-panel { padding: 22px 18px; }
  .scenario-panel-header { font-size: 12px; }
  .scenario-question, .scenario-answer p { font-size: 12px; }
  .scenario-tags>span { font-size: 10px; }
  .scenario-caption { font-size: 9px; text-align: left; }
  .onboarding-section { padding: 0 0 48px; }
  .onboarding-section .section-heading h2 { font-size: 25px; max-width: 310px; margin-inline: auto; }
  .steps { grid-template-columns: 1fr; gap: 0; margin-top: 27px; }
  .steps article { flex-direction: row; padding: 24px 0; gap: 19px; }
  .steps h3 { font-size: 17px; }
  .steps p { font-size: 13px; line-height: 1.9; }
  .step-number { font-size: 30px; }
  .setup-note { text-align: left; align-items: flex-start; font-size: 10px; margin-top: 0; }
  .setup-note .icon { margin-top: 2px; }
  .faq-section { padding-block: 47px 55px; grid-template-columns: 1fr; gap: 30px; }
  .faq-section h2 { font-size: 27px; margin: 13px 0; }
  .faq-section h2 br { display: none; }
  .faq-section>div>p { margin-bottom: 0; }
  .faq-list summary { font-size: 14px; }
  .faq-list details p { font-size: 13px; }
  .cta-section { padding: 47px 0 51px; }
  .cta-label { font-size: 9px; letter-spacing: 1.5px; }
  .cta-section h2 { font-size: 29px; max-width: 300px; margin-inline: auto; }
  .cta-section p { font-size: 13px; max-width: 310px; margin-inline: auto; }
  .cta-section .button { font-size: 14px; }
  .footer { padding-top: 29px; }
  .footer-top { gap: 16px; padding-bottom: 24px; }
  .footer-top .brand { font-size: 18px; }
  .footer-top .brand-ai { font-size: 18px; }
  .footer-top .brand-service { font-size: 14px; }
  .footer-top>p { font-size: 10px; margin: 0; }
  .footer-top>div { font-size: 11px; gap: 25px; }
  .footer-bottom { flex-wrap: wrap; gap: 13px; font-size: 9px; padding-top: 17px; }
  .footer-legal { order: 3; flex-basis: 100%; gap: 10px 16px; }
  .floating-demo { right: 12px; bottom: 16px; border-radius: 50%; width: 48px; height: 48px; padding: 0; justify-content: center; }
  .floating-demo>span { display: none; }
  .floating-demo .icon { width: 24px; height: 24px; }
  dialog { padding: 23px 19px; }
  .dialog-heading h2 { font-size: 20px; }
  .dialog-heading { gap: 10px; }
  .demo-messages { height: 255px; padding: 14px; }
  .demo-bubble { font-size: 12px; padding: 11px 13px; }
  .demo-explanation { font-size: 11px; }
  .question-chips button { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html, .demo-messages { scroll-behavior: auto; }
  *, *:before, *:after { transition: none !important; animation: none !important; }
}

/* Primary abstract dialogue brand mark. */
.brand-icon { background: transparent; }
.brand-icon img.site-logo { width: 100%; height: 100%; object-fit: contain; }

/* Channel entry points share one service workspace. */
.conversation-meta { display: flex; align-items: center; gap: 6px; margin-top: 7px; }
.conversation-meta .conversation-badge { margin: 0; white-space: nowrap; }
.conversation-channel { display: flex; align-items: center; gap: 4px; margin: 0; font-size: 9px; line-height: 1.4; color: #6f6e74; }
.conversation-channel .icon { width: 12px; height: 12px; }
.channels-section { padding: 80px 0 16px; }
.channel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.channel-card { min-width: 0; padding: 30px; border: 1px solid #eae7dd; border-radius: 20px; background: #fffdf7; }
.channel-card:last-child { background: #f8f9fb; border-color: #e6e8ee; }
.channel-card-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.channel-symbol { display: grid; place-items: center; flex-shrink: 0; width: 104px; height: 104px; margin: -8px 0 -4px -8px; }
.channel-symbol img { display: block; width: 104px; height: 104px; object-fit: contain; }

.channel-label { font: 10px Arial,sans-serif; letter-spacing: 1.4px; color: #79715c; }
.channel-card h3 { font-size: 24px; margin: 24px 0 12px; letter-spacing: -.5px; }
.channel-card>p { font-size: 14px; line-height: 1.95; color: #6e6e77; margin: 0 0 24px; }
.website-preview, .social-preview { min-height: 216px; border: 1px solid #e8e5dc; border-radius: 12px; background: #fff; box-shadow: 0 12px 24px -16px #74603230; overflow: hidden; }
.website-preview-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #eeece4; font-size: 12px; }
.website-preview-bar small { font-size: 10px; color: #77746c; }
.website-preview-content { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px; }
.online-greeting { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.website-preview-content>span+span { font-size: 12px; color: #726e66; }
.website-preview-content .button { padding: 10px 16px; font-size: 12px; margin-top: 4px; gap: 12px; }
.website-preview-content .button .icon { width: 17px; height: 17px; }
.social-preview { padding: 20px; }
.social-preview-account { display: flex; align-items: center; gap: 10px; }
.social-icon { display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; background: #000; overflow: hidden; }
.social-icon .social-brand-image { display: block; width: 40px; height: 40px; max-width: none; object-fit: cover; border-radius: 11px; }
.social-preview-account strong { font-size: 12px; font-weight: 600; }
.social-preview-account small { display: block; font-size: 10px; color: #777680; margin-top: 4px; }
.social-preview-account>.conversation-badge { margin: 0 0 0 auto; }
.social-preview-message, .social-preview-reply { width: fit-content; max-width: 95%; padding: 12px 14px; font-size: 12px; line-height: 1.8; border-radius: 9px; }
.social-preview-message { background: #f3f4f7; margin: 20px 0 14px; }
.social-preview-reply { background: #fff1bd; margin-left: auto; }
.channel-tags { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 24px; color: #716b5b; font-size: 11px; }
.channel-note { text-align: center; color: #77716a; font-size: 11px; line-height: 1.8; margin: 20px 0 0; }
@media (max-width: 850px) {
  .channels-section { padding-top: 64px; }
  .channel-grid { gap: 16px; }
  .channel-card { padding: 22px; }
  .channel-label { font-size: 8px; letter-spacing: .6px; }
  .channel-card h3 { font-size: 22px; }
  .channel-card>p { font-size: 13px; }
  .social-preview { padding: 14px; }
  .social-preview-account>.conversation-badge { display: none; }
}
@media (max-width: 600px) {
  .channels-section { padding-top: 48px; }
  .channel-grid { grid-template-columns: 1fr; margin-top: 28px; }
  .channel-card h3 { margin-top: 20px; }
  .channel-label { font-size: 9px; }
  .channel-tags { font-size: 10px; gap: 8px 12px; }
  .channel-note { text-align: left; font-size: 10px; }
  .hero-description { max-width: 330px; }
}