/* ============================================================
   V2 首页 · 五大核心业务（#services）
   ------------------------------------------------------------
   只服务 _preview/home-v2/index.html 的 #services 区块。
   全部类名以 .v2svc / .v2films / .v2ads / .v2site / .v2dept / .v2acq 开头，
   与正式站 css/style.css 的既有类**不重名**，不会互相覆盖。
   挪进正式站时整文件随区块一起搬即可。
   ============================================================ */

/* ---------- 区块外壳 ---------- */
.v2svc-sec {
  position: relative;
  /* R72：不再自带不透明暖白底；暖白由 body 的统一画布提供，
     与合作版图的深色→暖橙→浅杏连续衔接（见 v2.css） */
  background: transparent;
  padding: clamp(64px, 9vh, 112px) 0 clamp(72px, 10vh, 128px);
  color: var(--color-gray-600);
}

/* ---------- R72 服务区轻量入场 ----------
   素材先淡入上移，文案晚 160ms；位移 22px、时长 580ms。
   只在 html.v2-svc-anim 下隐藏，减动效 / 无 IO / 无 JS 时内容直接可见。
   滚动过快时由 v2.js 的 scroll 兜底把已越过的条目直接点亮。 */
html.v2-svc-anim .v2svc__media {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .58s ease, transform .58s ease;
  will-change: opacity, transform;
}
html.v2-svc-anim .v2svc__text {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .58s ease .16s, transform .58s ease .16s;
  will-change: opacity, transform;
}
html.v2-svc-anim .v2svc.is-in .v2svc__media,
html.v2-svc-anim .v2svc.is-in .v2svc__text {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.v2-svc-anim .v2svc__media,
  html.v2-svc-anim .v2svc__text {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.v2svc-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

/* ---------- 总标题（简洁，不独占整屏） ---------- */
.v2svc-head {
  max-width: 780px;
  margin: 0 0 clamp(40px, 5.5vh, 64px);
}

.v2svc-head__tag {
  display: inline-block;
  margin: 0 0 16px;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(232, 85, 26, 0.08);
  color: var(--color-brand);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.v2svc-head__title {
  margin: 0 0 14px;
  color: var(--color-gray-900);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.v2svc-head__sub {
  margin: 0;
  max-width: 640px;
  color: var(--color-gray-500);
  font-size: clamp(0.9375rem, 1.15vw, 1.0625rem);
  line-height: 1.75;
}

/* ---------- 单个业务：桌面 42% 文字 / 58% 素材，左右交错 ---------- */
.v2svc {
  display: grid;
  grid-template-columns: 42fr 58fr;       /* 左文右图 */
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(36px, 5vh, 56px) 0;
}

/* DOM 顺序始终是「文字在前、素材在后」（移动端与读屏都靠它）；
   桌面端用 order 把偶数项翻转成左图右文。 */
.v2svc--rt { grid-template-columns: 58fr 42fr; }
.v2svc--rt .v2svc__text  { order: 2; }
.v2svc--rt .v2svc__media { order: 1; }

.v2svc__num {
  display: block;
  margin-bottom: 10px;
  color: var(--color-brand);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.v2svc__title {
  margin: 0 0 14px;
  color: var(--color-gray-900);
  font-size: clamp(1.375rem, 2.1vw, 1.875rem);
  font-weight: 700;
  line-height: 1.3;
}

.v2svc__claim {
  margin: 0 0 14px;
  color: var(--color-gray-800);
  font-size: clamp(1rem, 1.35vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.6;
}

.v2svc__body {
  margin: 0;
  color: var(--color-gray-500);
  font-size: 1rem;
  line-height: 1.85;
}

/* ---------- 两个入口 ---------- */
.v2svc__acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-top: clamp(20px, 2.6vh, 28px);
}

.v2svc__btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 28px;
  border-radius: 8px;
  background: var(--gradient-cta);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(232, 85, 26, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.v2svc__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(232, 85, 26, 0.32);
}

.v2svc__btn:focus-visible,
.v2svc__link:focus-visible {
  outline: 2px solid var(--color-brand-deep);
  outline-offset: 3px;
  border-radius: 6px;
}

.v2svc__link {
  color: var(--color-brand);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(232, 85, 26, 0.35);
  padding-bottom: 2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.v2svc__link:hover {
  color: var(--color-brand-deep);
  border-bottom-color: var(--color-brand-deep);
}

/* ---------- 业务之间的过渡文案 ---------- */
.v2svc-bridge {
  margin: 0;
  padding: clamp(10px, 1.6vh, 18px) 0;
  color: var(--color-gray-400);
  font-size: clamp(0.875rem, 1.05vw, 1rem);
  line-height: 1.7;
  text-align: center;
}

.v2svc-bridge::before,
.v2svc-bridge::after {
  content: "";
  display: inline-block;
  width: 28px;
  height: 1px;
  margin: 0 14px;
  vertical-align: middle;
  background: var(--color-gray-300);
}

/* ============================================================
   01 · AI 创意短视频 —— 三条竖屏真实成片
   ============================================================ */
.v2films {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.v2film {
  margin: 0;
  min-width: 0;
}

.v2film__hit {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1714;
  cursor: pointer;
  aspect-ratio: 9 / 16;
  box-shadow: 0 4px 18px rgba(30, 27, 24, 0.12);
}

.v2film__cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease, opacity 0.3s ease;
}

.v2film__hit:hover .v2film__cover { transform: scale(1.04); }

.v2film__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.25s ease;
}

.v2film__play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 13px solid var(--color-brand);
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
}

.v2film__hit:hover .v2film__play { transform: scale(1.08); }

.v2film__badge {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(232, 85, 26, 0.92);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* 点击后接管封面的播放器 */
.v2film__player {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: 12px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 4px 18px rgba(30, 27, 24, 0.18);
}

.v2film__player video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.v2film.is-playing .v2film__hit { display: none; }
.v2film:not(.is-playing) .v2film__player { display: none; }

.v2film__cap {
  padding: 10px 2px 0;
}

.v2film__cap b {
  display: block;
  margin-bottom: 3px;
  color: var(--color-gray-800);
  font-size: 0.875rem;
  font-weight: 600;
}

.v2film__cap span {
  display: block;
  color: var(--color-gray-400);
  font-size: 0.75rem;
  line-height: 1.6;
}

/* 手机端切换条（桌面隐藏） */
.v2films__tabs { display: none; }

/* ============================================================
   02 · 海外广告推广 —— 深色工作台式容器
   ============================================================ */
.v2ads {
  display: grid;
  gap: 14px;
}

.v2ads__desk {
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(160deg, #262220 0%, #17140F 100%);
  box-shadow: 0 10px 32px rgba(30, 27, 24, 0.20);
}

/* 真实 Meta 投放后台截图（R79 起替换原「待补」占位）。
   白底承载，避免深色卡片背景透出到截图边缘。
   R79c：整块做成按钮 —— 点击放大，1:1 原始像素下表格文字可读。 */
.v2ads__shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  line-height: 0;
  background: #fff;
  cursor: zoom-in;
}

.v2ads__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* 可放大素材的角标（02 投放报表 / 05 软件界面共用） */
.v2shot__hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 1;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: #fff;
  background: rgba(23, 20, 15, 0.6);
  pointer-events: none;
}

.v2ads__bar,
.v2acq__bar,
.v2site__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.v2ads__bar   { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.v2acq__bar   { border-bottom: 1px solid var(--color-gray-200); background: #F7F4F1; }
.v2site__bar  { border-bottom: 1px solid var(--color-gray-200); background: #F7F4F1; }

.v2ads__dots i,
.v2acq__dots i,
.v2site__dots i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
}

.v2acq__dots i,
.v2site__dots i { background: var(--color-gray-300); }

.v2ads__bar-t {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.v2ads__aux-t {
  margin: 0 0 8px;
  color: var(--color-gray-500);
  font-size: 0.8125rem;
  font-weight: 600;
}

.v2ads__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.v2ads__row img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(30, 27, 24, 0.10);
}

/* ============================================================
   03 · 独立站定制 —— 明亮浏览器窗口 + 手机端位
   ============================================================ */
.v2site {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "browser"
    "nav";
  gap: 14px;
  align-items: start;
}

.v2site__browser {
  grid-area: browser;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 8px 28px rgba(30, 27, 24, 0.12);
}

.v2site__url {
  color: var(--color-gray-500);
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* 画面比例跟随当前站点素材的固有比例（JS 写入，初始为 OPACK 的 1650:728）。
   contain + 顶部对齐：整张首屏完整可见，左右不裁切、比例不变形。 */
.v2site__screen {
  aspect-ratio: 1650 / 728;
  overflow: hidden;
  background: #fff;
}

.v2site__shot {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

/* R79：手机端展示位（.v2site__phone / __phone-ph）已整体移除，样式随之删除 */

.v2site__nav {
  grid-area: nav;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.v2site__arrow {
  flex: none;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-gray-300);
  border-radius: 50%;
  background: #fff;
  color: var(--color-gray-700);
  font-size: 1.125rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.v2site__arrow:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: #fff;
}

.v2site__meta {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  min-width: 0;
}

.v2site__meta b {
  color: var(--color-gray-900);
  font-size: 0.9375rem;
  font-weight: 700;
}

.v2site__meta i {
  color: var(--color-gray-400);
  font-size: 0.6875rem;
  font-style: normal;
  letter-spacing: 0.08em;
}

.v2site__meta em {
  color: var(--color-gray-400);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-style: normal;
}

/* ============================================================
   04 · AI 市场部 —— 约 70% 实训现场 / 30% 工作成果
   ============================================================ */
.v2dept {
  display: grid;
  grid-template-columns: 70fr 30fr;
  gap: 12px;
  align-items: stretch;
}

.v2dept__main,
.v2dept__side-a,
.v2dept__side-b {
  position: relative;
  margin: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-gray-100);
  box-shadow: 0 6px 22px rgba(30, 27, 24, 0.12);
}

.v2dept__main img,
.v2dept__side-a img,
.v2dept__side-b img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.v2dept__main { aspect-ratio: 4 / 3.4; }

.v2dept__side {
  display: grid;
  grid-template-rows: 1fr 1.15fr;
  gap: 12px;
}

.v2dept__main figcaption,
.v2dept__side-b figcaption {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(20, 20, 20, 0.62);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 500;
  backdrop-filter: blur(4px);
}

/* ============================================================
   05 · 主动获客软件 —— 单张主界面窗口
   ============================================================ */
.v2acq__win {
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--color-gray-200);
  box-shadow: 0 8px 28px rgba(30, 27, 24, 0.12);
}

.v2acq__bar-t {
  color: var(--color-gray-500);
  font-size: 0.75rem;
}

/* 真实软件界面截图（R79c 起替换原「待补」占位）。
   桌面端显示完整界面；≤640px 由 <picture> 换成重点区域裁剪。
   整块可点击放大 —— 1:1 原始像素下表格文字可读。 */
.v2acq__shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  font: inherit;
  line-height: 0;
  background: #fff;
  cursor: zoom-in;
}

.v2acq__shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================================================
   素材点击放大层（模块 02 投放报表 / 模块 05 软件界面共用）
   ------------------------------------------------------------
   默认「适应屏幕」；点图片或按钮切到 1:1 原始像素 + 双向滚动，
   手机端靠这一步看清表格文字。只做查看，不改动素材内容。
   ============================================================ */
.v2zoom {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: none;
  padding: 16px;
  background: rgba(18, 16, 14, 0.93);
}

.v2zoom.is-open {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.v2zoom__bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.v2zoom__tip {
  margin-right: auto;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.62);
}

.v2zoom__btn {
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.v2zoom__btn:hover { background: rgba(255, 255, 255, 0.12); }

.v2zoom__btn--close {
  padding: 6px 13px;
  font-size: 1.125rem;
  line-height: 1;
}

.v2zoom__stage {
  flex: 1 1 auto;
  display: flex;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-radius: 8px;
}

/* 用 margin:auto 而不是 flex 居中 —— 内容超出容器时不会裁掉上/左边 */
.v2zoom__img {
  display: block;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  border-radius: 6px;
  cursor: zoom-in;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
}

/* 1:1 原始像素：图片按自身尺寸铺开，容器双向滚动 */
.v2zoom.is-full .v2zoom__img {
  max-width: none;
  max-height: none;
  cursor: zoom-out;
}

@media (max-width: 640px) {
  .v2zoom { padding: 10px; }
  .v2zoom__tip { display: none; }
}

body.v2zoom-lock { overflow: hidden; }

/* ============================================================
   响应式：≤900px 统一「文字在上、素材在下」
   ============================================================ */
@media (max-width: 900px) {
  .v2svc,
  .v2svc--rt {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: clamp(28px, 5vh, 40px) 0;
  }

  .v2svc--rt .v2svc__text,
  .v2svc--rt .v2svc__media { order: 0; }

  .v2svc__acts { gap: 16px; }

  /* 01：一条大视频 + 手动切换 */
  .v2films {
    display: block;
    position: relative;
  }

  .v2film { display: none; }
  .v2film.is-on { display: block; }

  .v2films__tabs {
    display: flex;
    gap: 10px;
    margin-top: 14px;
  }

  .v2films__tab {
    flex: 1;
    min-width: 0;
    padding: 9px 6px;
    border: 1px solid var(--color-gray-300);
    border-radius: 8px;
    background: #fff;
    color: var(--color-gray-500);
    font-size: 0.75rem;
    line-height: 1.3;
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .v2films__tab.is-on {
    border-color: var(--color-brand);
    background: rgba(232, 85, 26, 0.07);
    color: var(--color-brand);
    font-weight: 600;
  }

  .v2film__badge { display: none; }

  /* 03：手机端位已取消，桌面端画面在窄屏下同样占满整宽 */

  /* 04：窄屏改成上下 */
  .v2dept { grid-template-columns: 1fr; }
  .v2dept__main { aspect-ratio: 16 / 10; }
  .v2dept__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
  .v2dept__side-a,
  .v2dept__side-b { aspect-ratio: 4 / 3; }
}

@media (max-width: 560px) {
  .v2svc-wrap { padding: 0 18px; }
  .v2svc-head__title { font-size: 1.375rem; }
  .v2svc__title { font-size: 1.25rem; }
  .v2svc__btn { width: 100%; justify-content: center; }
  .v2svc__acts { gap: 14px; }
  .v2svc-bridge::before,
  .v2svc-bridge::after { width: 16px; margin: 0 8px; }

  .v2ads__row { grid-template-columns: repeat(2, 1fr); }
  .v2ads__row li:nth-child(3) { display: none; }

  .v2site__nav { justify-content: space-between; }
  .v2site__meta { gap: 8px; }
}

@media (max-width: 380px) {
  .v2svc-wrap { padding: 0 14px; }
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .v2svc__btn:hover,
  .v2film__hit:hover .v2film__cover,
  .v2film__hit:hover .v2film__play { transform: none; }

  .v2film__cover,
  .v2vsite__shot,
  .v2site__shot { transition: none; }
}