/* CodaPan 官网首页 — chome 体系（Header + Hero）
 * 前缀：.chome-*
 * 作用域：body.chome-page（勿污染工作台 / 其它落地页）
 * Token：与 2026-09 官网原型规范对齐（主色保持 #605DFF，与工作台一致）
 */

body.chome-page {
  /* —— 色板 —— */
  --wb-brand: #605dff;
  --wb-brand-hover: #4b48d6;
  --wb-brand-soft: #f0f1ff;
  --wb-ink: #151827;
  --wb-ink-2: #3a4252;
  --wb-muted: #6f7485;
  --wb-line: #e8f0f5;
  --wb-surface: #f7f8fc;
  --wb-card: #ffffff;
  --wb-danger: #f5484d;
  --wb-success: #1fb066;
  --wb-warning: #ffa13d;
  --wb-audio: #5b5ceb;

  /* —— 字号阶梯（原型） —— */
  --lp-fs-h1: 48px;
  --lp-fs-h2: 32px;
  --lp-fs-h3: 18px;
  --lp-fs-body: 14px;
  --lp-fs-sub: 16px;
  --lp-fs-aux: 12px;

  /* —— 间距 / 圆角 / 按钮 —— */
  --lp-pad-normal: 72px;
  --lp-pad-key: 84px;
  --lp-pad-sm: 64px;
  --lp-section-y: var(--lp-pad-normal);
  --lp-card-gap: 16px;
  --lp-radius-sm: 8px;
  --lp-radius-md: 10px;
  --lp-radius-lg: 12px;
  --lp-radius-xl: 12px;
  --lp-radius-2xl: 12px;
  --lp-btn-h: 36px;
  --lp-btn-h-sec: 36px;
  --lp-btn-h-sm: 32px;
  --lp-header-h: 64px;
  --lp-content-max: 1180px;

  --chome-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;

  margin: 0;
  padding-top: var(--lp-header-h);
  font-family: var(--chome-font);
  color: var(--wb-ink);
  background: #fff;
  overflow-x: hidden;
}

body.chome-page *,
body.chome-page *::before,
body.chome-page *::after {
  box-sizing: border-box;
}

body.chome-page img {
  max-width: 100%;
  height: auto;
}

/* —— Container：max 1180；2K/4K 不继续放大 —— */
.chome-container,
body.chome-page .container {
  width: calc(100% - 48px);
  max-width: var(--lp-content-max, 1180px);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

@media (max-width: 1199.98px) {
  .chome-container,
  body.chome-page .container {
    width: calc(100% - 40px);
  }
}

@media (max-width: 767.98px) {
  .chome-container,
  body.chome-page .container {
    width: calc(100% - 32px);
  }
}

/* ========== Header（仅首页作用域） ========== */
body.chome-page .cs_site_header.cs_style_1 {
  background: #fff;
  border-bottom: 1px solid var(--wb-line);
}

body.chome-page .cs_site_header .cs_main_header {
  height: var(--lp-header-h);
  font-size: var(--lp-fs-body);
}

body.chome-page .cs_site_header .cs_main_header_in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--lp-header-h);
  gap: 24px;
}

body.chome-page .cs_site_header .cs_site_branding .cs-brand-logo,
body.chome-page .cs_site_header .cs_site_branding img {
  height: 44px;
  width: auto;
  max-width: 196px;
  display: block;
  object-fit: contain;
}

