/* ============================================================
   功能介绍页（/features）专属样式，作用域 .page-g，类名前缀 ft-
   设计稿：docs/preview/ai-images/二级页-G风格/1-产品功能.png
   公共底座（页头、按钮、价格胶囊、表格、下载横幅）在 page-g.css，这里只写本页独有的块。
   ============================================================ */

/* ── 工具分组 ── */
.page-g .ft-tools-sec { padding-top: 64px; }
.page-g .ft-group {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  padding: 24px;
  border-radius: var(--g-radius);
  background: var(--g-bg-blue);
}
.page-g .ft-group + .ft-group { margin-top: 20px; }
.page-g .ft-group-head {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px 4px 0 12px;
  min-height: 120px;
}
.page-g .ft-group-head h3 {
  font-size: 30px;
  line-height: 1.25;
  font-weight: 800;
  color: var(--g-title);
}
.page-g .ft-group-head p { margin-top: 6px; font-size: 15px; color: var(--g-muted); }

/* 组名下方的装饰：App 同款 3D 图标（转写=链接转文字、提词=稿子、更多工具=齿轮），不套底色方块 */
.page-g .ft-group-art {
  width: 96px;
  height: 96px;
  margin-top: auto;
  padding-top: 16px;
  box-sizing: content-box;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(30, 64, 175, .2));
}

/* 卡片网格 */
.page-g .ft-cards { display: grid; gap: 16px; }
.page-g .ft-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.page-g .ft-cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.page-g .ft-cards--mini { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.page-g .ft-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 22px;
  border-radius: 20px;
  background: #fff;
  text-align: center;
  box-shadow: var(--g-shadow-sm);
}
.page-g .ft-card .ft-icon {
  width: 88px;
  height: 88px;
  object-fit: contain;
  filter: drop-shadow(0 10px 16px rgba(30, 64, 175, .22));
}
.page-g .ft-card h4 {
  margin-top: 14px;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 700;
  color: var(--g-title);
}
.page-g .ft-card p {
  margin-top: 6px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--g-muted);
}
/* 价格条贴底，卡片里文字长短不一时底部对齐 */
.page-g .ft-card .pg-price {
  margin-top: auto;
  align-self: stretch;
  justify-content: center;
  padding: 7px 14px;
  border-radius: 12px;
  font-size: 15px;
}
.page-g .ft-hot { position: absolute; top: 14px; right: 14px; }

/* 提词组：两张中卡 + 深色提词界面 */
.page-g .ft-prompt-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 16px;
  align-items: stretch;
}
.page-g .ft-card--mid { padding: 24px 16px 20px; }
.page-g .ft-card--mid .ft-icon { width: 64px; height: 64px; }
.page-g .ft-card--mid h4 { font-size: 18px; }

.page-g .ft-shoot {
  position: relative;
  min-height: 220px;
  border-radius: 28px;
  padding: 10px;
  background: linear-gradient(160deg, #334155, #0F172A);
  box-shadow: 0 24px 48px rgba(15, 23, 42, .28), inset 0 0 0 1px rgba(255, 255, 255, .12);
  overflow: hidden;
}
.page-g .ft-shoot > img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: cover;
  border-radius: 20px;
  filter: brightness(.55);
}
.page-g .ft-shoot-lines {
  position: absolute;
  left: 9%;
  top: 50%;
  width: 64%;
  transform: translateY(-58%);
}
.page-g .ft-shoot-lines p {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.6;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
}
.page-g .ft-shoot-lines .is-on { color: #fff; }
.page-g .ft-shoot-side {
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 12px;
}
.page-g .ft-shoot-side span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 11px;
  color: rgba(255, 255, 255, .85);
}
.page-g .ft-shoot-side svg.lucide { width: 16px; height: 16px; }
.page-g .ft-shoot-rec {
  position: absolute;
  left: 50%;
  bottom: 18px;
  width: 36px;
  height: 36px;
  margin-left: -18px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: #EF4444;
}

/* 更多工具：紧凑横排小格 */
.page-g .ft-mini {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--g-shadow-sm);
}
.page-g .ft-mini .ft-icon {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(30, 64, 175, .2));
}
.page-g .ft-mini > div { min-width: 0; }
.page-g .ft-mini h4 { font-size: 16px; line-height: 1.4; font-weight: 700; color: var(--g-title); }
.page-g .ft-mini p { margin-top: 2px; font-size: 13px; line-height: 1.55; color: var(--g-muted); }
.page-g .ft-mini .pg-price { margin-top: 8px; padding: 2px 12px; font-size: 13px; }

/* ── 技术参数表 ── */
.page-g .ft-spec th,
.page-g .ft-spec td { text-align: center; }
.page-g .ft-spec tbody th { width: 22%; font-weight: 600; color: var(--g-title); }
/* 行首是 th：补上 th 与 td 之间的竖线、最后一行 th 的底线（底座只处理了 td） */
.page-g .ft-spec tbody th + td { border-left: 1px solid var(--g-line); }
.page-g .ft-spec tbody tr:last-child th { border-bottom: 0; }
.page-g .ft-spec-tip { margin-top: 16px; }

