/* ============================================================
   官网首页（Landing）
   复用 app.css 的设计令牌与基础组件（.btn / .tag）。
   规范同前：品牌纯蓝、4/8px 网格、圆角 8/12/16；
   禁止渐变 / 发光 / 厚重毛玻璃 —— 层级靠字重、留白与描边建立。
   ============================================================ */

html{scroll-behavior:smooth;}

.lp{background:var(--surface);}
.lp h1,.lp h2,.lp h3{font-weight:600;letter-spacing:-.02em;}
.lp a{color:inherit;}              /* 覆盖全局 a{color:var(--brand)}：官网里链接以导航为主 */
.lp a:focus-visible,.lp .btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}

.lp-wrap{max-width:1120px;margin:0 auto;padding:0 24px;}
.lp-btn-lg{height:44px;padding:0 22px;font-size:15px;border-radius:var(--radius-md);}

/* ===== 顶栏 ===== */
.lp-nav{
  position:sticky;top:0;z-index:20;background:var(--surface);
  border-bottom:1px solid transparent;transition:border-color var(--t),box-shadow var(--t);
}
.lp-nav.scrolled{border-bottom-color:var(--border);box-shadow:var(--shadow-sm);}
.lp-nav-in{display:flex;align-items:center;gap:24px;height:64px;}
.lp-brand{display:flex;align-items:center;gap:9px;font-size:15px;font-weight:600;flex-shrink:0;}
.lp-mark{
  width:30px;height:30px;border-radius:var(--radius-sm);background:var(--brand);color:#fff;
  display:grid;place-items:center;flex-shrink:0;
}
.lp-mark-sm{width:24px;height:24px;border-radius:6px;}
.lp-links{display:flex;gap:24px;margin-left:8px;font-size:14px;color:var(--text-2);}
.lp-links a{padding:6px 0;transition:color var(--t);}
.lp-links a:hover{color:var(--text);}
.lp-nav-act{margin-left:auto;display:flex;gap:8px;}

/* ===== 首屏 ===== */
.lp-hero{background:var(--surface-2);border-bottom:1px solid var(--border);}
.lp-hero-in{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;
  padding:72px 24px 80px;
}
.lp-eyebrow{
  display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:var(--radius-pill);
  background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand);
  font-size:12.5px;font-weight:500;
}
.lp-hero-txt h1{font-size:40px;line-height:1.26;margin:18px 0 16px;letter-spacing:-.025em;}
.lp-lead{color:var(--text-2);font-size:15.5px;line-height:1.75;max-width:520px;}
.lp-hero-act{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap;}
.lp-points{margin-top:26px;display:grid;gap:9px;color:var(--text-2);font-size:13.5px;}
.lp-points li{display:flex;align-items:flex-start;gap:9px;list-style:none;}
.lp-points li::before{
  content:'';width:16px;height:16px;flex-shrink:0;margin-top:3px;border-radius:50%;
  background:var(--ok-soft) no-repeat center;border:1px solid #c6ecdc;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.4l2.4 2.4 4.6-5' fill='none' stroke='%2322a07c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ===== 首屏右侧：工作台示意（纯 CSS 绘制，不含任何真实数据） ===== */
.lp-shot{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;max-width:520px;width:100%;justify-self:end;
}
.lp-shot-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-bottom:1px solid var(--border);
}
.lp-shot-t{font-size:13px;font-weight:600;}
.lp-shot-grid{display:grid;grid-template-columns:134px minmax(0,1fr);min-height:238px;}
.lp-shot-side{border-right:1px solid var(--border);background:var(--surface-2);padding:8px;display:grid;gap:4px;align-content:start;}
.lp-shot-item{
  display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--radius-sm);
  font-size:12.5px;color:var(--text-2);
}
.lp-shot-item.on{background:var(--surface);color:var(--text);font-weight:500;box-shadow:var(--shadow-sm);}
.lp-av{
  width:22px;height:22px;border-radius:50%;background:var(--surface-3);color:var(--text-2);
  display:grid;place-items:center;font-size:11px;flex-shrink:0;
}
.lp-shot-item.on .lp-av{background:var(--brand);color:#fff;}
.lp-shot-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lp-shot-dot{width:6px;height:6px;border-radius:50%;background:var(--danger);flex-shrink:0;}
.lp-shot-main{
  display:flex;flex-direction:column;justify-content:flex-end;gap:10px;
  padding:14px;background:var(--chat-bg);
}
.lp-shot-msgs{display:flex;flex-direction:column;gap:8px;}
.lp-bub{max-width:84%;padding:7px 11px;border-radius:12px;font-size:12.5px;line-height:1.5;}
.lb-in{background:var(--surface);border:1px solid var(--border);align-self:flex-start;border-bottom-left-radius:4px;}
.lb-out{background:var(--brand);color:#fff;align-self:flex-end;border-bottom-right-radius:4px;}
.lp-shot-input{
  height:34px;display:flex;align-items:center;padding:0 11px;border-radius:var(--radius-sm);
  background:var(--surface);border:1px solid var(--border);color:var(--text-3);font-size:12.5px;
}

/* ===== 区块 ===== */
.lp-sec{padding:72px 0;scroll-margin-top:76px;}
.lp-sec-alt{background:var(--surface-2);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.lp-sec-h{max-width:640px;margin:0 auto 40px;text-align:center;}
.lp-sec-h h2{font-size:26px;margin-bottom:10px;}
.lp-sec-h p{color:var(--text-2);font-size:14.5px;line-height:1.7;}

/* 功能网格 */
.lp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.lp-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;
  transition:border-color var(--t),box-shadow var(--t);
}
.lp-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow);}
.lp-ico{
  display:grid;place-items:center;width:36px;height:36px;margin-bottom:14px;
  border-radius:var(--radius-sm);background:var(--brand-soft);border:1px solid var(--brand-line);color:var(--brand);
}
.lp-ico svg{width:19px;height:19px;}
.lp-card h3{font-size:15px;margin-bottom:8px;}
.lp-card p{color:var(--text-2);font-size:13.5px;line-height:1.7;}