@media (min-width: 1200px) {
  /* 导航：略大字号 + 常规字重，比「14/500」更利落；间距靠 link padding 控命中区 */
  body.chome-page .cs_site_header .cs_nav {
    height: 100%;
  }

  body.chome-page .cs_site_header .cs_nav_list {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  body.chome-page .cs_site_header .cs_nav_list > li {
    margin: 0;
    height: 100%;
  }

  body.chome-page .cs_site_header .cs_nav_list > li > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    color: var(--wb-ink);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  /* 盖掉主题 top:61% 的粗线，改为文字下方居中短下划线 */
  body.chome-page .cs_site_header .cs_nav_list > li > a::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: auto;
    bottom: 18px;
    height: 2px;
    width: auto;
    border-radius: 1px;
    background: var(--wb-brand);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.2s ease;
    pointer-events: none;
  }

  body.chome-page .cs_site_header .cs_nav_list > li > a:hover,
  body.chome-page .cs_site_header .cs_nav_list > li > a:focus-visible {
    color: var(--wb-brand);
  }

  body.chome-page .cs_site_header .cs_nav_list > li > a:hover::before,
  body.chome-page .cs_site_header .cs_nav_list > li > a:focus-visible::before {
    width: auto;
    transform: scaleX(1);
  }
}

/* 移动端：跟主题汉堡抽屉，竖排菜单，不要再横挤 */
@media (max-width: 1199.98px) {
  body.chome-page .cs_site_header .cs_nav_list {
    display: block;
    align-items: stretch;
    gap: 0;
    margin: 0;
    list-style: none;
  }

  body.chome-page .cs_site_header .cs_nav_list > li {
    display: block;
    width: 100%;
    margin: 0;
  }

  body.chome-page .cs_site_header .cs_nav_list > li > a {
    display: block;
    width: 100%;
    padding: 14px 24px;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--wb-ink);
    text-decoration: none;
  }

  body.chome-page .cs_site_header .cs_nav_list > li > a::before {
    display: none;
  }

  body.chome-page .cs_site_header .cs_nav_list > li > a:hover,
  body.chome-page .cs_site_header .cs_nav_list > li > a:focus-visible {
    color: var(--wb-brand);
    background: var(--wb-brand-soft);
  }
}

body.chome-page .chome-header-cta,
body.chome-page .header-login-btn.chome-header-cta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: nowrap;
  /* 覆盖主题 .header-login-btn 固定 133px 紫胶囊 */
  width: auto;
  min-width: 0;
  height: auto;
  line-height: 1;
  padding: 0;
  margin: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font-size: 14px;
}

/* CTA：登录偏弱、注册略强，和中间导航拉开层级 */
body.chome-page .chome-header-cta .chome-link-login,
body.chome-page .chome-header-cta .chome-link-register {
  flex: none;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
  line-height: 36px;
  padding: 0;
  text-decoration: none;
  transition: color 0.2s ease;
}

body.chome-page .chome-header-cta .chome-link-login {
  color: var(--wb-muted);
}

body.chome-page .chome-header-cta .chome-link-register {
  color: var(--wb-brand);
  font-weight: 500;
}

body.chome-page .chome-header-cta .chome-link-login:hover,
body.chome-page .chome-header-cta .chome-link-register:hover {
  color: var(--wb-brand-hover);
}

body.chome-page .chome-header-sep {
  color: #d0d4de;
  font-size: 13px;
  font-weight: 400;
  line-height: 36px;
  user-select: none;
}

body.chome-page .chome-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--lp-btn-h);
  padding: 0 18px;
  border-radius: 8px;
  font-size: var(--lp-fs-body);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

body.chome-page .chome-btn-primary {
  background: var(--wb-brand);
  color: #fff;
  border-radius: 30px;
}

body.chome-page .chome-btn-primary:hover {
  background: var(--wb-brand-hover);
  color: #fff;
}

body.chome-page .chome-btn-secondary {
  background: #fff;
  color: var(--wb-brand);
  border-color: #c9c8ff;
  height: var(--lp-btn-h-sec);
  border-radius: 8px;
}

body.chome-page .chome-btn-secondary:hover {
  border-color: var(--wb-brand);
  color: var(--wb-brand-hover);
}

body.chome-page .chome-btn-ghost {
  background: transparent;
  color: var(--wb-ink-2);
  border-color: transparent;
  height: var(--lp-btn-h-sec);
  padding: 0 8px;
  gap: 8px;
}
body.chome-page .chome-btn-ghost:hover {
  color: var(--wb-brand);
}

