/* =========================================================
   daogou-v2.css — 导购超级助手(企微助手) 产品页
   风格：整页深空靛夜色（全站唯一全暗页）+ 铜杏强调
   叙事：导购任务台（Hero CSS 卡片）→ 任务清单 → 三价值旅程横轴 → 发丝线任务卡
   ========================================================= */

:root {
  --dg-night: #0e1126;    /* 深空靛 */
  --dg-panel: #151936;    /* 靛夜面板 */
  --dg-copper: #d98e5f;   /* 铜杏 */
  --dg-copper-2: #e8ab7f; /* 亮铜杏 */
  --dg-text: rgba(236, 233, 244, .88);
  --dg-muted: rgba(236, 233, 244, .6);
  --dg-hair: rgba(255, 255, 255, .12);
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* -------- 小标 -------- */
.dghero .eyebrow,
.dghead .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  color: var(--dg-copper-2);
  font: 600 11px/1.4 Arial, sans-serif;
  letter-spacing: .3em;
  text-transform: uppercase;
}
.dghead .eyebrow { margin-bottom: 14px; }
.dghero .eyebrow:before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
}

/* =========================================================
   Hero：靛夜 + 门店夜景 + 左文案右任务台
   ========================================================= */
.dghero {
  position: relative;
  color: #fff;
  padding: 172px 0 116px;
  background:
    linear-gradient(100deg, rgba(12, 15, 36, .95) 28%, rgba(12, 15, 36, .74) 60%, rgba(12, 15, 36, .38) 100%),
    url('../img/daogou/hero-daogou.jpg') right center / cover no-repeat,
    var(--dg-night);
}
.dghero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 368px;
  gap: 64px;
  align-items: center;
}
.dghero h1 {
  margin: 0 0 8px;
  font-size: clamp(40px, 5.2vw, 62px);
  line-height: 1.14;
  letter-spacing: -.035em;
  font-weight: 700;
}
.dghero h1 em {
  display: block;
  margin-top: 16px;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.7;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .01em;
  color: rgba(255, 255, 255, .74);
}
.dgactions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px; }
.dghero .btn-primary { background: var(--dg-copper); color: #20130a; box-shadow: none; }
.dghero .btn-primary:hover { background: var(--dg-copper-2); }
.dghero .btn-ghost { border-color: rgba(255, 255, 255, .38); color: #fff; }
.dghero .btn-ghost:hover { background: #fff; color: var(--dg-night); }

/* -------- 导购任务台（CSS 重绘企微任务卡） -------- */
.dgtask {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px;
  background: rgba(14, 17, 38, .62);
  backdrop-filter: blur(5px);
  padding: 18px 20px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.dgtask-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dg-hair);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .06em;
}
.dgtask-top span {
  padding: 3px 10px;
  border: 1px solid rgba(232, 171, 127, .55);
  border-radius: 999px;
  color: var(--dg-copper-2);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .08em;
}
.dgtrow {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  font-size: 13.5px;
  color: var(--dg-text);
}
.dgtrow i {
  flex: none;
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e8ab7f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.dgtrow b {
  margin-left: auto;
  color: var(--dg-copper-2);
  font: 600 12.5px/1 Arial, sans-serif;
}
.dgtask-push {
  margin-top: 14px;
  padding: 10px 13px;
  border: 1px solid rgba(217, 142, 95, .38);
  border-radius: 10px;
  background: rgba(217, 142, 95, .14);
  color: var(--dg-copper-2);
  font-size: 12px;
  letter-spacing: .02em;
}

/* =========================================================
   居中分区头（暗底、无横线）
   ========================================================= */
.dgsec { padding: 92px 0; }
.dghead { text-align: center; margin-bottom: 44px; }
.dghead h2 {
  margin: 0;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -.028em;
  font-weight: 700;
  color: #fff;
}
.dglead {
  margin: -20px auto 0;
  max-width: 640px;
  text-align: center;
  color: var(--dg-muted);
  font-size: 15.5px;
  line-height: 1.9;
}

/* =========================================================
   适用对象 + 部分功能（任务清单居中打勾）
   ========================================================= */
.dgfeat-sec { background: var(--dg-panel); }
.dgfeat-label {
  margin: 52px 0 6px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .04em;
}
.dgfeat {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px 22px;
  max-width: 900px;
  margin: 0 auto;
  list-style: none;
  padding: 0;
}
.dgfeat li {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  padding: 12px 0;
  color: var(--dg-text);
  font-size: 14.5px;
}
.dgfeat li:before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d98e5f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Cpath d='M8 12.5l3 3 5-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 17 项末项自然落入第一列，与第一列左对齐 */

/* =========================================================
   三大应用价值：三站旅程横轴（保留连接线）
   ========================================================= */
.dgvalue { background: var(--dg-night); }
.dgjourney {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 6px 0 64px;
}
.dgjourney:before {
  content: "";
  position: absolute;
  top: 7px;
  left: 16.6%;
  right: 16.6%;
  height: 1px;
  background: rgba(217, 142, 95, .45);
}
.dgstop { position: relative; text-align: center; }
.dgstop:before {
  content: "";
  position: relative;
  z-index: 1;
  display: block;
  width: 11px;
  height: 11px;
  margin: 0 auto 16px;
  border: 2px solid var(--dg-copper);
  border-radius: 50%;
  background: var(--dg-night);
}
.dgstop h3 {
  margin: 0;
  font-size: clamp(17px, 2vw, 21px);
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
}

/* -------- 发丝线任务卡 -------- */
.dgcards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
.dgcard {
  padding: 26px 28px 28px;
  border: 1px solid var(--dg-hair);
  border-radius: 16px;
  background: rgba(255, 255, 255, .02);
}
.dgcard.wide { grid-column: 1 / -1; }
.dgcard h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.dgcard h3:before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--dg-copper);
}
.dgcard p {
  margin: 0 0 6px;
  color: var(--dg-muted);
  font-size: 14px;
  line-height: 1.85;
}
.dgcard p:last-of-type { margin-bottom: 0; }
.dgcard-imgs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
  margin-top: 20px;
}
.dgcard-imgs img {
  border: 1px solid var(--dg-hair);
  border-radius: 12px;
  background: #fff;
  max-width: 100%;
  min-width: 0;
}
.dgcard.wide .dgcard-imgs:not(.nowrap):not(.stack) img {
  height: 400px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}