/* ── 三步流程 ── */
.page-g .ft-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  counter-reset: none;
}
.page-g .ft-step { position: relative; display: flex; flex-direction: column; }
/* 步骤之间的细蓝线：画在编号圆右侧，指向下一步 */
.page-g .ft-step + .ft-step::before {
  content: "";
  position: absolute;
  top: 28px;
  left: -36px;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(59, 130, 246, .2), var(--g-blue));
}
.page-g .ft-step-head { display: flex; align-items: center; gap: 14px; }
.page-g .ft-step-no {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 50%;
  font-size: 28px;
  font-weight: 800;
  color: var(--g-blue-deep);
  background: var(--g-bg-blue-2);
}
.page-g .ft-step-head h3 { font-size: 19px; line-height: 1.4; font-weight: 700; color: var(--g-title); }
.page-g .ft-step > p { margin-top: 12px; font-size: 14px; line-height: 1.7; color: var(--g-muted); }

/* CSS 画的手机小界面（纯装饰，aria-hidden） */
.page-g .ft-phone {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 260px;
  height: 230px;
  margin: 20px auto 0;
  padding: 16px 16px 20px;
  border: 6px solid #1F2937;
  border-bottom: 0;
  border-radius: 30px 30px 0 0;
  background: #fff;
  box-shadow: 0 18px 40px rgba(30, 64, 175, .14);
  font-size: 12px;
  color: var(--g-text);
}
.page-g .ft-phone-bar { text-align: center; font-size: 13px; font-weight: 700; color: var(--g-title); }
.page-g .ft-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.page-g .ft-seg b,
.page-g .ft-seg span { padding: 6px 0; border-radius: 999px; text-align: center; }
.page-g .ft-seg b { color: #fff; background: linear-gradient(135deg, var(--g-blue), var(--g-blue-deep)); }
.page-g .ft-seg span { color: var(--g-muted); background: var(--g-bg-blue); }
.page-g .ft-input { padding: 10px 12px; border-radius: 10px; border: 1px solid var(--g-line); color: #9CA3AF; }
.page-g .ft-phone-btn {
  margin-top: auto;
  padding: 9px 0;
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, var(--g-blue), var(--g-blue-deep));
}
.page-g .ft-langs li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 4px;
  border-bottom: 1px solid #F1F5F9;
}
.page-g .ft-langs li.is-on { font-weight: 700; color: var(--g-blue-deep); }
.page-g .ft-langs svg.lucide { width: 16px; height: 16px; }
.page-g .ft-done {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 6px auto 0;
  border-radius: 50%;
  color: var(--g-blue-deep);
  background: var(--g-bg-blue);
  box-shadow: inset 0 0 0 4px var(--g-blue);
}
.page-g .ft-done svg.lucide { width: 30px; height: 30px; }
.page-g .ft-done-t { text-align: center; font-size: 14px; color: var(--g-title); }

/* ── 能力边界 ── */
.page-g .ft-limit-sec { padding-top: 0; }
.page-g .ft-limit { padding: 32px 36px; }
.page-g .ft-limit-head { display: flex; align-items: center; gap: 14px; }
.page-g .ft-limit-head img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(30, 64, 175, .2));
}
.page-g .ft-limit h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.35;
  font-weight: 800;
  color: var(--g-title);
}
.page-g .ft-limit ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin-top: 20px;
}
.page-g .ft-limit li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #fff;
  font-size: 15px;
  line-height: 1.65;
  color: #374151;
}
.page-g .ft-limit li svg.lucide { width: 20px; height: 20px; margin-top: 2px; color: var(--g-blue); }

/* ── 动效（2026-10-25）：只动 transform / opacity / box-shadow / background，不碰布局；参数与全站统一 ── */
.page-g {
  --ft-ease: cubic-bezier(.2, .7, .2, 1);
}
/* 工具卡悬停：上浮 4px + 蓝色柔阴影，3D 图标放大 1.06 */
.page-g .ft-card,
.page-g .ft-mini { transition: transform .22s var(--ft-ease), box-shadow .22s var(--ft-ease); }
.page-g .ft-card .ft-icon,
.page-g .ft-mini .ft-icon { transition: transform .22s var(--ft-ease); }
@media (hover: hover) {
  .page-g .ft-card:hover,
  .page-g .ft-mini:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(37, 99, 235, .12); }
  .page-g .ft-card:hover .ft-icon,
  .page-g .ft-mini:hover .ft-icon { transform: scale(1.06); }
}

/* 规格表：行悬停整行浅蓝，会员列再深一档 */
.page-g .ft-spec tbody th,
.page-g .ft-spec tbody td { transition: background-color .22s var(--ft-ease); }
@media (hover: hover) {
  .page-g .ft-spec tbody tr:hover > * { background-color: var(--g-bg-blue); }
  .page-g .ft-spec tbody tr:hover > .is-hl { background-color: var(--g-bg-blue-2); }
}