body.chome-page .chome-header-cta .cs_btn.cs_style_1,
body.chome-page .chome-header-cta .chome-btn,
body.chome-page .cp-lp-header-start.cs_btn.cs_style_1 {
  flex: none;
  white-space: nowrap;
  height: 36px;
  padding: 0 18px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  color: #fff !important;
  gap: 0;
  position: relative;
  overflow: hidden;
}
body.chome-page .chome-header-cta .cs_btn.cs_style_1:hover {
  background: var(--wb-brand-hover) !important;
  color: #fff !important;
}
body.chome-page .chome-header-cta .cs_btn.cs_style_1 i,
body.chome-page .chome-btn i {
  text-shadow: none !important;
  margin-left: 6px;
}

body.chome-page .cs_site_header.cs_sticky_header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
}

/* ========== Hero ========== */
.chome-hero {
  padding: 40px 0 40px;
  min-height: 500px;
  display: flex;
  align-items: center;
  overflow: visible;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 58%, #fff 100%),
    linear-gradient(110deg, #fff 0, #f4f7ff 62%, #edf0ff 100%);
}

.chome-hero-inner {
  display: grid;
  grid-template-columns: 0.66fr 1.34fr;
  align-items: center;
  gap: 28px;
  width: 100%;
  min-height: 0;
}

body.chome-page .chome-hero + .cp-lp-row {
  border-top: 0;
}

.chome-hero-content {
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chome-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 650;
  color: #5b5cf3;
  border-radius: 20px;
  letter-spacing: 0.5px;
}

.chome-hero-title {
  margin: 0 0 18px;
  max-width: none;
  font-size: 48px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1.4px;
  color: var(--wb-ink);
}

.chome-hero-title-accent {
  color: #5959f5;
}

.chome-hero-desc {
  margin: 0;
  max-width: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.9;
  color: #71809a;
}

.chome-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 24px 0 0;
}

.chome-hero-actions .chome-btn {
  gap: 18px;
  height: auto;
  min-height: 48px;
  padding: 13px 19px;
  border-radius: 30px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(92, 92, 245, 0.19);
}

.chome-hero-actions .chome-btn i {
  margin-left: 0;
  font-size: 18px;
  line-height: 1;
  text-shadow: none !important;
}

/* 左栏 CTA 下方：四项仅图标+短标签 */
.chome-hero-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  width: 100%;
  border: none;
}

.chome-hero-feature {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  min-width: 0;
  padding: 0;
  position: relative;
}

.chome-hero-feature:not(:last-child)::after {
  display: none;
}

.chome-hero-feature-ico {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--wb-brand);
  font-size: 12px;
  line-height: 1;
  margin-top: 0;
  border-radius: 7px;
  background: #eef0ff;
}

.chome-hero-feature-text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  min-width: 0;
}

.chome-hero-feature-text b {
  font-size: 11px;
  font-weight: 400;
  color: var(--wb-muted);
  line-height: 1.3;
  white-space: nowrap;
}

.chome-hero-feature-text small {
  display: none;
}

/* 原型：Hero 底部四个轻量打点 */
.chome-hero-points {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  color: #76829a;
  font-size: 12px;
  line-height: 1.4;
}
.chome-hero-points li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.chome-hero-points li::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 8px;
  background: #e7e9fe;
  color: #5959f5;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  flex-shrink: 0;
}

.chome-hero-visual {
  min-width: 0;
  max-width: none;
  width: 100%;
  margin-left: auto;
  margin-right: -40px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  border: none;
  background: transparent;
  overflow: visible;
  box-shadow: none;
  padding: 0;
}

.chome-hero-visual-shot {
  position: relative;
  z-index: 1;
  display: block;
  width: 118%;
  max-width: none;
  height: auto;
  object-fit: contain;
  border-radius: 0;
  transform: none;
  filter: drop-shadow(0 18px 30px rgba(85, 101, 160, 0.15));
}

