:root{ --c-primary:#0070A0; --c-primary-2:#0086BE; --c-accent:#F0A040; --c-ok:#0E8F6E; --c-warn:#F0A040; --c-danger:#D9534F; --r-pill:999px; --r-lg:24px; --r-md:18px; --r-sm:12px; --r-xs:8px; --s-1:8px; --s-2:16px; --s-3:24px; --s-4:32px; --s-5:40px; --s-6:64px; --f-hero:34px; --f-h1:26px; --f-h2:22px; --f-h3:18px; --f-body:15px; --f-sm:13px; --f-xs:12px; --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei","Source Han Sans SC","Noto Sans CJK SC",sans-serif; } :root{ --bg-0:#0A1A26; --bg-1:#0E1C2B; --bg-2:#12293C; --bg-3:#17344A; --line:#1D3149; --line-2:#27405C; --tx-0:#EAF2FA; --tx-1:#CFE0F5; --tx-2:#9FB6D2; --tx-3:#6F88A6; --sh-1:0 1px 3px rgba(3,12,20,.35); --sh-2:0 12px 40px rgba(0,112,160,.22); --sh-btn:0 10px 20px rgba(0,112,160,.30); --ring:0 0 0 6px rgba(0,112,160,.22); --soft:rgba(255,255,255,.10); --soft-2:rgba(255,255,255,.16); --on-primary:#fff; } body{font-family:var(--font);color:var(--tx-0)} /* 按钮：抄多客规格（48 高 / 28 边距 / 大圆角 / 主色填充 + 蓝调投影）*/ .dk-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; height:48px;padding:0 28px;border:0;border-radius:var(--r-lg); background:var(--c-primary);color:var(--on-primary);font:600 16px/1 var(--font);cursor:pointer; box-shadow:var(--sh-btn);transition:transform .15s,box-shadow .15s,background .15s; text-decoration:none;white-space:nowrap} .dk-btn:hover{background:var(--c-primary-2);transform:translateY(-1px)} .dk-btn:active{transform:translateY(1px);box-shadow:0 4px 10px rgba(0,112,160,.28)} .dk-btn:focus-visible{outline:0;box-shadow:var(--ring)} .dk-btn.sec{background:var(--soft);color:var(--tx-0);box-shadow:none;border:1px solid var(--line-2)} .dk-btn.sec:hover{background:var(--soft-2)} .dk-btn.sm{height:36px;padding:0 16px;font-size:14px;border-radius:var(--r-sm)} .dk-btn.danger{background:var(--c-danger);box-shadow:0 10px 20px rgba(217,83,79,.3)} .dk-btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none} /* 卡片 */ .dk-card{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--s-2);box-shadow:var(--sh-1)} .dk-card.pad-lg{padding:var(--s-3)} /* 徽标/胶囊 */ .dk-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill); background:var(--soft);color:var(--tx-2);font-size:var(--f-xs);white-space:nowrap} .dk-badge.ok{background:rgba(14,143,110,.20);color:var(--c-ok)} .dk-badge.warn{background:rgba(240,160,64,.18);color:#B8770E} .dk-badge.info{background:rgba(0,112,160,.16);color:var(--c-primary)} /* 利益点清单（多客 hero 的 ✓ 列表）*/ .dk-checks{display:flex;flex-direction:column;gap:10px;margin:var(--s-2) 0} .dk-checks div{display:flex;gap:9px;align-items:flex-start;color:var(--tx-1);font-size:var(--f-body);line-height:1.65} .dk-checks div::before{content:"✓";flex:0 0 auto;width:19px;height:19px;border-radius:50%; background:rgba(14,143,110,.18);color:var(--c-ok);font-size:12px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;margin-top:3px} .dk-checks b{color:var(--tx-0)} /* 信任行（多客的 logo 墙位：我们没有 logo，就摆已核实的硬数字）*/ .dk-trust{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s-2)} .dk-trust span{padding:6px 12px;border-radius:var(--r-pill);background:var(--soft); border:1px solid var(--line);color:var(--tx-2);font-size:var(--f-xs)} .dk-trust b{color:var(--tx-1)} /* 编号步骤（多客定价页的"1 Choose a plan"式）*/ .dk-steps{counter-reset:s;display:flex;flex-direction:column;gap:var(--s-2)} .dk-step{counter-increment:s;position:relative;padding-left:44px} .dk-step::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px; border-radius:50%;background:var(--soft-2);color:var(--c-primary);font-weight:700;font-size:14px; display:flex;align-items:center;justify-content:center} .dk-step .t{font-weight:600;color:var(--tx-0);font-size:var(--f-h3);margin-bottom:4px} .dk-step .d{color:var(--tx-2);font-size:var(--f-sm);line-height:1.7} /* Hero（首页首屏：标题 + 利益点 + 双 CTA 的容器）注：视觉取向保持"白卡 + 蓝色主按钮"，与老板已认可的线上版本一致，不擅自改成深色大色块。*/ .hero{background:var(--bg-1);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--s-3) var(--s-2);box-shadow:var(--sh-1);margin-bottom:var(--s-2)} .hero-t{font-size:var(--f-h2);font-weight:700;color:var(--tx-0);line-height:1.45;letter-spacing:.2px} .hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--s-2)} @media (max-width:420px){ .hero-cta .dk-btn{flex:1 1 100%} } /* 骨架屏（多客式加载反馈：不转圈，占位块减少跳动）*/ .dk-skel{background:linear-gradient(90deg,var(--soft),var(--soft-2),var(--soft)); background-size:200% 100%;animation:dkskel 1.2s ease-in-out infinite;border-radius:var(--r-xs);height:13px;margin:9px 0} @keyframes dkskel{0%{background-position:200% 0}100%{background-position:-200% 0}} /* 行内 toast（替代 alert，不打断通话/演示）*/ .dk-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(12px);background:#0C2130;border:1px solid var(--line-2); color:#EAF2FA;padding:11px 18px;border-radius:var(--r-sm);font-size:var(--f-sm); box-shadow:0 12px 30px rgba(0,0,0,.45);opacity:0;pointer-events:none; transition:opacity .2s,transform .2s;z-index:99;max-width:86vw;text-align:center} .dk-toast.on{opacity:1;transform:translateX(-50%) translateY(0)} /* 轻提示（多客处处 tooltip 的做法，用原生 title + 虚线提示）*/ .dk-tip{border-bottom:1px dotted var(--tx-3);cursor:help} /* 断线横条（多客：断线提示必须自带重试动作）*/ .dk-offline{position:fixed;left:0;right:0;top:0;z-index:98;background:#8A5A12;color:#FFF3DC; font-size:13px;padding:9px 14px;display:none;align-items:center;gap:10px;justify-content:center} .dk-offline.on{display:flex} .dk-offline b{text-decoration:underline;cursor:pointer;color:#FFD79A} /* 空态 */ .dk-empty{text-align:center;color:var(--tx-2);padding:var(--s-4) var(--s-2); font-size:var(--f-sm);line-height:1.8} .dk-empty .ico{font-size:34px;display:block;margin-bottom:var(--s-1);opacity:.75} /* 动效收敛：尊重系统"减少动态效果" */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms!important;transition-duration:.001ms!important} } .dk-shell{position:sticky;top:0;z-index:20;background:linear-gradient(135deg,#0070A0,#00639B); border-bottom:1px solid rgba(255,255,255,.12)} .dk-shell .row1{display:flex;align-items:center;gap:var(--s-1);padding:10px 14px 8px; max-width:960px;margin:0 auto} .dk-shell .brand{flex:1;min-width:0} .dk-shell .brand b{display:block;color:#fff;font-size:15px;font-weight:700;letter-spacing:.2px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dk-shell .brand i{display:block;color:rgba(255,255,255,.78);font-size:11.5px;font-style:normal;margin-top:2px} .dk-shell .cta{flex:0 0 auto} .dk-shell .nav{display:flex;gap:6px;overflow-x:auto;padding:0 12px 9px; max-width:960px;margin:0 auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .dk-shell .nav::-webkit-scrollbar{display:none} .dk-shell .nav a{flex:0 0 auto;padding:6px 12px;border-radius:var(--r-pill);text-decoration:none; color:rgba(255,255,255,.88);font-size:12.5px;background:rgba(255,255,255,.10);white-space:nowrap; transition:background .15s} .dk-shell .nav a:hover{background:rgba(255,255,255,.20)} .dk-shell .nav a.on{background:#fff;color:#00639B;font-weight:700} .dk-wrap{max-width:960px;margin:0 auto;padding:14px}

嘉远国际 · 兰炭销售专家AI 坐席 · 知识库 + 大模型 + 反编造护栏

兰炭销售专家 · 电话坐席体验

模拟"客户来电"：你输入客户的话，看 AI 坐席怎么接（可点播放听声音）

客户说的话

体验演示：报价类问题会按公司口径引导、不播报具体价格；正式号码与服务开通后可接真实来电。

兰炭销售专家智能体 · 电话坐席体验版｜数据快照 2026-09