/* 三步流程：步骤依次出现（ui.js 按兄弟元素错开 --reveal-delay），连接线在该步出现后从左往右画出来 */
.js-motion .page-g .ft-step + .ft-step::before {
  transform: scaleX(0);
  transform-origin: left center;
}
.js-motion .page-g .ft-step + .ft-step.is-in::before {
  transform: scaleX(1);
  transition: transform .6s var(--ft-ease) calc(var(--reveal-delay, 0s) + .2s);
}

@media (prefers-reduced-motion: reduce) {
  .page-g .ft-card,
  .page-g .ft-mini,
  .page-g .ft-icon,
  .page-g .ft-spec tbody th,
  .page-g .ft-spec tbody td { transition: none; }
  .page-g .ft-card:hover,
  .page-g .ft-mini:hover,
  .page-g .ft-card:hover .ft-icon,
  .page-g .ft-mini:hover .ft-icon { transform: none; }
  .js-motion .page-g .ft-step + .ft-step::before { transform: none; transition: none; }
}
.is-reduced-motion .page-g .ft-card:hover,
.is-reduced-motion .page-g .ft-mini:hover,
.is-reduced-motion .page-g .ft-card:hover .ft-icon,
.is-reduced-motion .page-g .ft-mini:hover .ft-icon { transform: none; }
.js-motion.is-reduced-motion .page-g .ft-step + .ft-step::before { transform: none; }

/* ── 响应式 ── */
@media (max-width: 1100px) {
  .page-g .ft-group { grid-template-columns: 180px minmax(0, 1fr); }
  .page-g .ft-prompt-body { grid-template-columns: 1fr; }
  .page-g .ft-cards--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .page-g .ft-group { grid-template-columns: 1fr; gap: 16px; padding: 20px; }
  .page-g .ft-group-head { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 0; padding: 0; }
  .page-g .ft-group-head h3 { font-size: 24px; }
  .page-g .ft-group-head p { margin-top: 0; }
  /* 窄屏组名横排：3D 图标缩小放到组名前面 */
  .page-g .ft-group-art { order: -1; width: 40px; height: 40px; margin: 0; padding: 0; }
  .page-g .ft-steps { grid-template-columns: 1fr; gap: 36px; max-width: 520px; margin: 0 auto; }
  .page-g .ft-step + .ft-step::before { display: none; }
}
@media (max-width: 640px) {
  .page-g .ft-tools-sec { padding-top: 48px; }
  .page-g .ft-group { padding: 16px; border-radius: 20px; }
  .page-g .ft-cards--3 { grid-template-columns: 1fr; gap: 12px; }
  /* 手机上转写大卡改横排，省纵向空间 */
  .page-g .ft-cards--3 .ft-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    padding: 16px;
    text-align: left;
  }
  .page-g .ft-cards--3 .ft-icon { grid-row: 1 / span 3; width: 64px; height: 64px; }
  .page-g .ft-cards--3 .ft-card h4 { margin-top: 0; font-size: 17px; }
  .page-g .ft-cards--3 .ft-card p { margin: 2px 0 8px; }
  .page-g .ft-cards--3 .ft-card .pg-price { justify-self: start; align-self: auto; padding: 3px 12px; font-size: 13px; }
  .page-g .ft-cards--2 { gap: 12px; }
  .page-g .ft-card--mid { padding: 18px 12px 16px; }
  .page-g .ft-card--mid h4 { font-size: 16px; }
  .page-g .ft-card--mid p { font-size: 13px; }
  .page-g .ft-card--mid .pg-price { font-size: 13px; }
  .page-g .ft-shoot { min-height: 190px; border-radius: 22px; }
  /* 更多工具：手机上两列竖排小格，6 个工具不至于拉成一长串 */
  .page-g .ft-cards--mini { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .page-g .ft-mini { flex-direction: column; gap: 8px; padding: 14px 12px; }
  .page-g .ft-mini .ft-icon { width: 44px; height: 44px; }
  .page-g .ft-mini h4 { font-size: 15px; }
  /* 参数表：手机上三列直接压进屏宽，不横向滚动（否则会员列被挤出屏幕看不到） */
  .page-g .ft-spec { min-width: 0; table-layout: fixed; }
  .page-g .ft-spec th,
  .page-g .ft-spec td { padding: 10px 8px; font-size: 13px; line-height: 1.55; word-break: break-word; }
  .page-g .ft-spec tbody th { width: 26%; }
  .page-g .ft-limit { padding: 24px 18px; }
  .page-g .ft-limit-head img { width: 44px; height: 44px; }
  .page-g .ft-limit ul { grid-template-columns: 1fr; }
}

/* 图片骨架屏（A 扫光）：变量、动画、失败占位在 page-g.css 末尾 */
.page-g .ft-shoot > img:not(.is-sk-done) {
  background: var(--sk-shine) 150% 0 / 200% 100% no-repeat, var(--sk-icon) center / 48px auto no-repeat, var(--sk-bg);
  animation: sk-shimmer 1.5s linear infinite;
}
.page-g .ft-shoot > .sk-fail { position: absolute; inset: 10px; width: auto; height: auto; border-radius: 20px; }