/* mobile.css — 统一手机端自适应（5 页共享）
 * 断点：≤768px（iPad Mini 竖屏以下）
 * 原则：大量使用 !important 覆盖各页自带样式，避免逐页改动
 */

/* ════════════════════════════════════════════════════
 * 全局（桌面 + 手机）：空图标盒统一隐藏
 * 原因：emoji 装饰已清理，这些空彩色盒子手工补 SVG 成本过大，
 *      隐藏后卡片更克制；视觉差异化改用 title / badge / 配色承担
 * ════════════════════════════════════════════════════ */
.task-ic:empty,
.pt-icon:empty,
.dim-icon:empty,
.ck-icon:empty,
.test-icon:empty,
.pain-ic:empty,
.gmp-icon:empty,
.spec-ic:empty,
.eq-cat-ic:empty,
.flow-step-icon:empty,
.domain-icon:empty,
.unique-card-icon:empty,
.bot-cap-icn:empty,
.ai3-icon:empty,
.db-icon:empty,
.deep-item-ic:empty,
.it-motto-icon:empty,
.fs-motto-icon:empty {
  display: none !important;
}

@media (max-width: 768px) {
  /* ============ 全局横向内边距收紧（120px → 16px）============ */
  nav, .hero, .stats-bar, .section, .cta, footer,
  .unique, .deep, .modules, .tasks, .gmp, .diff,
  .domains, .features, .dims, .loop, .flash,
  section[aria-label="相关模块"],
  section[aria-label^="关于 INCILABS"],
  section[aria-label^="什么是 INCILABS"] {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* ============ 导航 ============ */
  nav {
    height: 56px !important;
    padding: 0 16px !important;
  }
  .nav-logo { font-size: 17px !important; }
  .nav-links { display: none !important; }
  .nav-demo { display: none !important; }
  .nav-cta {
    padding: 7px 14px !important;
    font-size: 13px !important;
  }

  /* ============ Hero ============ */
  .hero {
    padding: 40px 16px 48px !important;
    min-height: auto !important;
  }
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .hero-badge {
    font-size: 11.5px !important;
    padding: 5px 12px !important;
    margin-bottom: 16px !important;
  }
  .hero h1 {
    font-size: 32px !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
    max-width: 100% !important;
  }
  .hero-sub {
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    margin-bottom: 20px !important;
  }
  .hero-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .btn-primary, .btn-outline {
    padding: 12px 24px !important;
    font-size: 15px !important;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
  }
  .hero-trust {
    font-size: 11.5px !important;
    gap: 14px !important;
  }
  .hero-pills {
    gap: 6px !important;
  }
  .hero-pill {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }
  /* 复杂 Mockup 在手机上直接隐藏，桌面端才显示
     注意：只隐藏 hero 区的 mockup，不要误伤动画区（.anim-stage / .mat-ai-section）里的同名类 */
  .hero .hero-mockup, .hero-modules,
  .fpa-screenshot-img + * { /* 隐藏 hover 才显示的 zoom 图标 */
    display: none !important;
  }

  /* ============ 动画舞台通用修复 ============
     当 body flex 由 row 变 column 时，右栏带 flex:1 会在无高度约束的父节点下塌陷为 0 高，
     导致截图/动画区完全不显示。强制右栏 block 布局 + 内部 stage 给 min-height。 */
  .it-right, .mat-ai-right, .fpa-right, .fs-right,
  .it-left, .mat-ai-left, .fpa-left, .fs-left {
    flex: none !important;
    width: 100% !important;
  }
  .it-body, .mat-ai-body, .fpa-body, .fs-body {
    flex-direction: column !important;
    gap: 28px !important;
  }
  .anim-stage, .it-stage, .fpa-stage, .fs-stage {
    position: relative !important;
    min-height: 340px !important;
    width: 100% !important;
  }
  .anim-layer, .it-layer, .fpa-layer, .fs-layer {
    position: absolute !important;
    inset: 0 !important;
  }
  .anim-layer img, .it-layer img, .fpa-layer img,
  .it-screenshot-img, .af-screenshot-img, .fpa-screenshot-img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* PDF 动画子元素（避免字号爆屏）*/
  .ap-outer, .ab-frame, .af-screenshot-wrap, .it-screenshot-wrap {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .ap-card {
    padding: 12px !important;
    font-size: 11px !important;
  }
  .ab-table {
    font-size: 10px !important;
  }
  .ab-table th, .ab-table td {
    padding: 4px 3px !important;
  }

  /* ============ Stats bar ============ */
  .stats-bar {
    height: auto !important;
    padding: 22px 16px !important;
  }
  .stats-bar-inner {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px 10px !important;
  }
  .stat {
    padding: 4px 6px !important;
    border-right: none !important;
  }
  .stat-num {
    font-size: 22px !important;
  }
  .stat-label {
    font-size: 11px !important;
    margin-top: 4px !important;
  }

  /* ============ Section 标题 / 副标题 / 内边距 ============ */
  .section, .features, .dims, .gmp, .domains, .tasks, .modules,
  .unique, .deep, .diff, .loop {
    padding-top: 44px !important;
    padding-bottom: 44px !important;
  }
  .section-title, .section-header h2, .hl-head h2 {
    font-size: 22px !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
  }
  .section-sub, .section-header p, .hl-head p {
    font-size: 14px !important;
    line-height: 1.65 !important;
    white-space: normal !important;
    max-width: 100% !important;
  }
  .section-tag {
    font-size: 11px !important;
    padding: 4px 10px !important;
  }

  /* ============ 各种多列 grid → 单列 ============ */
  .modules-grid, .task-grid, .dim-grid, .db-grid, .value-grid,
  .hl-grid, .domains-grid, .fs-grid, .feat-row, .diff-grid,
  .unique-row, .value-quote-items, .deep-inner, .loop-grid,
  .gmp-grid, .tool-grid,
  /* formula.html 补 */
  .dim-panel, .dim-panel.active, .pt-grid, .rpt-grid, .ck-grid,
  .comply-regions, .sr-score-row, .aix-dims, .safety-grid,
  .comply-grid, .aix-grid, .ver-grid, .cp-grid,
  /* lab.html 补 */
  .flow-steps, .test-features, .eq-grid, .eq-categories, .eq-row,
  .stab-grid, .cn-grid, .cn-row, .specs-grid, .dash-grid, .dash-stats,
  .flash-cards, .match-flow, .mx-table,
  /* plm.html 补 */
  .domain-panel, .domain-panel.active, .domain-features, .unique-cards,
  .retro-pillars, .retro-metric-row, .bot-grid, .ai3-metrics,
  .ai3-stages, .ai3-sample, .rec-row,
  /* index.html 补 */
  .mod-card {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* 表格类（带横向滚动）: 若同时保留 table 外观需包一层，此处简单折叠 */
  .eq-row, .cn-row, .rec-row {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* plm.html 里 .scene 子 div 用 inline style 写了 grid-template-columns:320px 1fr 这类
     走常规 selector 覆盖不了 inline style，需要用 attribute selector + !important */
  .scene > div[style*="grid-template-columns"],
  .scene > div > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* .scene 内部若有固定 320/640/440 px 列宽的 phone/desktop mockup，直接变单列 */
  .scene {
    grid-template-columns: 1fr !important;
  }

  /* 防止任何 .phone / .desk-frame / .fc-box 这类模拟器宽度溢出 */
  .phone, .desk-frame, .fc-box, .mockup, .hm-body, .ap-card {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box;
  }

  /* 兜底：所有 .section 内部直接子 div / 如果是 display:grid 且多列，强制单列 */
  .section [class*="-grid"]:not(.hm-inv-grid),
  .section [class*="-row"]:not(.hero-row) {
    grid-template-columns: 1fr !important;
  }
  .feat-row.reverse .feat-copy,
  .feat-row.reverse .feat-visual {
    order: unset !important;
  }

  /* ============ 卡片类通用：避免 overflow ============ */
  .hl-card, .module-card, .task-card, .dim-card, .value-card,
  .unique-card, .diff-card, .domain-card, .feat-card {
    padding: 20px !important;
  }

  /* ============ 相关模块（我们加的）============ */
  section[aria-label="相关模块"] > div > div {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
  section[aria-label="相关模块"] a {
    padding: 14px !important;
  }
  section[aria-label="相关模块"] a div:first-child {
    font-size: 13px !important;
  }
  section[aria-label="相关模块"] a div:last-child {
    font-size: 11.5px !important;
  }

  /* ============ 关于/什么是 段（AISEO）============ */
  section[aria-label^="关于 INCILABS"],
  section[aria-label^="什么是 INCILABS"] {
    padding: 28px 16px !important;
  }
  section[aria-label^="关于 INCILABS"] h2,
  section[aria-label^="什么是 INCILABS"] h2 {
    font-size: 18px !important;
  }
  section[aria-label^="关于 INCILABS"] p,
  section[aria-label^="什么是 INCILABS"] p {
    font-size: 12.5px !important;
    line-height: 1.75 !important;
  }

  /* ============ Footer ============ */
  footer {
    padding: 24px 16px !important;
    font-size: 12.5px !important;
    line-height: 1.6;
  }

  /* ============ CTA ============ */
  .cta {
    padding: 48px 16px !important;
  }
  .cta h2 {
    font-size: 24px !important;
  }
  .cta p {
    font-size: 14px !important;
  }
  .cta-btns {
    flex-direction: column !important;
    gap: 10px !important;
  }
  .cta-btn, .cta-btn.ghost {
    padding: 14px 24px !important;
    font-size: 15px !important;
    text-align: center;
  }

  /* ============ 演示弹窗（预约表单）============ */
  .dm-wrap {
    width: 92vw !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
  }
  .dm-left, .dm-right {
    padding: 22px !important;
  }
  .dm-col-title {
    font-size: 15px !important;
  }
  .dm-col-sub {
    font-size: 12px !important;
  }
}

/* 超小屏幕（iPhone SE 等 <380px）进一步优化 */
@media (max-width: 380px) {
  .hero h1 { font-size: 28px !important; }
  .section-title { font-size: 20px !important; }
  .stat-num { font-size: 20px !important; }
  .stats-bar-inner { gap: 14px 8px !important; }
}

/* ═══════════════════════════════════════════════════════
 * 手机端：4 模块页签替代（index.html 专用）
 * 桌面端不显示，手机端取代 .modules-grid
 * ═══════════════════════════════════════════════════════ */
.m-modules-tabs { display: none; }

@media (max-width: 768px) {
  /* 隐藏原 4 卡片网格，用页签版替代 */
  .modules-grid { display: none !important; }
  .m-modules-tabs { display: block !important; margin-top: 8px; }

  /* 直瀑式：4 面板竖排，无页签按钮 */
  .m-tab-panels {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .m-tab-panel {
    display: block;
    text-decoration: none;
    color: inherit;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    min-height: 260px;
  }

  /* panel 内统一 padding + 装饰光斑 */
  .m-panel-inner {
    padding: 28px 22px 26px;
    position: relative;
    z-index: 1;
  }
  .m-tab-panel::before {
    content: '';
    position: absolute;
    width: 260px; height: 260px; border-radius: 50%;
    top: -80px; right: -90px;
    filter: blur(40px);
    opacity: 0.55;
    pointer-events: none;
  }
  .m-tab-panel::after {
    content: '';
    position: absolute;
    width: 180px; height: 180px; border-radius: 50%;
    bottom: -60px; left: -60px;
    filter: blur(40px);
    opacity: 0.35;
    pointer-events: none;
  }

  /* ── PLM 紫 ── */
  .m-theme-plm { background: linear-gradient(160deg, #F5F3FF 0%, #EEF2FF 60%, #EDE9FE 100%); box-shadow: 0 8px 24px rgba(124,58,237,0.15); }
  .m-theme-plm::before { background: #A78BFA; }
  .m-theme-plm::after  { background: #60A5FA; }
  .m-theme-plm .m-panel-badge { background: #7C3AED20; border: 1px solid #A78BFA66; color: #7C3AED; }
  .m-theme-plm .m-panel-title { color: #1E1B4B; }
  .m-theme-plm .m-panel-cta { background: linear-gradient(135deg, #7C3AED, #6366F1); box-shadow: 0 6px 18px rgba(124,58,237,0.35); }

  /* ── LAB 暖灰 ── */
  .m-theme-lab { background: linear-gradient(160deg, #F8FAFC 0%, #F1F5F9 50%, #FEF3C7 100%); box-shadow: 0 8px 24px rgba(180,83,9,0.12); }
  .m-theme-lab::before { background: #FBBF24; }
  .m-theme-lab::after  { background: #64748B; }
  .m-theme-lab .m-panel-badge { background: #FEF3C7; border: 1px solid #FCD34D; color: #B45309; }
  .m-theme-lab .m-panel-title { color: #0F172A; }
  .m-theme-lab .m-panel-cta { background: linear-gradient(135deg, #334155, #475569); box-shadow: 0 6px 18px rgba(51,65,85,0.35); }

  /* ── FORMULA 蓝 ── */
  .m-theme-formula { background: linear-gradient(160deg, #EFF6FF 0%, #F0F9FF 60%, #DBEAFE 100%); box-shadow: 0 8px 24px rgba(29,78,216,0.12); }
  .m-theme-formula::before { background: #60A5FA; }
  .m-theme-formula::after  { background: #818CF8; }
  .m-theme-formula .m-panel-badge { background: #1D4ED820; border: 1px solid #93C5FD; color: #1D4ED8; }
  .m-theme-formula .m-panel-title { color: #1E3A8A; }
  .m-theme-formula .m-panel-cta { background: linear-gradient(135deg, #1D4ED8, #1E40AF); box-shadow: 0 6px 18px rgba(29,78,216,0.35); }

  /* ── AI 深色 ── */
  .m-theme-ai { background: linear-gradient(135deg, #0F172A 0%, #1E1B4B 55%, #1E293B 100%); box-shadow: 0 8px 28px rgba(0,0,0,0.35); }
  .m-theme-ai::before { background: #3B82F6; opacity: 0.5; }
  .m-theme-ai::after  { background: #A78BFA; opacity: 0.4; }
  .m-theme-ai .m-panel-badge { background: rgba(59,130,246,0.2); border: 1px solid #3B82F688; color: #60A5FA; }
  .m-theme-ai .m-panel-title { color: #fff; background: linear-gradient(90deg, #60A5FA, #A78BFA, #F472B6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
  .m-theme-ai .m-panel-sub { color: #CBD5E1; }
  .m-theme-ai .m-panel-pills span { color: #E2E8F0; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); }
  .m-theme-ai .m-panel-cta { background: linear-gradient(135deg, #3B82F6, #6366F1); box-shadow: 0 6px 22px rgba(59,130,246,0.45); }

  /* badge / 标题 / 副标 / pills / cta 公共排版 */
  .m-panel-badge {
    display: inline-block;
    padding: 5px 13px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 14px;
  }
  .m-panel-title {
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 10px;
  }
  .m-panel-sub {
    font-size: 14px;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 16px;
  }
  .m-panel-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
  }
  .m-panel-pills span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 16px;
    background: rgba(255,255,255,0.65);
    border: 1px solid rgba(0,0,0,0.06);
    font-size: 11.5px;
    font-weight: 600;
    color: #1E1B4B;
  }
  .m-panel-pills i {
    width: 7px; height: 7px; border-radius: 50%; display: inline-block;
  }
  .d-purple { background: #7C3AED; }
  .d-blue   { background: #3B82F6; }
  .d-green  { background: #10B981; }
  .d-amber  { background: #F59E0B; }
  .d-pink   { background: #EC4899; }
  .d-slate  { background: #64748B; }
  .d-indigo { background: #6366F1; }
  .m-panel-cta {
    display: inline-block;
    padding: 11px 20px;
    border-radius: 10px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }
}

/* ═══════════════════════════════════════════════════════
 * 手机端"精简叙事"规则：隐藏泛泛而谈 / 纯文字墙的 section
 * 目的：让动画和核心亮点更突出，避免手机用户被长段文字劝退
 * 覆盖页：index / ai / formula / lab / plm
 * ═══════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ====== 所有页面通用 ======
     .unique = 差异化/独特价值墙，每页都有，纯文字 3-6 张卡，
     内容和其他 section 的动画/亮点高度重复，手机端直接砍掉 */
  section.unique, .section.unique {
    display: none !important;
  }

  /* ====== index.html ======
     highlights: 整段与上方 4 页签重复（都在讲 4 大核心能力），手机端直接砍掉
     deep: 4 个 deep-item 只保留前 2 个（最核心），隐藏浮动 chip 装饰 */
  section.highlights,
  .section.highlights { display: none !important; }
  .deep .deep-list .deep-item:nth-child(n+3) { display: none !important; }
  .deep .deep-chip.ai,
  .deep .deep-chip.ap { display: none !important; }

  /* ====== ai.html ======
     diff: 4 张对比卡里留 1、3，去掉 2、4（避免滚动疲劳） */
  .diff .diff-grid .diff-card:nth-child(2),
  .diff .diff-grid .diff-card:nth-child(4) { display: none !important; }

  /* ====== formula.html ======
     ptypes (6 产品类型卡) / checks (6 API 端点卡) = 纯文字网格，无亮点
     comply 内的文字数字列表也删，保留地区 chip 可视化地图 */
  .section.ptypes,
  .section.checks,
  section.ptypes,
  section.checks { display: none !important; }
  .comply .comply-list { display: none !important; }

  /* ====== lab.html ======
     specs (6 规格卡 × 5 子 bullet) / gmp (8 合规卡) / dash (仪表盘说明)
     全是文字墙，手机端一律隐藏 */
  .section.specs,
  section.specs,
  section.gmp, .gmp,
  .section.dash,
  section.dash { display: none !important; }

  /* ====== plm.html ======
     compare: 6 列对比表，在手机上完全不可读 */
  section.compare,
  .section.compare { display: none !important; }
}