/* JCS ERP 首页样式 */

/* 全局 reset 与导航样式由 common.css 统一提供；首页只需覆盖背景色与首页专有组件 */
/* common.css 的导航为 fixed 定位（高60px），首页 body 顶部留出 60px，避免海报被导航盖住；同时恢复页面可滚动 */
html, body { height:auto; overflow:auto; }
html { scroll-behavior:smooth; }
body { background:#fff; min-height:100vh; padding-top:60px; }
/* 页脚「套餐方案」锚点定位：避开 fixed 导航 */
#plans { scroll-margin-top:70px; }
/* 页面薄雾过渡：默认透明常驻，供站内跳转时雾入；带过渡参数进入时带 show 类盖屏，加载后散开 */
.page-veil { position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; z-index:10001; pointer-events:none; opacity:0; transition:opacity .45s ease-in-out; }
.page-veil.show { opacity:1; }

/* 顶部导航样式已统一移至 common.css（所有页面共用同一套导航外观，含「免费试用」按钮 .btn-trial） */

/* 主横幅：海报 img 整层铺满（与注册页/妙手同结构），换图直接替换 assets/images/hero-banner.png */
.hero { position:relative; height:500px; }
.hero-img { display:block; width:100%; height:100%; object-fit:cover; }

/* 第二屏：特色功能标题 */
.feature-section { padding:64px 20px 0; text-align:center; }
.feature-title { font-size:34px; font-weight:700; color:#1d2129; letter-spacing:1px; line-height:1.4; }
.feature-title span { color:#165dff; }

/* 第三屏：特色功能卡片 */
.feature-grid { max-width:1280px; margin:40px auto 0; padding:0 20px 80px; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.feature-card { background:#fff; border:1px solid #f0f1f5; border-radius:12px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,0.03); transition:transform .2s ease, box-shadow .2s ease; }
.feature-card:hover { transform:translateY(-4px); box-shadow:0 6px 20px rgba(22,93,255,0.1); }
.feature-icon { width:44px; height:44px; border-radius:10px; display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.feature-card-title { font-size:16px; font-weight:600; color:#1d2129; margin-bottom:8px; }
.feature-card-desc { font-size:13px; color:#86909c; line-height:1.7; }
@media (max-width: 900px) { .feature-grid { grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 560px) { .feature-grid { grid-template-columns:1fr; } }

/* ===== 第四屏：六大模块切换 ===== */
.module-tabs { display:flex; width:fit-content; max-width:calc(100% - 40px); flex-wrap:wrap; justify-content:center; gap:6px; margin:40px auto 0; padding:8px; background:#f7f8fa; border-radius:12px; }
.module-tab { border:none; background:transparent; padding:10px 20px; font-size:14px; color:#4e5969; border-radius:10px; cursor:pointer; transition:all .2s ease; font-family:inherit; }
.module-tab:hover { color:#165dff; }
.module-tab.active { background:#fff; color:#165dff; font-weight:600; box-shadow:0 2px 10px rgba(0,0,0,0.08); }

.module-panel { display:none; max-width:1280px; margin:0 auto; padding:48px 20px 80px; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.module-panel.active { display:grid; }
.module-title { font-size:28px; font-weight:700; color:#1d2129; margin-bottom:18px; }
.module-desc { font-size:14px; color:#4e5969; line-height:1.9; margin:0 0 24px; }
.module-points { list-style:none; padding:0; margin:0 0 30px; }
.module-points li { position:relative; padding-left:24px; font-size:14px; color:#1d2129; line-height:2.1; }
.module-points li::before { content:"✓"; position:absolute; left:0; top:0; color:#165dff; font-weight:700; }
.module-actions { display:flex; gap:12px; }
.module-btn-primary { display:inline-block; padding:10px 22px; background:#165dff; color:#fff; border-radius:6px; font-size:14px; text-decoration:none; transition:background .2s ease; }
.module-btn-primary:hover { background:#0e42d2; }
.module-btn-ghost { display:inline-block; padding:10px 22px; background:#fff; color:#1d2129; border:1px solid #e5e6eb; border-radius:6px; font-size:14px; text-decoration:none; transition:all .2s ease; }
.module-btn-ghost:hover { border-color:#165dff; color:#165dff; }

.module-visual { position:relative; min-height:400px; border-radius:14px; padding:26px; display:flex; overflow:hidden; }
.module-visual-card { position:relative; flex:1; background:#fff; border-radius:12px; overflow:hidden; }
.module-visual-img { display:block; width:100%; height:100%; object-fit:cover; }
.module-orbit { position:absolute; left:50%; top:50%; width:230px; height:230px; margin:-115px 0 0 -115px; border:1px dashed #b8c9ff; border-radius:50%; }
.module-center { position:absolute; left:50%; top:50%; width:76px; height:76px; margin:-38px 0 0 -38px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 18px rgba(0,0,0,0.1); z-index:2; }
.m-tile { position:absolute; display:flex; align-items:center; gap:10px; padding:10px 14px; background:#fff; border-radius:10px; box-shadow:0 4px 14px rgba(31,45,90,0.1); z-index:1; }
.m-tile svg { flex:0 0 auto; width:18px; height:18px; }
.m-tile .m-bar { display:block; width:36px; height:6px; border-radius:3px; background:#eef0f5; }
.m-tile .m-bar.short { width:20px; margin-top:5px; }
.m-tile-1 { top:44px; left:36px; }
.m-tile-2 { top:36px; right:40px; }
.m-tile-3 { bottom:96px; left:26px; }
.m-tile-4 { bottom:36px; right:46px; }
.m-tile-5 { top:150px; right:16px; }
@media (max-width: 900px) {
  .module-panel { grid-template-columns:1fr; gap:32px; }
  .module-visual { min-height:340px; padding:16px; }
  .m-tile-5 { display:none; }
}

/* ===== 第七屏：订购方案 ===== */
/* 权益面板周边纹理：左上点阵 + 左下暖色光晕（贴住卡片外侧，柔和淡出） */
.plan-visual { position:relative; }
.plan-visual::before {
  content:""; position:absolute; z-index:0; left:-66px; top:-48px; width:236px; height:206px; pointer-events:none;
  background-image:radial-gradient(#dfe3ea 1.8px, transparent 1.9px);
  background-size:16px 16px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 22% 22%, #000 0%, rgba(0,0,0,.5) 52%, transparent 78%);
  mask-image:radial-gradient(ellipse 70% 70% at 22% 22%, #000 0%, rgba(0,0,0,.5) 52%, transparent 78%);
  opacity:.9;
}
.plan-visual::after {
  content:""; position:absolute; z-index:0; left:-120px; bottom:-76px; width:440px; height:320px; pointer-events:none;
  background:radial-gradient(ellipse at 50% 50%, rgba(255,236,208,.9), transparent 70%);
}
.plan-mock { position:relative; z-index:1; }

.plan-tabs { display:flex; width:fit-content; margin:40px auto 0; }
.plan-tab { padding:12px 30px; border:1px solid #e5e6eb; background:#fff; color:#1d2129; font-size:15px; font-family:inherit; cursor:pointer; transition:all .2s ease; }
.plan-tab:first-child { border-radius:8px 0 0 8px; }
.plan-tab:last-child { border-radius:0 8px 8px 0; border-left:none; }
.plan-tab.active { background:#165dff; border-color:#165dff; color:#fff; font-weight:600; }
.plan-tab:not(.active):hover { color:#165dff; }

.plan-panel { display:none; max-width:1280px; margin:0 auto; padding:48px 20px 80px; grid-template-columns:0.8fr 1.2fr; gap:56px; align-items:center; }
.plan-panel.active { display:grid; }
.plan-copy-title { font-size:28px; font-weight:700; color:#1d2129; margin:0 0 14px; }
.plan-copy-sub { font-size:14px; color:#4e5969; line-height:1.9; margin:0 0 26px; }
.plan-btn { display:inline-block; padding:12px 30px; background:#165dff; color:#fff; border-radius:6px; font-size:14px; text-decoration:none; transition:background .2s ease; }
.plan-btn:hover { background:#0e42d2; }

.plan-mock { border-radius:10px; box-shadow:0 12px 34px rgba(31,45,90,0.14); overflow:hidden; background:#fff; }
.plan-mock-bar { height:28px; background:#2b2f36; display:flex; align-items:center; gap:6px; padding:0 12px; }
.plan-mock-bar i { width:8px; height:8px; border-radius:50%; display:block; }
.plan-mock-bar i:nth-child(1) { background:#ff5f57; }
.plan-mock-bar i:nth-child(2) { background:#febc2e; }
.plan-mock-bar i:nth-child(3) { background:#28c840; }
.plan-mock-body { padding:14px; }
.plan-mock-head { display:grid; gap:6px; }
.plan-mock-head div { padding:10px 8px; text-align:center; border-radius:4px; font-size:12px; font-weight:600; color:#1d2129; }
.plan-mock-head div em { display:block; font-style:normal; font-weight:400; font-size:11px; color:#86909c; margin-top:3px; }
.plan-mock-head div.free { background:#f7f8fa; }
.plan-mock-head div.paid { background:#e8f3ff; color:#165dff; }
.plan-group { margin-top:10px; padding:7px 10px; background:#f2f3f5; font-size:12px; color:#4e5969; font-weight:600; }
.plan-row { display:grid; align-items:center; border-bottom:1px solid #f2f3f5; }
.plan-row span { padding:9px 10px; font-size:12px; color:#4e5969; text-align:center; }
.plan-row span:first-child { text-align:left; color:#1d2129; }
.plan-row .ok { color:#0fa968; font-weight:700; }
.plan-row .no { color:#f53f3f; font-weight:700; }
@media (max-width: 900px) {
  .plan-panel { grid-template-columns:1fr; gap:32px; }
  .plan-visual::before { left:-24px; top:-30px; width:170px; height:150px; }
  .plan-visual::after { left:-32px; bottom:-44px; width:280px; height:210px; }
}

/* ===== 第八屏：底部品牌横幅 ===== */
.cta-band { position:relative; overflow:hidden; background:linear-gradient(105deg, #08203f 0%, #0d3a6e 46%, #165dff 100%); }
.cta-deco { position:absolute; border-radius:50%; pointer-events:none; }
.cta-deco-a { width:1500px; height:1100px; right:-520px; top:-620px;
  background:radial-gradient(closest-side, rgba(255,255,255,0.09), rgba(255,255,255,0.035) 60%, rgba(255,255,255,0) 70%); }
.cta-deco-b { width:1300px; height:1300px; right:-200px; bottom:-980px;
  background:radial-gradient(closest-side, rgba(255,255,255,0.08), rgba(255,255,255,0.028) 58%, rgba(255,255,255,0) 70%); }
.cta-deco-c { width:820px; height:1500px; right:230px; top:-420px; transform:rotate(26deg);
  border:2px solid rgba(255,255,255,0.07); }
.cta-deco-d { width:760px; height:1400px; right:60px; top:-300px; transform:rotate(26deg);
  border:2px solid rgba(255,255,255,0.045); }
.cta-inner { position:relative; z-index:1; max-width:1280px; margin:0 auto; padding:56px 20px; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.cta-title { font-size:34px; font-weight:700; color:#fff; letter-spacing:1px; line-height:1.4; margin:0 0 12px; }
.cta-sub { font-size:14px; color:rgba(255,255,255,0.8); margin:0; }
.cta-btn { flex:0 0 auto; padding:13px 32px; background:#165dff; color:#fff; border:none; border-radius:6px; font-size:14px; font-weight:600; text-decoration:none; box-shadow:0 6px 18px rgba(0,0,0,0.22); transition:transform .2s ease, background .2s ease, box-shadow .2s ease; }
.cta-btn:hover { background:#2f7bff; transform:translateY(-2px); box-shadow:0 12px 26px rgba(0,0,0,0.28); }
@media (max-width: 900px) {
  .cta-inner { flex-direction:column; align-items:flex-start; gap:24px; padding:44px 20px; }
  .cta-title { font-size:26px; }
}

/* ===== 页脚 ===== */
.site-footer { background:#fff; color:#4e5969; border-top:1px solid #f2f3f5; }
.footer-main { max-width:1280px; margin:0 auto; padding:52px 20px 40px; display:grid; grid-template-columns:1.7fr 1fr 1fr 1.3fr auto; gap:40px; }
.footer-brand .f-logo { display:flex; align-items:center; margin-bottom:16px; }
.footer-brand .f-logo img { height:30px; width:auto; display:block; }
.footer-desc { font-size:12px; line-height:2; color:#86909c; margin:0; max-width:330px; }
.footer-col h4 { font-size:14px; font-weight:600; color:#1d2129; margin:0 0 16px; }
.footer-col a { display:block; font-size:12px; color:#4e5969; text-decoration:none; line-height:2.4; transition:color .2s ease; }
.footer-col a:hover { color:#165dff; }
.footer-contact { font-size:12px; line-height:2.4; color:#4e5969; }
.footer-contact .f-phone { font-size:16px; font-weight:600; color:#1d2129; display:block; margin-bottom:6px; }
.footer-qrs { display:flex; gap:14px; }
.footer-qr { text-align:center; }
.footer-qr-slot { width:88px; height:88px; border:1px dashed #dcdfe6; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#a8b0bd; background:#fafbfc; }
.footer-qr img { width:88px; height:88px; border-radius:8px; display:block; background:#fff; padding:4px; box-sizing:border-box; }
.footer-qr p { font-size:11px; color:#86909c; margin:8px 0 0; }
.footer-bottom { border-top:1px solid #f2f3f5; background:#fafbfc; }
.footer-bottom-inner { max-width:1280px; margin:0 auto; padding:18px 20px 24px; text-align:center; font-size:12px; color:#86909c; line-height:2; }
.footer-bottom-inner a { color:#4e5969; text-decoration:none; transition:color .2s ease; }
.footer-bottom-inner a:hover { color:#165dff; }
.footer-bottom-inner .sep { margin:0 8px; color:#c9cdd4; }
@media (max-width: 900px) {
  .footer-main { grid-template-columns:1fr 1fr; gap:28px; padding:40px 20px 28px; }
  .footer-desc { max-width:none; }
}

/* ===== 注册弹窗 ===== */
.register-mask {
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.4);
  z-index:1000;
  display:none;
  align-items:center;
  justify-content:center;
}
.register-mask.show {
  display:flex;
}
.register-modal {
  width:420px;
  background:#fff;
  border-radius:12px;
  box-shadow:0 20px 60px rgba(0,0,0,0.15);
  padding:32px;
}
.modal-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px;
}
.modal-title { font-size:20px; font-weight:700; color:#1d2129; }
.modal-close {
  font-size:24px;
  color:#86909c;
  cursor:pointer;
  line-height:1;
  transition:color 0.2s;
}
.modal-close:hover { color:#1d2129; }
.form-item {
  position:relative;
  margin-bottom:16px;
}
.form-input {
  width:100%;
  padding:12px 16px;
  border:1px solid #e5e6eb;
  border-radius:6px;
  font-size:14px;
  color:#1d2129;
  outline:none;
  transition:border-color 0.2s;
}
.form-input::placeholder { color:#c9cdd4; }
.form-input:focus { border-color:#165dff; }
.required {
  position:absolute;
  right:-16px;
  top:50%;
  transform:translateY(-50%);
  color:#f53f3f;
  font-size:14px;
}
.toggle-pwd {
  position:absolute;
  right:12px;
  top:50%;
  transform:translateY(-50%);
  font-size:16px;
  color:#86909c;
  cursor:pointer;
  user-select:none;
  line-height:1;
  z-index:10;
}
.toggle-pwd:hover { opacity:1; }
.code-row { position:relative; display:flex; align-items:center; }
.code-input { flex:1; padding-right:90px; }
.get-code {
  position:absolute;
  right:24px;
  top:50%;
  transform:translateY(-50%);
  color:#165dff;
  font-size:14px;
  cursor:pointer;
  white-space:nowrap;
}
.get-code:hover { text-decoration:underline; }
.agreement-row {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  margin-bottom:20px;
  font-size:13px;
  color:#4e5969;
}
.checkbox { display:flex; align-items:center; cursor:pointer; }
.checkbox input { margin-right:6px; cursor:pointer; }
.agreement-link { color:#165dff; text-decoration:none; }
.agreement-link:hover { text-decoration:underline; }
.separator { margin:0 2px; }
.register-btn {
  width:100%;
  padding:13px;
  background:#165dff;
  color:#fff;
  border:none;
  border-radius:6px;
  font-size:15px;
  cursor:pointer;
  transition:background 0.2s;
}
.register-btn:hover { background:#0e4bd6; }
.modal-footer {
  text-align:center;
  margin-top:16px;
  font-size:13px;
  color:#86909c;
}
.login-link { color:#165dff; text-decoration:none; }
.login-link:hover { text-decoration:underline; }