/* 接入流程 */
.lp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}
.lp-step{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px;}
.lp-step-n{
  display:grid;place-items:center;width:28px;height:28px;margin-bottom:14px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:13px;font-weight:600;
}
.lp-step h3{font-size:15px;margin-bottom:8px;}
.lp-step p{color:var(--text-2);font-size:13.5px;line-height:1.7;}

/* 技术特性：用顶部细线分隔而非卡片，避免整页都是方块 */
.lp-tech{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px;}
.lp-tech-item{border-top:2px solid var(--brand-line);padding-top:14px;}
.lp-tech-item h3{font-size:14.5px;margin-bottom:6px;}
.lp-tech-item p{color:var(--text-2);font-size:13px;line-height:1.7;}

/* ===== 底部行动 ===== */
.lp-cta{background:var(--surface-2);border-top:1px solid var(--border);padding:56px 0;}
.lp-cta-in{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.lp-cta h2{font-size:22px;margin-bottom:6px;}
.lp-cta p{color:var(--text-2);font-size:14px;}

/* ===== 页脚 ===== */
.lp-foot{background:var(--surface);padding:32px 0;}
.lp-foot-in{display:flex;align-items:center;gap:24px;flex-wrap:wrap;}
.lp-foot-brand{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;}
.lp-foot-links{display:flex;gap:20px;margin-left:auto;font-size:13.5px;color:var(--text-2);}
.lp-foot-links a{transition:color var(--t);}
.lp-foot-links a:hover{color:var(--brand);}
.lp-foot-copy{
  flex-basis:100%;margin-top:4px;padding-top:16px;border-top:1px solid var(--line);
  color:var(--text-3);font-size:12.5px;
}

/* ===== 响应式 ===== */
@media (max-width:960px){
  .lp-hero-in{grid-template-columns:minmax(0,1fr);gap:40px;padding:48px 24px 56px;}
  .lp-hero-txt h1{font-size:32px;}
  .lp-lead{max-width:none;}
  .lp-shot{justify-self:start;}
  .lp-grid,.lp-steps,.lp-tech{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .lp-wrap{padding:0 16px;}
  .lp-nav-in{gap:12px;height:58px;}
  .lp-links{display:none;}
  .lp-hero-in{padding:36px 16px 44px;gap:32px;}
  .lp-hero-txt h1{font-size:26px;letter-spacing:-.02em;}
  .lp-lead{font-size:14.5px;}
  .lp-btn-lg{height:42px;padding:0 18px;font-size:14px;}
  .lp-hero-act{flex-direction:column;align-items:stretch;margin-top:24px;}
  .lp-hero-act .btn{width:100%;}
  .lp-sec{padding:52px 0;}
  .lp-sec-h{margin-bottom:28px;}
  .lp-sec-h h2{font-size:22px;}
  .lp-grid,.lp-steps,.lp-tech{grid-template-columns:minmax(0,1fr);gap:12px;}
  .lp-shot-grid{grid-template-columns:minmax(0,1fr);min-height:0;}
  .lp-shot-side{display:none;}          /* 窄屏只保留对话区，否则三列挤成一团 */
  .lp-cta{padding:40px 0;}
  .lp-cta-in{flex-direction:column;align-items:flex-start;}
  .lp-cta-in .btn{width:100%;}
  .lp-foot{padding:24px 0;}
  .lp-foot-links{margin-left:0;flex-wrap:wrap;gap:14px;}
}
@media (max-width:420px){
  .lp-nav-act .btn{padding:0 10px;font-size:13px;}
  .lp-nav-act .btn-primary{padding:0 12px;}
  .lp-card,.lp-step{padding:18px;}
}