@charset "UTF-8";
/* ==========================================================================
   微信数字员工 · 09 秒哒「简历优化版」
   浅底编辑风：象牙白底 + 墨字 + 唯一琥珀金，全靠 hairline 细线分隔。

   关于底色：模版 RESUME.AI 是「近黑 + 暖白 #f5eee8」的黑白编辑排版。
   那层暖白与站群 03 的宣纸 #F5F1EA 几乎同色（照搬必撞）；而整站深色被用户否掉
   （原话「不要黑色 不要深色的」）。所以只学模版的排版手法，底改成不带黄的象牙白
   #F7F6F2，把「深色基因」换成「金色基因」—— 收尾整幅琥珀金面板是全站唯一大色块。

   色板：底 #F7F6F2 · 交替块 #EFEEE7 · 墨 #1B1B17
         亮金 #F0B429（实心块）· 深金 #A8760A（浅底上的小字：眉标 / 编号 / hover）
   ========================================================================== */

:root {
  --bg:        #F7F6F2;   /* 象牙白底（不带黄，避开 03 的宣纸） */
  --bg-alt:    #F6EDD9;   /* 交替区块：极浅香槟金（与 08 的纸灰拉开，也预告收尾那块金） */
  --paper:     #FFFFFF;   /* 白面板（弹窗 / 收尾面板里的按钮） */

  --ink:       #1B1B17;   /* 墨：浅底必需，用暖墨不用纯黑 */
  --ink-2:     #4C4C44;
  --ink-3:     #74746A;
  --ink-4:     #8E8D83;

  --line:      rgba(27, 27, 23, .15);
  --line-2:    rgba(27, 27, 23, .08);

  /* 浅底上要两个金：小字用深金看得清，实心块用亮金才有金箔感 */
  --gold:      #A8760A;   /* 深金：眉标 / 编号 / hover 文字 */
  --gold-fill: #F0B429;   /* 亮金：实心按钮 / 收尾整幅面板 */
  --gold-in:   #1B1B17;

  --dark:      #1B1B17;
  --ease:      cubic-bezier(.22, .8, .28, 1);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wrap { width: min(1180px, 100% - 48px); margin-inline: auto; }

/* ==========================================================================
   按钮
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
  transition: background .26s var(--ease), color .26s var(--ease),
              border-color .26s var(--ease), translate .26s var(--ease);
}
.btn svg { flex: none; }
.btn:hover { translate: 0 -2px; }

/* 深底上的主按钮：琥珀金实心（全站唯一的实心跳色块） */
.btn-solid { background: var(--gold-fill); color: var(--gold-in); }
.btn-solid:hover { background: #F7C64A; }

/* 深底上的次级按钮：hairline 线框 */
.btn-line { border-color: var(--line); color: var(--ink); }
.btn-line:hover { border-color: rgba(27, 27, 23, .42); }

/* 亮面板里的按钮（收尾块反转）：近黑实心 */
.btn-dark { background: #FFFFFF; color: var(--ink); }
.btn-dark:hover { background: #FFFCF3; }
.btn-dark-line { border-color: rgba(27, 27, 23, .34); color: var(--ink); }
.btn-dark-line:hover { border-color: rgba(27, 27, 23, .72); }

/* ==========================================================================
   顶部：深色通栏（左字标 · 中导航 · 右按钮）
   ========================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(247, 246, 242, .88);
  backdrop-filter: saturate(150%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease);
}
.topbar.is-stuck { border-bottom-color: var(--line); }

.tb-in {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 66px;
}

.tb-logo {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
  white-space: nowrap;
}

.tb-nav {
  margin-inline: auto;
  display: flex;
  gap: 32px;
  font-size: 14.5px;
}
.tb-nav a {
  color: var(--ink-3);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .24s var(--ease), border-color .24s var(--ease);
}
.tb-nav a:hover { color: var(--ink-2); }
.tb-nav a.active { color: var(--ink); border-bottom-color: var(--gold); }

.tb-cta {
  padding: 9px 18px;
  font-size: 13.5px;
  font-weight: 700;
  border: 1px solid var(--gold);
  color: var(--gold);
  white-space: nowrap;
  transition: background .24s var(--ease), color .24s var(--ease);
}
.tb-cta:hover { background: var(--gold-fill); color: var(--gold-in); }

/* ==========================================================================
   首屏：左文右竖排数字
   ========================================================================== */
.hero { padding: clamp(64px, 8vw, 108px) 0 clamp(56px, 7vw, 96px); }

.hero-in {
  display: grid;
  grid-template-columns: 1.3fr .78fr;
  gap: clamp(40px, 5vw, 76px);
  align-items: start;
}

.eyebrow {
  font-size: 12.5px;
  letter-spacing: .2em;
  color: var(--gold);
  text-transform: uppercase;
}

/* 主标：两行对仗。字号同、字重与字距相反 ——「重复 / 重要」轻而疏，「交给它 / 留给你」重而紧；
   第二行阶梯缩进错落；金色只落在句尾那三个字上（全首屏唯一一处跳色） */
.hero-h1 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 24px 0 0;
  font-size: clamp(40px, 6.1vw, 78px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.04em;
  color: var(--ink);
}
.hero-h1 .h1r { display: block; }
.hero-h1 .h1r2 { margin-left: .82em; }

/* 轻头：细字重 + 放开字距 + 淡墨（与后半句的浓黑形成墨色深浅对比） */
.hero-h1 .h1w {
  font-weight: 300;
  letter-spacing: .08em;
  color: var(--ink-4);
  margin-right: .1em;
}

/* 金笔划：下半截被琥珀金划过（不是整行跳色，只有三个字） */
.hero-h1 .h1g {
  background-image: linear-gradient(transparent 62%, rgba(240, 180, 41, .60) 62%);
  background-repeat: no-repeat;
}

.hero-sub {
  max-width: 36em;   /* 两行各排满一行不折（34 字 × 16px） */
  margin: 26px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-2);
}

.hero-act {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

/* 右侧指标：细线分隔的三行 */
.metrics { display: flex; flex-direction: column; height: 100%; justify-content: space-between; }

.mt { border-top: 1px solid var(--line); padding: 20px 0 24px; }

.mt-row {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
}
.mt-row span { font-size: 12.5px; letter-spacing: .12em; color: var(--ink-3); }
.mt-row b {
  font-size: clamp(19px, 2.1vw, 26px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--ink);
}

.mt-note {
  margin-top: 10px;
  font-size: 12.8px;
  line-height: 1.78;
  color: var(--ink-3);
}

/* 首屏载入（纯 CSS，无 JS 也可见） */
.hero-txt h1 { animation: moUp .72s var(--mo-ease) both; animation-delay: .10s; }
.hero-act    { animation: moUp .72s var(--mo-ease) both; animation-delay: .22s; }
.metrics     { animation: moUp .72s var(--mo-ease) both; animation-delay: .30s; }

/* ==========================================================================
   区块与区块头（左右对开：左小标签 + 右大标题 + 顶边横线）
   ========================================================================== */
.band { padding: clamp(58px, 7vw, 96px) 0; }
.band-alt { background: var(--bg-alt); }

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.sec-tag {
  font-size: 12.5px;
  letter-spacing: .2em;
  color: var(--gold);
  white-space: nowrap;
}

.sec-head h2 {
  margin-left: auto;
  text-align: right;
  font-size: clamp(30px, 4.6vw, 58px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -.018em;
}

/* ==========================================================================
   核心能力：细线网格六卡（无背景、无阴影、无圆角，全靠线）
   ========================================================================== */
.cap-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  margin-top: clamp(34px, 4vw, 54px);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.cap {
  padding: clamp(26px, 3vw, 38px) clamp(22px, 2.6vw, 34px);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease);
}
.cap:hover { background: rgba(27, 27, 23, .026); }

.cap-no {
  display: block;
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.cap h3 {
  margin: 12px 0 10px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.cap p { font-size: 14.8px; line-height: 1.82; color: var(--ink-2); }

/* ==========================================================================
   窗口四块：四栏 + 超大淡色数字当水印
   ========================================================================== */
.panes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(34px, 4vw, 54px);
  border-top: 1px solid var(--line);
}

.panes li {
  padding: clamp(24px, 2.6vw, 34px) clamp(18px, 2vw, 28px) clamp(28px, 3vw, 40px);
  border-right: 1px solid var(--line);
}
.panes li:last-child { border-right: 0; }

.pane-no {
  display: block;
  margin-bottom: 16px;
  font-size: clamp(44px, 5.4vw, 82px);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.03em;
  color: rgba(27, 27, 23, .085);
  font-variant-numeric: tabular-nums;
}

.panes h3 {
  margin: 0 0 12px;
  font-size: 18.5px;
  font-weight: 800;
}

.panes p { font-size: 13.8px; line-height: 1.85; color: var(--ink-3); }

.panes-foot {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--line-2);
  font-size: 13.6px;
  color: var(--ink-3);
}
.panes-foot b { color: var(--ink); font-weight: 700; }

/* ==========================================================================
   全量清单墙：16 项基础服务 + 8 项 AI 分身（照实摊开，数字不空喊）
   ========================================================================== */
.fn-wrap {
  margin-top: clamp(30px, 3.4vw, 46px);
  border-top: 1px solid var(--line);
}

.fn-row { padding-top: clamp(20px, 2.2vw, 28px); }

.fn-label {
  margin-bottom: 14px;
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--gold);
}

.fn-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border-top: 1px solid var(--line-2);
  border-left: 1px solid var(--line-2);
}

.fn-grid li {
  padding: 14px 12px;
  font-size: 13.2px;
  line-height: 1.5;
  color: var(--ink-2);
  border-right: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}

/* ==========================================================================
   收尾：整幅亮色反转面板（模版的深色收尾，在深色站里翻过来）
   ========================================================================== */
#start {
  background: var(--gold-fill);
  color: var(--ink);
  padding: clamp(62px, 8vw, 118px) 0;
}

.cta-tag {
  font-size: 12.5px;
  letter-spacing: .2em;
  color: rgba(27, 27, 23, .62);
}

.cta-inner h2 {
  max-width: 20em;
  margin: 20px 0 0;
  font-size: clamp(30px, 4.8vw, 62px);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.cta-inner > p {
  max-width: 40em;
  margin: 22px 0 0;
  font-size: 15.6px;
  line-height: 1.9;
  color: rgba(27, 27, 23, .78);
}

.cta-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.cta-meta {
  margin-top: 22px !important;
  font-size: 12.8px !important;
  color: rgba(27, 27, 23, .60) !important;
}

/* ==========================================================================
   页脚
   ========================================================================== */
.footer {
  padding: 44px 0 40px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
}

.ft-brand {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .04em;
}

.ft-note {
  flex: 1 1 320px;
  font-size: 13px;
  color: var(--ink-3);
}

.ft-right {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 13.5px;
}
.ft-qr {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: border-color .24s var(--ease), color .24s var(--ease);
}
.ft-qr:hover { border-color: var(--gold); color: var(--gold); }
.ft-right a { color: var(--ink-3); }
.ft-right a:hover { color: var(--gold); }

.footer-legal {
  flex: 1 0 100%;
  min-height: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 12.6px;
  color: var(--ink-4);
}
.footer-legal a { color: var(--ink-4); }

.ft-copy {
  flex: 1 0 100%;
  font-size: 13px;
  color: var(--ink-3);
}

/* ==========================================================================
   悬浮「联系微信」
   ========================================================================== */
.fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  background: var(--gold-fill);
  color: var(--gold-in);
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 999px;
  box-shadow: 0 10px 26px rgba(27, 27, 23, .20);
  animation: moWobble 3.4s ease-in-out infinite;
}

/* ==========================================================================
   二维码弹窗（深站里用亮面板）
   ========================================================================== */
.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: none;
}
.modal.open { display: block; }