/* 线下转线上：块级居中布局，双图按自然比例自适应、可换行，任何屏宽都不溢出 */
.dgcard-imgs.stack {
  display: block;
  margin-top: 20px;
  text-align: center;
  font-size: 0;
}
.dgcard-imgs.stack img {
  display: inline-block;
  vertical-align: top;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 560px;
  margin: 0 12px 12px 0;
}
/* 人脸识别：两图恒定并排，各占半宽不换行 */
.dgcard-imgs.nowrap { flex-wrap: nowrap; }
.dgcard-imgs.nowrap img {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  height: auto;
  max-width: none;
  object-fit: contain;
}
/* 横版区域卡：左文案右截图 */
.dgcard.row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
  gap: 48px;
  align-items: center;
}
.dgcard.row .dgcard-imgs { display: block; margin-top: 0; }
.dgcard.row .dgcard-imgs img { display: block; width: 100%; height: auto; }
.dgcard:not(.wide) .dgcard-imgs { display: block; margin-top: 16px; }
.dgcard:not(.wide) .dgcard-imgs img {
  display: block;
  width: 100%;
  height: auto;
}

/* =========================================================
   CTA：靛夜 + 铜杏微光
   ========================================================= */
.dgcta {
  padding: 100px 0;
  color: #fff;
  text-align: center;
  background:
    radial-gradient(640px 280px at 50% 0%, rgba(217, 142, 95, .2), transparent 70%),
    var(--dg-night);
}
.dgcta-inner { max-width: 600px; margin: 0 auto; }
.dgcta h2 {
  margin: 0 0 16px;
  font-size: clamp(24px, 3vw, 34px);
  letter-spacing: -.025em;
  font-weight: 700;
}
.dgcta p {
  margin: 0 0 34px;
  color: rgba(255, 255, 255, .7);
  font-size: 15.5px;
  line-height: 1.9;
}
.dgcta .dgactions { justify-content: center; margin-top: 0; }
.dgcta .btn-primary { background: var(--dg-copper); color: #20130a; box-shadow: none; }
.dgcta .btn-primary:hover { background: var(--dg-copper-2); }
.dgcta .btn-ghost { border-color: rgba(255, 255, 255, .38); color: #fff; }
.dgcta .btn-ghost:hover { background: #fff; color: var(--dg-night); }

/* =========================================================
   响应式（用户移动设备约 900px：塌缩放 1024 断点）
   ========================================================= */
@media (max-width: 1024px) {
  .dghero {
    padding: 148px 0 88px;
    background:
      linear-gradient(180deg, rgba(12, 15, 36, .94) 0%, rgba(12, 15, 36, .8) 62%, rgba(12, 15, 36, .92) 100%),
      url('../img/daogou/hero-daogou.jpg') right center / cover no-repeat,
      var(--dg-night);
  }
  .dghero-inner { grid-template-columns: 1fr; gap: 40px; }
  .dgtask { display: none; }
  .dgfeat { grid-template-columns: repeat(3, 1fr); gap: 2px 16px; }
  .dgcards { grid-template-columns: 1fr; }
  /* 移动端：截图按自然比例自适应，限高完整显示，不裁切放大 */
  .dgcard.wide .dgcard-imgs:not(.nowrap):not(.stack) img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 560px;
    object-fit: contain;
  }
  .dgcard-imgs.stack img { max-height: 480px; margin-right: 0; }
  .dgcard-imgs.nowrap img { max-height: none; object-fit: contain; }
  .dgcard.row { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 600px) {
  .dghero { padding: 118px 0 66px; }
  .dghero h1 { font-size: 33px; }
  .dghero h1 em { font-size: 15.5px; margin-top: 12px; }
  .dgactions { margin-top: 28px; }
  .dgsec { padding: 62px 0; }
  .dghead { margin-bottom: 34px; }
  .dghead h2 { font-size: 24px; }
  .dglead { font-size: 14px; }
  .dgfeat { grid-template-columns: repeat(2, 1fr); gap: 0 10px; }
  .dgfeat li { font-size: 13.5px; padding: 10px 0; }
  .dgfeat-label { margin-top: 40px; }
  .dgjourney { margin-bottom: 46px; }
  .dgstop h3 { font-size: 15px; }
  .dgcard { padding: 22px 20px 24px; }
  .dgcard h3 { font-size: 16.5px; }
  .dgcard p { font-size: 13.5px; }
  .dgcta { padding: 68px 0; }
  .dgcta h2 { font-size: 22px; }
  .dgcta p { font-size: 14px; }
}

/* 顶栏渐变跟随靛夜底色 */
.site-header { background: linear-gradient(180deg, rgba(12, 15, 36, .7), rgba(12, 15, 36, 0)); }