/* 不规则背景色块 */
.chome-hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  pointer-events: none;
  z-index: 0;
}
.chome-hero-blob-a {
  width: 72%;
  height: 68%;
  top: 8%;
  right: -4%;
  background: radial-gradient(circle at 40% 40%, rgba(96, 93, 255, 0.22), rgba(96, 93, 255, 0) 70%);
  border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%;
  filter: blur(2px);
}
.chome-hero-blob-b {
  width: 48%;
  height: 42%;
  bottom: 4%;
  left: -6%;
  background: radial-gradient(circle at 50% 50%, rgba(46, 144, 250, 0.18), rgba(46, 144, 250, 0) 70%);
  border-radius: 58% 42% 48% 52% / 42% 55% 45% 58%;
}
.chome-hero-blob-c {
  width: 36%;
  height: 32%;
  top: -2%;
  left: 18%;
  background: radial-gradient(circle at 50% 50%, rgba(155, 138, 251, 0.2), rgba(155, 138, 251, 0) 70%);
  border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
}

.chome-hero-visual-shot.is-svg {
  max-height: none;
  background: transparent;
}

/* 截图未就绪时的产品感占位（非抽象营销插画） */
.chome-hero-mock {
  width: 100%;
  height: 100%;
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, #fbfbfe 0%, #f3f4fa 100%);
}

.chome-hero-mock-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
  color: var(--wb-ink);
}

.chome-hero-mock-hd span {
  font-size: 12px;
  font-weight: 500;
  color: var(--wb-muted);
}

.chome-hero-mock-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--wb-line);
  border-radius: 10px;
}

.chome-hero-mock-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: #ebe9ff;
  color: var(--wb-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.chome-hero-mock-thumb.is-audio {
  background: #eceeff;
  color: #5b5ceb;
}

.chome-hero-mock-meta b {
  display: block;
  font-size: 13px;
  color: var(--wb-ink);
  font-weight: 600;
}

.chome-hero-mock-meta small {
  font-size: 12px;
  color: var(--wb-muted);
}

.chome-hero-float {
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: min(240px, calc(100% - 32px));
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--wb-line);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(21, 24, 39, 0.1);
}

.chome-hero-float-ok {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-success, #1f9d55);
  margin-bottom: 6px;
}

.chome-hero-float-ok i {
  font-size: 14px;
}

.chome-hero-float-link {
  font-size: 12px;
  font-weight: 600;
  color: var(--wb-ink);
  word-break: break-all;
}

.chome-hero-float-hint {
  margin-top: 4px;
  font-size: 11px;
  color: var(--wb-muted);
}

/* Hero 响应式：~1100 起单列；禁止整体 scale/zoom */
@media (max-width: 1199.98px) {
  .chome-hero {
    padding: 56px 0 64px;
  }

  .chome-hero-inner {
    gap: 32px;
  }

  .chome-hero-title {
    font-size: 40px;
  }
}

@media (max-width: 1099.98px) {
  .chome-hero {
    padding: 48px 0 56px;
    min-height: 0;
  }

  .chome-hero-inner {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 28px;
    min-height: 0;
  }

  .chome-hero-content,
  .chome-hero-visual {
    width: 100%;
    max-width: none;
  }

  .chome-hero-visual {
    justify-content: center;
    margin-left: 0;
    margin-right: 0;
  }

  .chome-hero-visual-shot {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
  }

  .chome-hero-title {
    font-size: 36px;
    letter-spacing: -1px;
  }
}

@media (max-width: 767.98px) {
  .chome-hero {
    padding: 40px 0 48px;
  }

  .chome-hero-title {
    font-size: 32px;
    line-height: 1.2;
  }

  .chome-hero-desc {
    font-size: 14px;
    line-height: 1.85;
  }

  .chome-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .chome-hero-actions .chome-btn {
    width: 100%;
  }

  .chome-hero-points {
    gap: 9px;
  }
}

@media (max-width: 479.98px) {
  .chome-hero-title {
    font-size: 28px;
  }
}

/* 回顶按钮：hover 不要黑色遮罩 */
body.chome-page .cs_scrollup:hover::before {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0);
}
body.chome-page .cs_scrollup:hover {
  background: var(--wb-brand-hover, #4b48d6) !important;
  color: #fff !important;
}