.modal-mask {
  position: absolute;
  inset: 0;
  background: rgba(27, 27, 23, .42);
  backdrop-filter: blur(3px);
  animation: fadeIn .26s var(--ease) both;
}

.modal-panel {
  position: relative;
  width: min(340px, calc(100vw - 44px));
  margin: 8vh auto 0;
  padding: 28px 26px 24px;
  text-align: center;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(27, 27, 23, .22);
  animation: popIn .3s var(--ease) both;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: rgba(27, 27, 23, .45);
  transition: color .24s var(--ease);
}
.modal-close:hover { color: var(--ink); }

.modal-title { font-size: 16px; font-weight: 800; }

.modal-qr {
  width: 208px;
  margin: 16px auto 0;
  background: #fff;
}

.modal-hint { margin-top: 12px; font-size: 13px; color: rgba(27, 27, 23, .62); }

.modal-open {
  display: inline-block;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(27, 27, 23, .14);
  width: 100%;
  font-size: 12.6px;
  color: rgba(27, 27, 23, .62);
}
.modal-open:hover { color: var(--dark); }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn {
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}

/* ==========================================================================
   响应式
   ========================================================================== */
@media (max-width: 1020px) {
  .hero-in { grid-template-columns: 1fr; }
  .metrics { margin-top: 6px; }
  .panes { grid-template-columns: repeat(2, 1fr); }
  .fn-grid { grid-template-columns: repeat(4, 1fr); }
  .panes li:nth-child(2) { border-right: 0; }
  .panes li:nth-child(1), .panes li:nth-child(2) { border-bottom: 1px solid var(--line); }
  .panes li:nth-child(3) { border-right: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .tb-nav { display: none; }
  .tb-in { justify-content: space-between; }
}

@media (max-width: 720px) {
  .cap-grid { grid-template-columns: 1fr; }
  .sec-head { flex-wrap: wrap; gap: 12px; }
  .sec-head h2 { margin-left: 0; text-align: left; }
}

@media (max-width: 560px) {
  .wrap { width: min(1180px, 100% - 34px); }
  .panes { grid-template-columns: 1fr; }
  .fn-grid { grid-template-columns: repeat(2, 1fr); }
  .panes li { border-right: 0; border-bottom: 1px solid var(--line); }
  .panes li:last-child { border-bottom: 0; }

  .hero-act { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero-act .btn-solid { grid-column: 1 / -1; }
  .hero-act .btn { padding: 14px 16px; }

  .cta-btns { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .cta-btns .btn { width: 100%; }

  .fab { right: 16px; bottom: 16px; padding: 11px 16px; font-size: 13.6px; }
}

@media (max-width: 420px) {
  .hero-act { grid-template-columns: 1fr; }
}

/* 桌面用 <br> 断成两行（避免末字孤行），窄屏放开自然折行 */
/* 窄屏主标：缩进减半，避免第二行被顶出画面 */
@media (max-width: 560px) {
  .hero-h1 .h1r2 { margin-left: .5em; }
  .hero-h1 .h1w { letter-spacing: .04em; }
}

.hero-sub br { display: block; }
@media (max-width: 640px) {
  .hero-sub br { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-txt h1, .hero-act, .metrics,
  .fab { animation: none; }
  .btn { transition: none; }
}

/* 桌面用 <br> 断成两行（避免末字孤行），窄屏放开自然折行 */
.hero-sub br, .cta-inner > p br { display: block; }
@media (max-width: 640px) {
  .hero-sub br, .cta-inner > p br { display: none; }
}