:root {
  --blue: #315fa8;
  --blue-dark: #193b72;
  --blue-soft: #eef4ff;
  --orange: #e87336;
  --green: #1d916f;
  --ink: #17243a;
  --muted: #6f7b8e;
  --line: #dfe5ee;
  --paper: #f4f6f9;
  --white: #fff;
  --shadow: 0 22px 65px rgba(24, 43, 73, .11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: #fff; font-family: 'Varela Round', 'PingFang SC', 'Microsoft YaHei', sans-serif; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
.page-container { width: min(1180px, calc(100% - 40px)); margin-right: auto; margin-left: auto; }

.demo-hero { position: relative; overflow: hidden; padding: 62px 0 115px; background: radial-gradient(circle at 77% 18%, rgba(90, 142, 255, .3), transparent 27%), linear-gradient(130deg, #10233f 0%, #1d3f72 60%, #2b5ca5 100%); color: #fff; }
.demo-hero:after { position: absolute; right: -80px; bottom: -165px; width: 520px; height: 520px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; content: ''; box-shadow: 0 0 0 65px rgba(255,255,255,.025), 0 0 0 130px rgba(255,255,255,.018); }
.demo-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.3fr .7fr; gap: 70px; align-items: center; }
.eyebrow { color: #8eb4ff; font-size: 12px; font-weight: 800; letter-spacing: .14em; }
.demo-hero h1 { margin: 13px 0 17px; color: #fff; font-family: 'Montserrat', 'PingFang SC', sans-serif; font-size: clamp(40px, 5.5vw, 64px); line-height: 1.08; letter-spacing: -.05em; }
.demo-hero h1 em { color: #ffad7f; font-style: normal; }
.demo-hero-copy > p { max-width: 720px; margin: 0; color: rgba(255,255,255,.76); font-size: 17px; line-height: 1.85; }
.hero-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero-badges span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; background: rgba(255,255,255,.07); color: rgba(255,255,255,.86); font-size: 13px; }
.hero-badges i { margin-right: 5px; color: #83e3c6; }
.hero-demo-card { padding: 26px; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: rgba(255,255,255,.09); box-shadow: inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(13px); }
.hero-agent { display: flex; align-items: center; gap: 12px; }
.hero-agent > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.13); color: #9fc0ff; }
.hero-agent strong, .hero-agent small { display: block; }
.hero-agent strong { font-size: 15px; }
.hero-agent small { margin-top: 3px; color: rgba(255,255,255,.56); font-size: 12px; }
.hero-agent small i { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: #55d7ad; }
.hero-demo-card > p { margin: 22px 0; padding: 16px; border-radius: 14px 14px 14px 4px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); font-size: 13px; line-height: 1.75; }
.hero-demo-card > div:last-child { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 8px; align-items: baseline; color: rgba(255,255,255,.52); font-size: 11px; }
.hero-demo-card > div:last-child strong { color: #fff; font-size: 15px; }

.demo-workspace-section { position: relative; z-index: 3; margin-top: -66px; padding-bottom: 80px; }
.demo-alert { margin-bottom: 14px; padding: 13px 16px; border: 1px solid #f1ccd2; border-radius: 12px; background: #fff1f3; color: #ad3548; font-size: 14px; }
.demo-alert.success { border-color: #bfe4d7; background: #effbf7; color: #187356; }
.demo-workspace { display: grid; grid-template-columns: 250px minmax(450px, 1fr) 305px; gap: 16px; align-items: stretch; }
.demo-panel { min-width: 0; border: 1px solid rgba(222,228,237,.95); border-radius: 20px; background: #fff; box-shadow: var(--shadow); }
.setup-panel, .insight-panel { padding: 22px; }
.panel-title { display: flex; gap: 11px; align-items: center; margin-bottom: 20px; }
.panel-title > span { display: grid; place-items: center; flex: 0 0 auto; width: 35px; height: 35px; border-radius: 11px; background: var(--blue-soft); color: var(--blue); font-size: 12px; font-weight: 800; }
.panel-title h2, .panel-title p { margin: 0; }
.panel-title h2 { font-size: 19px; }
.panel-title p { margin-top: 3px; color: #8a94a3; font-size: 12px; }
fieldset { min-width: 0; margin: 0 0 17px; padding: 0; border: 0; }
legend { margin-bottom: 9px; color: #526074; font-size: 13px; font-weight: 750; }
.role-options { display: grid; gap: 8px; }
.role-option { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; color: #4b586c; text-align: left; }
.role-option strong, .role-option small { display: block; }
.role-option strong { font-size: 14px; }
.role-option small { margin-top: 3px; color: #929ba9; font-size: 11px; line-height: 1.5; }
.role-option.active { border-color: #7ca2e3; background: var(--blue-soft); color: var(--blue); box-shadow: 0 0 0 2px rgba(49,95,168,.08); }
.platform-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.platform-option { height: 40px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: #596679; font-size: 13px; font-weight: 700; }
.platform-option.active { border-color: var(--blue); background: var(--blue); color: #fff; }
.product-options { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.product-option { min-height: 49px; padding: 7px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: left; }
.product-option i { display: block; width: 18px; height: 3px; margin-bottom: 5px; border-radius: 4px; background: var(--product-accent); }
.product-option strong { display: block; overflow: hidden; color: #4e5b6e; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.product-option span { display: block; margin-top: 2px; color: #99a1ad; font-size: 10px; }
.product-option.active { border-color: var(--product-accent); background: color-mix(in srgb, var(--product-accent) 8%, #fff); box-shadow: 0 0 0 2px color-mix(in srgb, var(--product-accent) 11%, transparent); }
.setup-panel.controls-locked button[data-selection] { cursor: not-allowed; opacity: .55; }
.product-brief { padding: 13px; border-radius: 12px; background: #f6f8fb; }
.product-brief strong, .product-brief small { display: block; }
.product-brief strong { font-size: 14px; }
.product-brief small { margin-top: 2px; color: #8994a4; font-size: 11px; }
.product-brief ul { margin: 10px 0 0; padding: 9px 0 0; border-top: 1px solid #e5e9ef; list-style: none; }
.product-brief li { margin: 5px 0; color: #697587; font-size: 11px; line-height: 1.55; }
.product-brief li:before { margin-right: 6px; color: var(--green); content: '✓'; font-weight: 900; }
.quota-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 13px; color: #8a94a3; font-size: 11px; }
.quota-row button { padding: 0; border: 0; background: transparent; color: var(--blue); font-size: 11px; }

.chat-panel { display: flex; min-height: 700px; overflow: hidden; flex-direction: column; }
.chat-header { display: flex; align-items: center; min-height: 70px; padding: 0 19px; border-bottom: 1px solid #e9edf2; background: #fff; }
.agent-avatar { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 41px; height: 41px; margin-right: 11px; border-radius: 13px; background: linear-gradient(145deg,#315fa8,#5e8fdf); color: #fff; }
.agent-avatar span { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border: 2px solid #fff; border-radius: 50%; background: #2ab383; }
.chat-header strong, .chat-header small { display: block; }
.chat-header strong { font-size: 15px; }
.chat-header small { margin-top: 3px; color: #8d97a6; font-size: 11px; }
.turn-counter { margin-left: auto; padding: 6px 9px; border-radius: 999px; background: #f1f4f8; color: #667387; font-size: 11px; font-weight: 700; }
.chat-messages { flex: 1; min-height: 420px; max-height: 540px; padding: 21px 18px; overflow-y: auto; background: linear-gradient(180deg,#f7f9fc,#f2f5f9); scroll-behavior: smooth; }
.message { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 17px; }
.message > div:last-child { min-width: 0; max-width: 82%; }
.message-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 29px; height: 29px; border-radius: 9px; background: #dfe9f8; color: var(--blue); font-size: 11px; }
.speaker { display: block; margin: 0 0 5px 2px; color: #929baa; font-size: 10px; }
.message p { margin: 0; padding: 11px 13px; border: 1px solid #e1e7ef; border-radius: 4px 14px 14px 14px; background: #fff; color: #435064; font-size: 14px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.buyer-message { justify-content: flex-end; }
.buyer-message > div:last-child { display: flex; align-items: flex-end; flex-direction: column; }
.buyer-message .message-avatar { order: 2; background: #dce8fb; }
.buyer-message p { border: 0; border-radius: 14px 4px 14px 14px; background: var(--blue); color: #fff; }
.typing p { display: flex; gap: 4px; align-items: center; min-width: 54px; min-height: 40px; }
.typing p i { width: 6px; height: 6px; border-radius: 50%; background: #93a0b2; animation: typing 1s infinite ease-in-out; }
.typing p i:nth-child(2) { animation-delay: .14s; }
.typing p i:nth-child(3) { animation-delay: .28s; }
@keyframes typing { 0%,70%,100% { opacity: .35; transform: translateY(0); } 35% { opacity: 1; transform: translateY(-3px); } }
.chat-controls, .observer-controls { padding: 13px 16px 15px; border-top: 1px solid #e5e9ef; background: #fff; }
.quick-questions { display: flex; gap: 6px; margin-bottom: 10px; overflow-x: auto; scrollbar-width: none; }
.quick-questions::-webkit-scrollbar { display: none; }
.quick-questions button { flex: 0 0 auto; padding: 7px 9px; border: 1px solid #dbe2eb; border-radius: 999px; background: #fff; color: #617086; font-size: 11px; white-space: nowrap; }
.quick-questions button:hover { border-color: #8eace0; color: var(--blue); }
.chat-form { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 9px; align-items: end; padding: 7px; border: 1px solid #cfd8e5; border-radius: 13px; background: #fff; transition: .18s; }
.chat-form:focus-within { border-color: #7ea2df; box-shadow: 0 0 0 3px rgba(49,95,168,.08); }
.chat-form textarea { min-height: 42px; max-height: 90px; padding: 8px; resize: none; border: 0; outline: 0; color: #344156; font-size: 13px; line-height: 1.55; }
.chat-form button { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 11px; background: var(--blue); color: #fff; }
.chat-form button:disabled { cursor: wait; opacity: .55; }
.composer-note { display: flex; justify-content: space-between; margin-top: 6px; color: #9aa2ae; font-size: 10px; }
.observer-controls > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.observer-controls strong { font-size: 13px; }
.observer-controls span { color: #8e98a7; font-size: 11px; }
.observer-controls > button { width: 100%; height: 43px; margin: 10px 0; border: 0; border-radius: 11px; background: linear-gradient(135deg,var(--orange),#f18b55); color: #fff; font-size: 13px; font-weight: 800; }
.observer-controls > button i { margin-right: 6px; }
.chat-complete { padding: 14px 16px; border-top: 1px solid #dceae5; background: #f0fbf7; }
.chat-complete, .chat-complete > div { display: flex; align-items: center; gap: 10px; }
.chat-complete > div { margin-right: auto; }
.chat-complete > div > i { color: var(--green); font-size: 23px; }
.chat-complete strong, .chat-complete small { display: block; }
.chat-complete strong { font-size: 13px; }
.chat-complete small { margin-top: 2px; color: #668276; font-size: 10px; }
.chat-complete button { padding: 8px 10px; border: 0; border-radius: 8px; background: var(--green); color: #fff; font-size: 11px; white-space: nowrap; }

.speed-card { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 13px; background: linear-gradient(135deg,#172a47,#294b7a); color: #fff; }
.speed-card span, .speed-card strong { display: block; }
.speed-card span { color: rgba(255,255,255,.6); font-size: 11px; }
.speed-card strong { margin-top: 4px; font-size: 22px; }
.speed-card > b { padding: 6px 8px; border-radius: 7px; background: rgba(255,255,255,.1); color: #9bc2ff; font-size: 10px; }
.score-list { display: grid; gap: 12px; margin: 18px 0; }
.score-item > div { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.score-item span { color: #606d80; font-size: 12px; }
.score-item strong { font-size: 14px; }
.score-item > i { display: block; height: 6px; overflow: hidden; border-radius: 8px; background: #edf0f4; }
.score-item > i b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,#5e87d0,#315fa8); transition: width .5s ease; }
.score-item:nth-child(2) > i b { background: linear-gradient(90deg,#45a58b,#21806a); }
.score-item:nth-child(3) > i b { background: linear-gradient(90deg,#ef9a6e,#e87336); }
.insight-block { margin-top: 13px; padding: 13px; border: 1px solid #e5e9ef; border-radius: 12px; }
.insight-block > span { display: block; margin-bottom: 8px; color: #8b95a4; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.intent-block { border-color: #d9e4f5; background: #f7f9fd; }
.intent-block strong { color: #2c578f; font-size: 13px; }
.intent-block p { margin: 7px 0 0; color: #6b788b; font-size: 11px; line-height: 1.65; }
.logic-steps { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: logic; }
.logic-steps li { display: flex; align-items: center; padding: 6px 7px; border-radius: 7px; background: #f1f4f8; color: #5f6c7f; font-size: 10px; }
.logic-steps li:before { margin-right: 4px; color: var(--blue); content: counter(logic); counter-increment: logic; font-weight: 800; }
.knowledge-hits { display: flex; flex-wrap: wrap; gap: 6px; }
.knowledge-hits b, .knowledge-hits i { padding: 5px 7px; border-radius: 6px; background: #eff7f4; color: #367762; font-size: 10px; font-style: normal; font-weight: 700; }
.knowledge-hits i { background: #f2f4f7; color: #929aa6; }
.feedback-block ul { margin: 0; padding-left: 16px; color: #657184; font-size: 11px; line-height: 1.7; }
.feedback-block li + li { margin-top: 4px; }

.demo-conversion { display: flex; align-items: center; gap: 35px; margin-top: 22px; padding: 29px 32px; border-radius: 19px; background: linear-gradient(125deg,#17283f,#29476c); color: #fff; box-shadow: 0 20px 55px rgba(24,43,73,.16); }
.demo-conversion > div:first-child { margin-right: auto; }
.demo-conversion > div > span { color: #86abeb; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.demo-conversion h2 { margin: 5px 0 6px; font-size: 25px; }
.demo-conversion p { max-width: 700px; margin: 0; color: rgba(255,255,255,.64); font-size: 13px; line-height: 1.7; }
.conversion-actions { display: flex; gap: 9px; flex: 0 0 auto; }
.conversion-actions button, .conversion-actions a { display: grid; place-items: center; min-height: 42px; padding: 0 15px; border: 1px solid rgba(255,255,255,.2); border-radius: 9px; background: transparent; color: #fff; font-size: 12px; font-weight: 750; }
.conversion-actions .primary { border-color: var(--orange); background: var(--orange); }
.demo-method { padding: 70px 0 0; }
.method-heading { text-align: center; }
.method-heading span { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.method-heading h2 { margin: 7px 0 26px; font-size: 28px; }
.method-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; }
.method-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 15px; background: #fff; }
.method-grid i { display: grid; place-items: center; width: 39px; height: 39px; margin-bottom: 14px; border-radius: 11px; background: var(--blue-soft); color: var(--blue); }
.method-grid strong { display: block; font-size: 14px; }
.method-grid p { margin: 8px 0 0; color: #748093; font-size: 12px; line-height: 1.7; }
.demo-disclaimer { margin: 20px 0 0; color: #8b95a4; font-size: 11px; line-height: 1.7; text-align: center; }

dialog { width: min(650px, calc(100% - 30px)); padding: 0; border: 0; border-radius: 20px; box-shadow: 0 35px 110px rgba(13,28,50,.34); }
dialog::backdrop { background: rgba(15,25,41,.6); backdrop-filter: blur(4px); }
.dialog-heading { display: flex; justify-content: space-between; gap: 18px; padding: 25px 27px 18px; border-bottom: 1px solid var(--line); }
.dialog-heading span { color: var(--blue); font-size: 10px; font-weight: 800; letter-spacing: .14em; }
.dialog-heading h2 { margin: 6px 0; font-size: 22px; }
.dialog-heading p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }
.dialog-heading button { flex: 0 0 auto; width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: #6d7888; font-size: 20px; }
#lead-form { padding: 22px 27px 27px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-grid label > span { display: block; margin-bottom: 7px; color: #536074; font-size: 12px; font-weight: 750; }
.form-grid input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid #d2d9e3; border-radius: 9px; outline: 0; color: var(--ink); }
.form-grid input:focus { border-color: #7fa2de; box-shadow: 0 0 0 3px rgba(49,95,168,.08); }
.account-phone-note { margin: 13px 0 0; padding: 10px 12px; border-radius: 9px; background: #eef5ff; color: #42679c; font-size: 12px; }
.account-phone-note i { margin-right: 6px; }
.consent { display: flex; gap: 9px; margin: 17px 0; color: #667286; font-size: 12px; line-height: 1.6; }
.consent input { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 1px; accent-color: var(--blue); }
.form-error { margin-bottom: 13px; padding: 10px 12px; border-radius: 9px; background: #fff0f2; color: #ad3447; font-size: 12px; }
.submit-lead { width: 100%; height: 47px; border: 0; border-radius: 10px; background: linear-gradient(135deg,var(--blue),#5d88d1); color: #fff; font-weight: 800; }
.submit-lead:disabled { cursor: wait; opacity: .6; }
.demo-toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; max-width: min(400px, calc(100% - 40px)); padding: 13px 16px; border-radius: 10px; background: #17283f; color: #fff; box-shadow: var(--shadow); font-size: 12px; }

@media (max-width: 1080px) {
  .demo-workspace { grid-template-columns: 235px minmax(430px,1fr); }
  .insight-panel { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
  .insight-panel .panel-title, .insight-panel .speed-card, .insight-panel .score-list { grid-column: span 1; margin: 0; }
  .insight-panel .insight-block { margin: 0; }
  .method-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .page-container { width: min(100% - 28px,1180px); }
  .demo-hero { padding: 47px 0 100px; }
  .demo-hero-inner { grid-template-columns: 1fr; gap: 27px; }
  .demo-hero h1 { font-size: 40px; }
  .demo-hero-copy > p { font-size: 15px; }
  .hero-demo-card { display: none; }
  .demo-workspace-section { margin-top: -54px; }
  .demo-workspace { grid-template-columns: 1fr; }
  .setup-panel, .insight-panel { padding: 19px 16px; }
  .chat-panel { min-height: 650px; }
  .chat-messages { max-height: 480px; }
  .insight-panel { display: block; }
  .insight-panel .panel-title, .insight-panel .speed-card, .insight-panel .score-list { margin-bottom: 15px; }
  .insight-panel .insight-block { margin-top: 11px; }
  .demo-conversion { align-items: stretch; flex-direction: column; padding: 24px 20px; }
  .conversion-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .method-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .chat-complete { align-items: stretch; flex-direction: column; }
  .chat-complete button { width: 100%; }
}

@media (max-width: 420px) {
  .product-options { grid-template-columns: 1fr; }
  .product-option { min-height: 45px; }
  .message > div:last-child { max-width: 88%; }
  .conversion-actions { grid-template-columns: 1fr; }
}