/* 品牌营销页面样式 - ppyx.css */
/* 顶部导航 header / CTA / 页脚 footer 为全站公共样式，统一放在 style.css */

/* ==================== 首屏 ==================== */
/* 高度 / 定位 / 字号 / 按钮等结构样式统一在公共 style.css 的 .hero 系列（内页共用同一套：
   hero 560 高、文字块 @top188、标题 48px、副标题 24px、按钮 145×48 @top356），这里只定义本页背景 */
.hero { background: #eef3fb url('../img/ppyx/61620960.jpg') 50% 50%/cover no-repeat; }
/* ==================== 定制化品牌服务 ==================== */
.brand { padding: 80px 0 18px; background: #fff; }
/* 设计稿：标题块顶 80、h2 36px/1.75、副标题 16px/1.75 → 标签行顶 200 */
.brand .sec-title { margin-bottom: 29px; }
.brand .sec-title h2 { line-height: 1.75; }
.brand .sec-title p { margin-top: 0; line-height: 1.75; }

/* 标签：4 枚独立胶囊 160×48、间距 20、整组居中；当前项底色 #f6f7fa（无描边）
   胶囊内：图标 26×26 左缩进 25，文字 18px 加粗距图标 7 */
.brand-tabs {
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
  margin: 0 auto;
}
.brand-tab {
  display: flex; align-items: center; gap: 7px;
  width: 160px; height: 48px; padding: 0 0 0 25px;
  border: 0; border-radius: 200px; background: transparent; cursor: pointer;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px; font-weight: 700; color: #1d2129;
  transition: background-color .2s;
}
.brand-tab img { width: 26px; height: 26px; object-fit: contain; }
.brand-tab.active { background: #f6f7fa; color: #1d2129; }

/* 面板：1400×620、radius 20、1px #ededee 描边；
   左列内容 x32（h3 顶 84 / 副文 128 / 分隔线 202 / 三条目 226·318·411 / 按钮 520），
   插图 600×547 定位于 (752,40) */
.brand-panel {
  position: relative; margin-top: 52px; min-height: 620px;
  border: 1px solid #ededee; border-radius: 20px;
  background: url('../img/ppyx/61614632.jpg') 50% 50%/cover no-repeat;
  padding: 0 48px 0 31px;
}
.brand-panel__text { width: 636px; padding-top: 85px; }
.brand-panel__text h3 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 28px; font-weight: 700; color: #1d2129; line-height: 1;
}
.brand-panel__text > p {
  margin-top: 15px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px; color: #636e80; line-height: 26px;
}
.brand-divider { width: 636px; height: 1px; margin-top: 21px; background: #dddddd; }
.brand-points { margin-top: 25px; }
.brand-points li { position: relative; }
.brand-points li + li { margin-top: 28px; }
.brand-points li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 28px; height: 28px;
  background: url('../img/ppyx/61614267.png') center/contain no-repeat;
}
.brand-points h4 {
  padding-left: 43px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px; font-weight: 700; color: #1d2129; line-height: 26px;
}
.brand-points p {
  margin-top: 12px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px; color: #636e80; line-height: 26px;
}
.panel-btn { margin-top: 45px; width: 145px; height: 48px; padding: 0; border-radius: 8px; font-size: 18px; }
.brand-panel__pic { position: absolute; top: 39px; right: 47px; width: 600px; }
/* 设计稿该图组件自带 10px 圆角（其余图片组件为 1px，不可通用化） */
.brand-panel__pic img { display: block; width: 100%; height: auto; border-radius: 10px; }

/* ==================== 实力铸就口碑 ==================== */
.strength { padding: 80px 0 104px; background: #fff; }
/* 设计稿标题块顶 80，卡片顶 240（h2/副标题行高 1.75） */
.strength .sec-title { margin-bottom: 69px; }
.strength .sec-title h2 { line-height: 1.75; }
.strength .sec-title p { margin-top: 0; line-height: 1.75; }
/* 4 张 335×400 卡、间距 20、无描边 */
.str-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.str-card {
  min-height: 400px;
  border-radius: 20px; padding: 49px 29px 0 32px; overflow: hidden;
}
/* 设计稿为整卡高度纵向渐变（顶浅底深），非纯色 */
.str-card--a { background: linear-gradient(180deg, #f2f8ff, #cadefc); }
.str-card--b { background: linear-gradient(180deg, #f3fbff, #c9ebfc); }
.str-card--c { background: linear-gradient(180deg, #edeefc, #cfc5fd); }
.str-card--d { background: linear-gradient(180deg, #f3f8ff, #dcebff); }
.str-card h4 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 28px; font-weight: 700; color: #1d2129; line-height: 28px;
}
.str-card p {
  margin-top: 23px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px; color: #636e80; line-height: 25px;
}
/* 插图：设计稿为 271×168 的白底图（cover 裁切）＋四角 10px 圆角，
   不是满宽出血，也不是只圆上面两角 */
.str-card img {
  display: block; width: 271px; max-width: 100%; height: 168px;
  margin-top: 21px; object-fit: cover; border-radius: 10px;
}

/* ==================== 专项服务保障 ==================== */
.guard {
  padding: 80px 0 150px;
  background: #f5f9ff url('../img/ppyx/61628899.png') 50% 50%/cover no-repeat;
}
/* 设计稿标题块顶 80、卡片顶 240 */
.guard .sec-title { margin-bottom: 69px; }
.guard .sec-title h2 { line-height: 1.75; }
.guard .sec-title p { margin-top: 0; line-height: 1.75; }
/* 4 张 690×280 卡（2×2、间距 20），1px 白描边、radius 20 */
.guard-list { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.guard-card {
  --pad: 105px;
  position: relative; height: 280px;
  border: 1px solid #fff; border-radius: 20px;
  box-shadow: 0 5px 10px rgba(202, 222, 252, .3);
  background-position: 50% 50%; background-size: cover; background-repeat: no-repeat;
  padding: var(--pad) 32px 0;
}
.guard-card--a { background-image: url('../img/ppyx/61629167.jpg'); }
.guard-card--b { background-image: url('../img/ppyx/61629469.jpg'); }
.guard-card--c { background-image: url('../img/ppyx/61629302.jpg'); }
.guard-card--d { background-image: url('../img/ppyx/61629528.jpg'); }
/* 标题下沿的高亮胶囊：设计稿 120×10、radius 200、卡内 (32,130)，压在两行正文与标题之间 */
.guard-card::before {
  content: ""; position: absolute; left: 32px; top: calc(var(--pad) + 25px); z-index: 1;
  width: 120px; height: 10px; border-radius: 200px;
}
.guard-card--a::before { background: #c6e0ff; }
.guard-card--b::before { background: rgba(169, 230, 255, .9); }
.guard-card--c::before { background: rgb(255, 211, 150); }
.guard-card--d::before { background: rgb(222, 223, 253); }
.guard-card h4 {
  position: relative; z-index: 2;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 28px; font-weight: 700; color: #1d2129; line-height: 28px;
}
.guard-card p {
  position: relative; z-index: 2;
  margin-top: 21px; max-width: 575px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px; color: #636e80; line-height: 28px;
}

/* ==================== 数据与客户 ==================== */
.data {
  padding: 70px 0 80px;
  background: #f7fbff url('../img/ppyx/61620915.jpg') 50% 50%/cover no-repeat;
}
.data-title {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 38px; font-weight: 700; color: #1d2129; line-height: 1.4;
}
.data-title em { font-style: normal; color: #317af7; }
.data-sub {
  margin-top: 10px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 16px; color: #8d97a8;
}
.data-stats { margin-top: 40px; }
.data-stats li {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 30px; font-weight: 700; color: #1d2129; line-height: 1.6;
}
.data-stats em { font-style: normal; color: #317af7; }
.logo-wall { margin-top: 50px; overflow: hidden; }
.logo-row {
  display: flex; align-items: center; width: max-content; height: 92px;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.logo-row + .logo-row { margin-top: 12px; }
.logo-row img {
  width: 150px; height: 76px; object-fit: contain; flex-shrink: 0; margin: 0 14px;
  background: #fff; border-radius: 10px; padding: 10px;
}

/* ==================== 简单4步 + 常见问题 ==================== */
.steps { padding: 80px 0 88px; background: #fff; overflow: hidden; }
/* 设计稿标题块顶 80，步骤行顶 220，FAO 标题顶 392，FAQ 列表顶 522 */
.steps .sec-title { margin-bottom: 49px; }
.steps .sec-title h2 { line-height: 1.75; }
.steps .sec-title p { margin-top: 0; line-height: 1.75; }
/* 4 张 365×100 步骤、间距 20（第 4 张右侧溢出容器，由区块 overflow 裁掉） */
.step-list { display: grid; grid-template-columns: repeat(4, 365px); gap: 20px; }
/* 卡内为「标题 211 + 虚线箭头 150×12」一行，说明换行到下一行 */
.step-item {
  position: relative; display: grid; grid-template-columns: 211px 150px;
  align-items: center; align-content: start; min-height: 100px;
}
.step-item h4 {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px; font-weight: 700; color: #1d2129; line-height: 26px;
}
.step-item h4 span {
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px; font-weight: 700; color: inherit; margin-right: 6px;
}
.step-item img { width: 150px; height: 12px; object-fit: fill; }
.step-item p {
  grid-column: 1 / -1; margin-top: 13px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 14px; color: #636e80; line-height: 22px;
}
.step-item:last-child img { display: none; }

.faq-title {
  margin-top: 72px; text-align: center;
  font-family: Tahoma, Geneva, sans-serif;
  font-size: 36px; font-weight: 700; color: #1d2129; line-height: 1.75;
}
.faq-list { margin-top: 67px; display: flex; flex-direction: column; gap: 20px; }
/* 条目：设计稿 1400×100（展开 160），radius 20、无描边、阴影 0 5px 10px */
.faq-item {
  position: relative;
  background: #fff; border-radius: 20px;
  box-shadow: 0 5px 10px rgba(224, 235, 255, .4);
  overflow: hidden;
}
/* 问题前的圆点：设计稿 10×10、卡内 (48,46) */
.faq-item::before {
  content: ""; position: absolute; left: 48px; top: 46px; z-index: 1;
  width: 10px; height: 10px; border-radius: 200px; background: #317af7;
}
.faq-q {
  position: static; display: block; width: 100%; text-align: left;
  padding: 33px 27px 33px 82px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 24px; color: #1d2129; line-height: 34px; cursor: pointer;
}
/* 箭头：设计稿 32×32、卡内 x1341；展开态比收起态高 8px（设计稿原样） */
.faq-q img {
  position: absolute; right: 27px; top: 37px; width: 32px; height: 32px;
  object-fit: contain;
}
.faq-item.open .faq-q img { top: 29px; }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-a p:empty { display: none; }
.faq-a p {
  margin: 0 68px 26px 82px;
  font-family: "Source Han Sans", Geneva, sans-serif;
  font-size: 18px; color: #636e80; line-height: 28px;
}
/* 展开时负 margin 把答案上提到问题下沿 8px 处（设计稿 收起 100 / 展开 160） */
.faq-item.open .faq-a { max-height: 320px; margin-top: -22px; }

/* ==================== 响应式适配 ==================== */
@media (max-width: 1399px) {.hero { background-position: 62% 50%; }

  .brand { padding: 64px 0 16px; }
  .brand-panel { min-height: 0; padding: 44px 36px 48px; display: flex; align-items: center; gap: 36px; }
  .brand-panel__text { width: auto; flex: 1 1 auto; min-width: 0; padding-top: 0; }
  .brand-divider { width: 100%; }
  .brand-panel__pic { position: static; top: auto; right: auto; flex: 0 0 40%; width: auto; max-width: 520px; }

  .str-card { min-height: 0; padding: 36px 26px 32px; }
  .str-card h4 { font-size: 24px; line-height: 1.3; }
  .str-card p { margin-top: 18px; font-size: 15px; line-height: 24px; }
  .str-card img { width: 100%; height: 168px; margin-top: 18px; }

  .guard-card { --pad: 40px; height: auto; padding: var(--pad) 36px 44px; }
  .guard-card h4 { font-size: 23px; line-height: 1.3; }
  .guard-card p { margin-top: 14px; font-size: 15px; line-height: 24px; }

  .data-title { font-size: 34px; }
  .data-stats li { font-size: 26px; }

  .step-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .step-item { grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; min-height: 0; }
  .step-item h4 { font-size: 20px; }
  .step-item h4 span { font-size: 20px; }
  .step-item img { width: 100%; max-width: 150px; }
  .step-item p { font-size: 13px; margin-top: 12px; }
  .faq-title { font-size: 32px; margin-top: 56px; }
  .faq-list { margin-top: 40px; }
  .faq-q { padding: 28px 70px 24px 62px; font-size: 19px; line-height: 1.6; }
  .faq-item::before { left: 34px; top: 36px; }
  .faq-q img { width: 28px; height: 28px; right: 26px; top: 30px; }
  .faq-item.open .faq-q img { top: 26px; }
  .faq-a { margin-top: 0; }
  .faq-a p { margin: 0 26px 24px 62px; font-size: 15px; line-height: 24px; }
}

@media (max-width: 1199px) {
  .brand-panel { flex-direction: column; align-items: stretch; gap: 28px; }
  .brand-panel__pic { flex: none; width: 100%; max-width: 460px; margin: 0 auto; order: -1; }

  .str-list { grid-template-columns: repeat(2, 1fr); }
  .str-card img { max-width: 271px; height: 160px; }

  .guard-list { grid-template-columns: 1fr; }
  .guard-card p { max-width: 100%; }

  .data-title { font-size: 30px; }
  .data-stats li { font-size: 23px; }
}

@media (max-width: 991px) {.hero { background-image:
      linear-gradient(180deg, rgba(255, 255, 255, .9) 34%, rgba(255, 255, 255, .6)),
      url('../img/ppyx/61620960.jpg'); background-position: 50% 50%, 68% 50%; background-size: cover, cover; }

  .brand-tab { width: auto; padding: 0 20px; font-size: 16px; }
  .brand-tab img { width: 24px; height: 24px; }

  .guard-card p { max-width: 100%; }
  .step-list { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
}

@media (max-width: 767px) {

  .brand { padding: 44px 0 40px; }
  .brand-tabs { gap: 10px; }
  .brand-tab { flex: 1 1 40%; justify-content: center; width: auto; height: 44px; padding: 0 12px; font-size: 14px; gap: 6px; }
  .brand-tab img { width: 20px; height: 20px; }
  .brand-panel {
    /* tabs 底 → 面板顶：原 52px 是桌面档唯一定义，窄屏未覆盖 → 收到 28px */
    margin-top: 28px;
    padding: 24px 18px 28px; gap: 22px;
    /* 底图 61614632.jpg 是「左近白 → 右浅蓝」的横向渐变，cover 后窄屏只截到过渡带 ⇒ 左右两半明显不同色。
       窄屏改用渐变中位色单色填充，视觉更整。 */
    background: #eaf4fe;
  }
  .brand-panel__text h3 { font-size: 21px; }
  .brand-panel__text > p { font-size: 14px; margin-top: 10px; line-height: 24px; }
  .brand-divider { margin-top: 16px; }
  .brand-points { margin-top: 18px; }
  /* 窄屏对勾定位：图标 20px 钉在 li 左缘（abs 定位不受 padding 影响），
     ① 竖向与标题首行居中：行高 26 → top = (26−20)/2 = 3（原 top:0 使视觉偏上 4px）；
     ② 标题取消桌面 43px 的悬挂缩进 —— 改前左边界三档（图标 0 / 正文 30 / 标题 73）不齐，
        现在图标在 0、标题与正文同在 32，标题右移量为 12px，图标右侧留白均衡 */
  .brand-points li { padding-left: 32px; }
  .brand-points li + li { margin-top: 16px; }
  .brand-points li::before { width: 20px; height: 20px; top: 3px; }
  .brand-points h4 { padding-left: 0; font-size: 17px; }
  .brand-points p { font-size: 13px; line-height: 22px; }
  .panel-btn { margin-top: 24px; height: 44px; font-size: 16px; width: 100%; }

  .strength { padding: 44px 0 52px; }
  /* 标题底 → 列表顶：原 69px 是桌面档唯一定义，窄屏未覆盖 → 收到 28px */
  .strength .sec-title { margin-bottom: 28px; }
  .str-list { grid-template-columns: 1fr; gap: 14px; }
  .str-card { padding: 22px 18px 24px; }
  .str-card h4 { font-size: 21px; }
  .str-card p { margin-top: 14px; font-size: 14px; line-height: 22px; }
  .str-card img { width: 100%; max-width: 271px; height: 150px; margin-top: 16px; }

  .guard { padding: 44px 0 40px; }
  /* 标题底 → 列表顶：原 69px 是桌面档唯一定义，窄屏未覆盖 → 收到 28px */
  .guard .sec-title { margin-bottom: 28px; }
  .guard-list { gap: 14px; }
  /* 卡片：内距收到 22/18/24，重排「标题→高亮胶囊→正文」节奏（胶囊紧贴标题下沿，
     正文与胶囊留 8px）；底图 690×320 左侧 60% 为纯白、插画落在右下，
     按卡宽等比放大到 min(108%, 410px) 并右下角对齐 ——
     插画整幅落在正文下方、右缘出血，卡片不再「上紧下空、插画缩在角落」。 */
  .guard-card {
    --pad: 22px; padding: var(--pad) 18px 24px;
    min-height: 232px; background-size: min(108%, 410px) auto; background-position: 100% 100%;
  }
  .guard-card::before { left: 18px; top: calc(var(--pad) + 25px); width: 84px; }
  .guard-card h4 { font-size: 19px; }
  .guard-card p { font-size: 14px; line-height: 22px; margin-top: 18px; }
  /* 卡片变窄后取消设计稿的硬换行，交给浏览器折行 */
  .guard-card p br { display: none; }

  .data { padding: 44px 0 52px; }
  .data-title { font-size: 22px; }
  .data-sub { font-size: 13px; }
  .data-stats { margin-top: 24px; }
  .data-stats li { font-size: 18px; }
  .logo-wall { margin-top: 30px; }
  .logo-row { height: 72px; }
  .logo-row img { width: 110px; height: 58px; margin: 0 8px; padding: 8px; }

  .steps { padding: 44px 0 56px; }
  /* 标题底 → 步骤列表：原 49px 是桌面档唯一定义，窄屏未覆盖 → 收到 28px */
  .steps .sec-title { margin-bottom: 28px; }
  /* 单列后横向虚线箭头「指向右」已无意义 → 改成竖向时间轴：
     左侧蓝色圆形序号 + 序号之间的竖向虚线（呼应桌面端虚线连接语言），与 SEM 页一致 */
  .step-list { grid-template-columns: 1fr; gap: 0; }
  .step-item { display: block; padding-bottom: 22px; }
  .step-item:last-child { padding-bottom: 0; }
  .step-item:not(:last-child)::before {
    content: ""; position: absolute; left: 19px; top: 46px; bottom: 0; width: 2px;
    background: repeating-linear-gradient(180deg, rgba(55, 106, 255, .32) 0 5px, rgba(55, 106, 255, 0) 5px 11px);
  }
  .step-item h4 {
    display: grid; grid-template-columns: 40px minmax(0, 1fr);
    align-items: center; column-gap: 14px; font-size: 17px; line-height: 1.4;
  }
  .step-item h4 span {
    width: 40px; height: 40px; border-radius: 50%; margin: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6d97ff, #376aff);
    color: #fff; font-size: 15px; font-weight: 700;
    box-shadow: 0 4px 10px rgba(55, 106, 255, .28);
    position: relative; z-index: 1;
  }
  .step-item img { display: none; }
  .step-item p { margin-top: 9px; padding-left: 54px; font-size: 13px; line-height: 22px; }

  .faq-title { font-size: 22px; margin-top: 44px; }
  .faq-list { margin-top: 24px; gap: 12px; }
  .faq-q { padding: 22px 52px 22px 44px; font-size: 15px; line-height: 1.5; }
  .faq-item::before { left: 18px; top: 26px; width: 8px; height: 8px; }
  .faq-q img { width: 22px; height: 22px; right: 18px; top: 22px; }
  .faq-item.open .faq-q img { top: 22px; }
  .faq-a p { margin: 0 18px 20px 44px; font-size: 14px; line-height: 22px; }
}

@media (max-width: 479px) {
  .brand-tab { flex: 1 1 40%; justify-content: center; }
  .brand-panel { margin-top: 22px; }
  .strength .sec-title { margin-bottom: 22px; }
  .guard .sec-title { margin-bottom: 22px; }
  .steps .sec-title { margin-bottom: 22px; }
  .str-list { grid-template-columns: 1fr; }
  .industry-tab { padding: 0 12px; font-size: 14px; }
}