/* ============================================================
home-v4 —— 严格按 Figma「Icekredit.sg (改版）」还原
暖金 + 深色渐变体系。作用域 body.home-v4，完全独立于 home-v3。
首段为重置区：中和 main.css 的全局样式泄漏（body 居中/灰字、
p/h1-h6/button/a 默认样式、.nav 半透明深底、.link 下划线等）。
数值均为 Figma 1920 设计稿的 px，用 rem 表示（1rem = 16px）。
============================================================ */
/* ---------- 本地字体（CSP: font-src 'self'） ---------- */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap;
src: url('../../fonts/dmsans/dm-sans-latin-400-normal.woff2') format('woff2'),
url('../../fonts/dmsans/dm-sans-latin-400-normal.woff') format('woff'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap;
src: url('../../fonts/dmsans/dm-sans-latin-600-normal.woff2') format('woff2'),
url('../../fonts/dmsans/dm-sans-latin-600-normal.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300; font-display: swap;
src: url('../../fonts/inter/inter-latin-400-normal.woff2') format('woff2'),
url('../../fonts/inter/inter-latin-400-normal.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
src: url('../../fonts/inter/inter-latin-400-normal.woff2') format('woff2'),
url('../../fonts/inter/inter-latin-400-normal.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
src: url('../../fonts/inter/inter-latin-600-normal.woff2') format('woff2'),
url('../../fonts/inter/inter-latin-600-normal.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
src: url('../../fonts/inter/inter-latin-600-normal.woff2') format('woff2'),
url('../../fonts/inter/inter-latin-600-normal.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
src: url('../../fonts/inter/inter-latin-800-normal.woff2') format('woff2'),
url('../../fonts/inter/inter-latin-800-normal.woff') format('woff'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 800; font-display: swap;
src: url('../../fonts/inter/inter-latin-800-normal.woff2') format('woff2'),
url('../../fonts/inter/inter-latin-800-normal.woff') format('woff'); }
/* ---------- 令牌 ---------- */
:root {
--v4-gold: #FFEDC3;
--v4-gold-deep: #FFC059;
--v4-gold-brown: #6D583B;
--v4-brown: #7E4B18;
--v4-dark-grad: linear-gradient(90deg, #2C2B27 0%, #23221E 100%);
--v4-dark-warm: linear-gradient(134deg, #6D583B 0%, #7E6C4C 99%);
--v4-dark-fade: linear-gradient(180deg, rgba(103,83,57,0) 0%, rgba(57,45,29,0.8) 99%);
--v4-card-gray: #4F4B42;
--v4-glass: rgba(240,240,240,0.2);
--v4-glass-tag: rgba(255,255,255,0.3);
--v4-white: #FFFFFF;
--v4-ink-nav: #02073E;
--v4-ink-logo: #0F2137;
--v4-btn-nav: #E9B867;
--v4-line: #E9EDF5;
--v4-radius: 10px;
--v4-shadow: 0 15px 50px rgba(91,132,193,0.1);
}
/* ============================================================
重置区：中和 main.css 全局样式（v4 页面内全部接管）
============================================================ */
body.home-v4 {
margin: 0;
padding: 0;
font-family: 'Inter', 'Open Sans', 'helvetica neue', arial, 'microsoft yahei', sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.4;
color: var(--v4-white);
background: var(--v4-dark-grad);
text-align: left;
}
body.home-v4 .body-inner,
body.home-v4 .v4-page { margin: 0; padding: 0; width: 100%; }
body.home-v4 h1, body.home-v4 h2, body.home-v4 h3, body.home-v4 h4,
body.home-v4 h5, body.home-v4 h6 {
width: auto; display: block; margin: 0; padding: 0;
font-family: 'Inter', sans-serif;
}
body.home-v4 p { line-height: inherit; margin: 0; }
body.home-v4 a { color: inherit; text-decoration: none; }
body.home-v4 a:hover { text-decoration: none; }
body.home-v4 ul { list-style: none; margin: 0; padding: 0; }
body.home-v4 button { background: none; border: none; padding: 0; cursor: pointer; }
/* 导航：覆盖 main.css 的 .nav 半透明深底 / .nav-main / .menu 样式
只作用于 .nav.nav-main；.nav.nav-simple（移动端）交由 main.css 的
.screen-s/.screen-x 规则负责，避免 v4 的 display:none 把移动端头部整个隐藏。 */
body.home-v4 .nav.nav-main { position: fixed; top: 0; left: 0; width: 100%; background: #FFFFFF !important; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 0; font-size: 0; z-index: 99999990; border-bottom: 1px solid #E9EDF5; }
/* ---------- 布局基础 ---------- */
.v4-page { display: block; }
.v4-inner { max-width: 1440px; margin: 0 auto; padding-left: 2.1875rem; padding-right: 2.1875rem; }
.v4-sec { position: relative; }
/* 锚点定位留白：固定导航 90px（移动 60px）遮顶，让「Learn more」等原生 # 锚点
跳转后板块标题不被导航盖住（菜单平滑滚动走 JS 的 -90 偏移，不受影响）。 */
.v4-sec[id] { scroll-margin-top: 5.625rem; }
/* 板块标题：眉题 + 主标题 + 描述（居中）
眉题后衬装饰波浪线（Figma「图层 1」eyebrow-deco.svg，489×62，
金色渐变、fill-opacity 0.5，垫在文字下缘）。 */
.v4-eyebrow {
position: relative;
font-family: 'Inter', sans-serif; font-weight: 800; font-size: 3rem; line-height: 5rem;
letter-spacing: -0.0208em; color: var(--v4-gold); text-align: center;
margin-bottom: 2rem;
}
.v4-eyebrow::before {
content: '';
position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
width: 30.5625rem; height: 3.875rem; /* 489px × 62px */
background: url('../../media/images/home/eyebrow-deco.svg') no-repeat center / contain;
pointer-events: none; z-index: -1;
}
.v4-sec-title {
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 2.5rem; line-height: 5rem;
letter-spacing: -0.025em; color: var(--v4-gold); text-align: center; margin: 0;
}
/* 描述：居中。需用 body.home-v4 前缀抬升特异性，否则重置区
body.home-v4 p { margin:0 }（0,1,1）会覆盖本规则的 margin:0 auto，
导致 max-width 块被钉在左缘、无法水平居中。 */
body.home-v4 .v4-sec-desc {
font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 1.25rem; line-height: 2rem;
color: var(--v4-white); text-align: center; margin: 0 auto;
}
.v4-pill-btn {
display: inline-block; padding: 0.625rem 2.25rem; border-radius: 100px;
background: rgba(255,255,255,0.2); border: 1px solid var(--v4-white);
backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
color: var(--v4-white); font-weight: 600; font-size: clamp(0.9rem, 1.25vw, 1.5rem); line-height: clamp(0.9rem, 1.25vw, 1.5rem); text-decoration: none;
}
/* ============================================================
导航（navbar-home-v4.php）—— 白底 90px + 分隔线 + 菜单 + 暖金 CTA
移动端抽屉复用 main.css .screen-s/.screen-x 机制（参考 home-v3 的实现）。
============================================================ */
.v4-nav { background: #FFFFFF !important; height: 5.625rem; }
.v4-nav .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1440px; margin: 0 auto; }
/* Logo = 48px 图标 + 字标，白底深色，垂直居中（覆盖 main.css .logo 的背景图/固定宽高） */
body.home-v4 .v4-nav .v4-logo { width: auto; height: 3rem; margin: 0; padding: 0; float: none; background: none; display: flex; align-items: center; gap: 0.5rem; }
body.home-v4 .v4-nav .v4-logo-icon { display: block; width: 3rem; height: 3rem; flex: 0 0 auto; }
body.home-v4 .v4-nav .v4-logo-text { display: block; height: 1.625rem; width: auto; }
body.home-v4 .v4-nav .v4-logo:hover { opacity: 0.85; }
.v4-menu { display: flex; align-items: center; gap: 1.5rem; }
.v4-menu-item { list-style: none; }
body.home-v4 .v4-logo { color: var(--v4-ink-logo); }
/* 覆盖 main.css .menu>.menu-item>.menu-button 的 padding/字号/颜色；并用 gap 取代 padding 做间距 */
body.home-v4 .v4-menu .v4-menu-item { float: none; }
body.home-v4 .v4-menu .v4-menu-item::after { display: none !important; }
body.home-v4 .v4-menu .v4-menu-button { display: inline-block; padding: 0; margin: 0; color: var(--v4-ink-nav) !important; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.125rem; line-height: 2.0625rem; text-decoration: none; transition: color 0.3s ease; }
/* common.js 滚动到 hero 顶部会把 nav-main 摘掉 white-back；v4 导航固定白底，始终强制 */
body.home-v4 .nav.nav-main:not(.white-back) .v4-menu-button,
body.home-v4 .nav.nav-main:not(.white-back) .v4-logo { color: var(--v4-ink-nav); }
/* 滚动高亮当前导航项：金色 #FFC059（!important 压制 main.css .nav.white-back 的高优先级 #333） */
body.home-v4 .v4-menu .v4-menu-item.menu-item-active .v4-menu-button { color: var(--v4-gold-deep) !important; }
body.home-v4 .v4-nav .nav-cld-panel { float: none; padding: 0; }
body.home-v4 .v4-nav-cta { display: inline-flex; align-items: center; justify-content: center; padding: 0 1.75rem; height: 2.5rem; border-radius: 8px; background: var(--v4-btn-nav); color: #000000; font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; }
/* 低于 1200px：桌面横排导航空间不足，隐藏 Contact Us CTA。
移动抽屉（<1000px，body.screen-s/.screen-x）内由下方 .screen-s/.screen-x 规则
以更高特异性重新 display:flex，Contact Us 仍作为抽屉底部按钮保留。 */
@media (max-width: 1199px) {
body.home-v4 .nav.nav-main .v4-nav-cta { display: none; }
}
/* main.css .nav 基类自带 padding:0 1.5rem（左右 24px），会把 header 内容整体推右。
桌面形态清掉，让 .nav-inner 的 .pd-lr-m 统一控制两端（同 home-v3 的处理）。 */
@media (min-width: 1001px) {
body.home-v4 .nav.nav-main { padding: 0; }
}
/* ============================================================
HERO —— 4 图背景轮播，文案层独立淡入淡出（Figma banner1-4）
背景无遮罩（banner1），文字自带 textShadow。
============================================================ */
.v4-hero { position: relative; overflow: hidden; width: 100%; aspect-ratio: 32 / 11; min-height: 28rem; }
.v4-hero-slides { position: absolute; inset: 0; }
.v4-hero-slide { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center; background-size: contain; background-color: #11141a; opacity: 0; transition: opacity 0.8s ease; }
.v4-hero-slide.is-active { opacity: 1; }
/* 双档背景：>1400px 视口足够宽，hero 宽高比 ≈ 32/11 与图一致，contain 整图展示；
≤1400px 时 hero 高度被 min-height(28rem/40rem) 钉住，宽高比偏离 32/11，
contain 会在两侧留出 #11141a 黑条 → 改 cover 填满自适应（居中裁切两侧）。 */
@media (max-width: 1400px) {
.v4-hero-slide { background-size: cover; }
}
/* 文案层铺满 hero，底部预留统计条上提重叠的高度（4rem），
用 CSS Grid 单格（1/1）堆叠 4 张文案、align-items 垂直居中，中心落在
「hero 顶部 → 统计条顶缘」区间的中点。
选择器带 .v4-hero .v4-inner 抬升特异性，压过下方 .v4-sec > .v4-inner 的
position:relative / z-index:1（否则被盖回 relative，绝对定位失效）。
左对齐由 .v4-inner 的 padding-left 保证（与下方模块一致），
不在 copy 上再设 left 偏移，杜绝任何左右居中的级联干扰。 */
.v4-hero .v4-inner.v4-hero-content { position: absolute; top: 0; left: 0; right: 0; bottom: 4rem; z-index: 2; display: grid; grid-template: 1fr / 1fr; align-items: center; }
.v4-hero-copy { grid-area: 1 / 1; text-align: left; margin-top: 2rem; max-width: 66.625rem; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; }
.v4-hero-copy.is-active { opacity: 1; pointer-events: auto; }
body.home-v4 .v4-hero-title {
font-family: 'Inter', sans-serif; font-size: clamp(1.75rem, 3.54vw, 4.25rem); line-height: clamp(2rem, 4.17vw, 5rem); font-weight: 700;
letter-spacing: -0.0147em; color: var(--v4-white);
text-shadow: 5px 5px 30px rgba(72,116,165,0.5);
display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.5rem;
}
/* 副标题（第 2–4 页轮播标题）按设计稿为 3.5rem(56px)，小于主标题 4.25rem(68px)。
早期误用与主标题相同的 clamp，导致全屏时 "International AI Solution Provider"
超出 .v4-hero-copy 的 max-width(66.625rem≈1066px) 而换行；改回 3.5rem 使其单行放下。
display:block 让纯文本按空格正常折行（flex 会把整段当单个匿名项，禁止换行）。 */
body.home-v4 .v4-hero-title-sub { font-size: clamp(1.75rem, 2.92vw, 3.5rem); display: block; margin-bottom: clamp(0.8rem, 2vw, 1.3rem); }
.v4-taas-box { display: inline-block; padding: 0 1.25rem; margin: 0 0.5rem; border: 2px solid var(--v4-gold-deep); border-radius: 10px; color: var(--v4-gold-deep); text-shadow: none; }
.v4-hero-eyebrow { font-family: 'PingFang SC','Inter',sans-serif; font-size: clamp(0.9rem, 1.25vw, 1.6rem); line-height: clamp(1.5rem, 2.5vw, 3rem); font-weight: 700; color: var(--v4-white); margin: 1.25rem 0 0.75rem; }
.v4-hero-sub { font-family: 'PingFang SC','DM Sans',sans-serif; font-size: clamp(0.9rem, 1.25vw, 1.6rem); line-height: clamp(1.5rem, 1.875vw, 2.25rem); color: var(--v4-white); max-width: 60rem; }
.v4-hero .v4-pill-btn { margin-top: 2rem; }
/* 轮播分页点：上移到统计条之上（Figma「分页点」y=636，约 hero 底 102px，避开浮起的玻璃胶囊）；
当前页 dot 拉长为 48px 胶囊（Figma 分页点 120×12：当前项 48px + 3 个 12px 圆点）。 */
.v4-hero-indicators { position: absolute; z-index: 3; left: 50%; bottom: 6rem; transform: translateX(-50%); display: flex; align-items: center; gap: 0.75rem; }
.v4-hero-indicators .dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: width 0.3s ease, background 0.3s ease; }
.v4-hero-indicators .dot.is-active { width: 3rem; border-radius: 0.375rem; background: #ffffff; }
/* 统计条 —— 玻璃胶囊，浮在 Hero 与下一板块(AI PRODUCT)的接缝处：负 margin 上提一半高度，压在 hero 底部之上
4 等分网格布局；分隔竖线改用 .v4-stat::before 画在每格左缘（首格除外），
窄屏切 2 列（中间换行）时隐藏第 3 格分隔线，避免多出竖线。 */
.v4-hero-stats { position: relative; z-index: 10; margin: -4rem auto 0; width: calc(100% - 4.375rem); max-width: 85.625rem; display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 1.5rem; padding: 1.25rem 3rem 1.5rem; background: rgba(255, 243, 213, 0.5); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: 10px; }
.v4-stat { position: relative; text-align: left; padding: 0 0.625rem 0 2rem; }
.v4-stat::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: clamp(2.5rem, 3.3vw, 3.8125rem); background: rgba(255,255,255,0.5); }
.v4-stat:first-child::before { display: none; }
.v4-stat-num { font-family: 'Inter', sans-serif; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.2; font-weight: 600; color: var(--v4-white); }
.v4-stat-unit { font-family: 'Inter', sans-serif; font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.2; font-weight: 600; color: var(--v4-white); }
.v4-stat-label { display: block; font-family: 'Inter', sans-serif; font-size: clamp(1rem, 1.3vw, 1.25rem); line-height: 1.3; font-weight: 500; letter-spacing: -0.05em; color: var(--v4-white); margin-top: 0.25rem; }
/* ============================================================
AI PRODUCT —— 深色渐变 + 背景图 opacity 0.3
TaaS 横幅卡（Figma #10002:16 —— 1440×680，深灰 #4F4B42 圆角 10px）
============================================================ */
.v4-ai { background: var(--v4-dark-grad); padding: 5rem 0; }
.v4-ai-banner {
position: relative; display: flex; flex-direction: column;
background: var(--v4-card-gray); border-radius: var(--v4-radius);
overflow: hidden; margin: 3rem 0 2rem; min-height: 42.5rem; /* 680px */
}
/* 顶部金色叠层（Figma #8005:207 —— 1440×401 金色 #FFEDC3 @0.2，仅顶部两角圆角）。
从左到右渐变：左侧 0.2 满金 → 右侧完全透明（1→0），让金色在卡右缘淡出。
置于全息图之上（z-index 1 > 图片 z-index 0）、文案之下（z-index 2）。 */
.v4-ai-banner::before {
content: '';
position: absolute; left: 0; top: 0; width: 100%; height: 25.0625rem;
background: linear-gradient(90deg, rgba(255,237,195,0.2) 0%, rgba(255,237,195,0) 100%);
border-radius: 10px 10px 0 0;
pointer-events: none; z-index: 1;
}
/* 商务数据全息界面（Figma #8005:277 —— 802×401 横向 2:1，x=638 置于右上，opacity 0.5）
垫在文案之下（z-index 1），保证标题/描述可读。 */
.v4-ai-banner-media { position: absolute; top: 0; right: 0; width: min(50.125rem, 60%); aspect-ratio: 2 / 1; pointer-events: none; z-index: 0; }
/* 全息图水平镜像（scaleX(-1)），并把左缘/下缘向卡底色 #4F4B42 渐变过渡，
使图片与左侧文案区自然融合、不显生硬裁切。 */
.v4-ai-banner-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.5; display: block; transform: scaleX(-1); }
.v4-ai-banner-media::after {
content: '';
position: absolute; inset: 0;
background:
linear-gradient(90deg, #4F4B42 0%, rgba(79,75,66,0.55) 22%, rgba(79,75,66,0) 50%),
linear-gradient(180deg, rgba(79,75,66,0) 55%, rgba(79,75,66,0.9) 100%);
}
/* 标题（Figma #8005:208 —— 32px Semi Bold 金色）+ 描述（#8005:215 —— 16px Light 白） */
.v4-ai-banner-text { position: relative; z-index: 2; padding: 3rem 3rem 0 3rem; min-width: 0; }
.v4-ai-banner-title { font-family: 'Inter', sans-serif; font-size: 2rem; line-height: 3.0625rem; font-weight: 600; letter-spacing: -0.0313em; color: var(--v4-gold); margin: 0 0 0.375rem; }
/* 描述（Figma #8005:215 —— Inter Light 300 · 16px · line-height 24px · 白）。
用 body.home-v4 前缀抬升特异性，否则重置区 body.home-v4 p{ font-size:inherit;
line-height:inherit; margin:0 }（0,1,1）会覆盖本规则的 line-height:1.5rem 与 margin:0 0 2rem，
导致行高退回 1.4、下边距归零。 */
body.home-v4 .v4-ai-banner-desc { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.5rem; font-weight: 300; color: var(--v4-white); margin: 0 0 2rem; max-width: 47rem; }
/* 三条流程胶囊（Figma #10002:8 —— 2 列：第一行 Raw Data + TaaS Assetization，
第二行仅左列 Millisecond Decisioning；各胶囊 365×68，白→金渐变，圆角 100px） */
.v4-ai-overlay { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; max-width: 46.625rem; }
.v4-ai-overlay-line { display: flex; flex-direction: column; justify-content: center; border-radius: 100px; background: linear-gradient(177deg, rgba(255,255,255,0.8) 0%, rgba(255,237,195,0.8) 100%); padding: 0.625rem 1.75rem; min-height: 4.25rem; }
.v4-ai-overlay-line strong { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.125rem; line-height: 1.5rem; color: var(--v4-brown); white-space: nowrap; }
.v4-ai-overlay-line span { font-family: 'Inter', sans-serif; font-weight: 300; font-size: 1rem; line-height: 1.5rem; color: #000000; white-space: nowrap; }
/* 6 个能力项（Figma #10002:15，y=452 —— 3 列 × 2 行，贴底；图标 60px + 白字 Medium 20px，
无底色无描边）。margin-top:auto 将其压到卡底部，行距 43px / 列距 70px 近似 Figma 间距。 */
.v4-ai-pills {
position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr);
gap: 2.5rem clamp(1.75rem, 4vw, 4.375rem); margin-top: auto; padding: 0 3rem 3rem 3rem;
}
.v4-ai-pill { display: flex; align-items: center; gap: 1.25rem; color: var(--v4-white); font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.2rem; line-height: 2rem; }
.v4-ai-pill img { width: 3.75rem; height: 3.75rem; flex: 0 0 auto; }
/* ============================================================
产品四卡 + 四步流程 —— 暖棕渐变 + 背景图 opacity 0.15
============================================================ */
.v4-products { background: var(--v4-dark-warm); padding: 5rem 0; }
.v4-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.v4-card { background: var(--v4-glass); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: var(--v4-radius); padding: 2.25rem; }
.v4-card-head { display: flex; align-items: flex-start; gap: 1.375rem; margin-bottom: 1.25rem; }
/* 图标：垫「image 47」暖金瓷砖纹理背景图（Figma 79×86，无纯色灰底），白色矢量图标居中 */
.v4-card-ic { position: relative; flex: 0 0 auto; width: 4.9375rem; height: 5.375rem; display: flex; align-items: center; justify-content: center; }
.v4-card-ic::before { content: ''; position: absolute; inset: 0; background: url('../../media/images/home/card-tile-bg.png') center / cover no-repeat; }
.v4-card-ic img { position: relative; z-index: 1; width: 2.2rem; height: 2.2rem; object-fit: contain; display: block; }
.v4-card-title { font-family: 'Inter', sans-serif; font-size: 2rem; line-height: 3rem; font-weight: 600; color: var(--v4-gold); }
.v4-card-sub { font-family: 'Inter', sans-serif; font-size: 1.25rem; line-height: 1.875rem; color: var(--v4-white); }
/* 特性列表：2 列（Figma 左右两栏）；项目符号用金色对勾圆形（Combined shape 16072） */
.v4-card-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; row-gap: 0.5rem; }
.v4-card-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.625rem; color: var(--v4-white); }
.v4-card-features li::before { content: ''; flex: 0 0 auto; width: 1.25rem; height: 1.25rem; background: url('../../media/images/home/bullet-check.svg') center / contain no-repeat; margin-top: 0.1875rem; }
/* 四步流程：图标在上 + 标题 + 描述（左对齐），箭头横向分隔（Figma「四个流程」88×88 方灰底图标） */
.v4-flow { display: flex; align-items: flex-start; gap: 1rem; margin-top: 3rem; }
.v4-flow-item { flex: 1; text-align: left; }
.v4-flow-ic { display: flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; margin: 0 0 0.9375rem; }
.v4-flow-ic img { width: 3.5rem; height: 3.625rem; object-fit: contain; display: block; }
.v4-flow-title { font-family: 'Inter', sans-serif; font-size: 2rem; line-height: 3rem; font-weight: 600; color: var(--v4-gold); margin: 0; }
.v4-flow-desc { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.625rem; color: var(--v4-white); max-width: 18.75rem; margin: 0; }
.v4-flow-arrow { flex: 0 0 auto; padding-top: 9.4375rem; }
.v4-flow-arrow img { width: 2.125rem; height: 1.5rem; display: block; }
/* ============================================================
AWARDS —— 深色渐变 + 背景图 opacity 0.2
6 奖项卡（2×3，左列 3 卡右列 3 卡）+ 认证条
============================================================ */
.v4-awards { background: var(--v4-dark-grad); padding: 5rem 0; }
.v4-award-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin: 3rem 0 2rem; }
.v4-award { display: flex; align-items: center; gap: 0.75rem; background: var(--v4-glass); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: var(--v4-radius); padding: 1.5rem; }
.v4-award-ic { flex: 0 0 6.625rem; width: 6.625rem; height: 6.625rem; position: relative; display: flex; align-items: center; justify-content: center; background: url('../../media/images/home/award-plate.png') no-repeat center / contain; }
.v4-award-logo { position: relative; z-index: 1; display: block; object-fit: contain; }
.v4-award-logo-cb { width: 2.3125rem; height: 1.5625rem; }
.v4-award-logo-kpmg { width: 3.5rem; height: 1.4375rem; }
.v4-award-logo-davos { width: 1.875rem; height: 2.0625rem; }
.v4-award-logo-cyberport, .v4-award-logo-srdi { width: 3rem; height: 3rem; }
.v4-award-logo-oases { width: 2.9375rem; height: 2.9375rem; }
.v4-award-logo-cb, .v4-award-logo-kpmg, .v4-award-logo-davos { box-shadow: 1px 1px 5px 0 rgba(225, 173, 111, 1); }
.v4-award-txt { min-width: 0; }
.v4-award-title { font-family: 'Inter', sans-serif; font-size: 2rem; line-height: 3.0625rem; letter-spacing: -0.0313em; font-weight: 600; color: var(--v4-gold); }
.v4-award-sub { font-family: 'Inter', sans-serif; font-size: 1.25rem; line-height: 1.875rem; color: var(--v4-white); }
.v4-cert-banner { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); align-items: center; gap: 2rem; padding: 1.5rem 3rem; background: rgba(0,0,0,0.2); border: 1px solid #FEF2DA; backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: var(--v4-radius); }
.v4-cert-item { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; }
.v4-cert-item img { height: 5.3125rem; display: block; }
.v4-cert-item-cmmi img { height: 4.375rem; }
.v4-cert-item-text { justify-content: center; }
.v4-cert-label { color: var(--v4-white); font-family: 'Inter', sans-serif; font-size: 1.25rem; line-height: 1.5rem; letter-spacing: -0.05em; }
/* ============================================================
NEWS / PRESS —— 背景图 opacity 0.1，卡片 blur 5px
严格按 Figma 新闻卡：466×593，一页 3 张（卡距 21px）。
缩略图 418×254；标题最多 2 行；摘要最多 4 行；
分隔线固定在日期正上方，日期贴卡底。
============================================================ */
.v4-news { background: var(--v4-dark-grad); padding: 5rem 0; }
/* NEWS 无主标题/描述，眉题到新闻卡之间需足够间距（Figma 眉题 y≈100、卡片 y≈261，间隙约 4rem） */
.v4-news .v4-eyebrow { margin-bottom: 4rem; }
.v4-news-carousel { overflow: hidden; }
.v4-news-track { display: flex; gap: 1.3125rem; transition: transform 0.4s ease; }
/* 卡片 466×593（按内容区自适应，恰好 3 张一排），玻璃底 blur 5px，圆角 10px；内 padding 24px */
.v4-news-card {
flex: 0 0 calc((100% - 2.625rem) / 3); height: 37.0625rem;
background: var(--v4-glass); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);
border-radius: var(--v4-radius); padding: 1.5rem;
text-decoration: none; display: flex; flex-direction: column;
}
/* 缩略图 418×254，圆角 5px，Figma 阴影 */
.v4-news-thumb {
display: block; width: 100%; height: 15.875rem; flex: 0 0 auto;
border-radius: 5px; background-size: cover; background-position: center;
box-shadow: var(--v4-shadow);
}
/* 标题 24px Bold 700，最多 2 行（超出省略） */
.v4-news-title {
font-family: 'Inter', sans-serif; font-size: 1.5rem; line-height: 1.875rem; font-weight: 700;
color: var(--v4-gold); margin-top: 1.5rem;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 摘要 16px Regular 400，最多 4 行（超出省略） */
.v4-news-summary {
font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.625rem; font-weight: 400;
color: var(--v4-white); margin-top: 1.5rem;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
/* 卡底：分隔线固定在日期正上方（半透明白 1px，Figma #8005:338），日期贴底 */
.v4-news-foot { display: flex; flex-direction: column; gap: 1.5rem; margin-top: auto; }
.v4-news-divider { display: block; height: 1px; background: rgba(255,255,255,0.5); }
.v4-news-meta { font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.625rem; color: var(--v4-white); }
/* 底部只有左右两个翻页按钮（一套：左 + 右），居中排布 */
.v4-news-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
.v4-news-prev, .v4-news-next {
width: 3.75rem; height: 3.75rem; background: transparent; border: none; cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
}
.v4-news-prev img, .v4-news-next img { width: 100%; height: 100%; display: block; }
/* 置灰：仅当按钮被禁用时（首页左禁用、末页右禁用）半透明 */
.v4-news-prev:disabled, .v4-news-next:disabled { opacity: 0.35; cursor: default; }
@media (max-width: 767px) {
.v4-news-prev, .v4-news-next { width: 2.5rem; height: 2.5rem; }
}
/* ============================================================
GLOBAL —— 世界地图（Figma「背景5-GLOBAL」裁切后 1920×808）+ 地区标注
背景图已裁掉顶部标题/描述区，只剩地图；标题/描述流式排在地图上方。
地区坐标点为白色光点（12px 实心白核 + 向外扩散涟漪环），
国家标签为半透明白胶囊（白 30% + blur 1.5px + 4px 圆角）。
============================================================ */
.v4-global { background: var(--v4-dark-grad); padding: 5rem 0 0; }
/* 标题块：普通流式，始终排在地图上方，间距固定，不随地图大小变化。 */
.v4-global .v4-inner { padding-top: 0; padding-bottom: 3rem; }
/* 地图表面：宽度 100%、高度按裁切后背景图 1920:808 等比；图片铺满不裁切，
使坐标点/标签在任何分辨率下都落在同一地图位置。 */
.v4-map {
position: relative; width: 100%;
aspect-ratio: 1920 / 808;
background-image: url('../../media/images/home/v4-global-bg.png');
background-size: 100% 100%;
background-position: center;
pointer-events: none;
}
/* 光点：中心 12px 实心白核。
白核常亮不闪；涟漪环（::after）从小圆点边缘向外扩散并淡出，错峰播放。 */
.v4-map-dot {
position: absolute; width: 0.75rem; height: 0.75rem;
transform: translate(-50%, -50%); border-radius: 50%;
background: #FFFFFF;
box-shadow: 0 0 4px rgba(0,0,0,0.25);
}
/* 向外扩散的涟漪环 */
.v4-map-dot::after {
content: ''; position: absolute; left: 50%; top: 50%;
width: 0.75rem; height: 0.75rem; margin: -0.375rem 0 0 -0.375rem;
border-radius: 50%; border: 2px solid rgba(255,255,255,0.9);
animation: v4-map-ripple 2.4s ease-out infinite;
}
.v4-map-dot:nth-child(3n)::after { animation-delay: 0.8s; }
.v4-map-dot:nth-child(3n+1)::after { animation-delay: 1.6s; }
@keyframes v4-map-ripple {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(3.2); opacity: 0; }
}
/* 国家标签胶囊 */
.v4-map-tag {
position: absolute; padding: 0.1875rem 0.5rem; border-radius: 4px;
background: rgba(255,255,255,0.3);
backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px);
color: var(--v4-white); font-family: 'Inter', sans-serif; font-weight: 600;
font-size: 1rem; line-height: 1.625rem; white-space: nowrap;
text-shadow: 0 0 4px rgba(0,0,0,0.25);
}
@media (max-width: 767px) {
.v4-global { padding: 3rem 0 0; }
.v4-global .v4-inner { padding-bottom: 2rem; }
.v4-map-dot { width: 0.5rem; height: 0.5rem; box-shadow: 0 0 3px rgba(0,0,0,0.25); }
.v4-map-dot::after { width: 0.5rem; height: 0.5rem; margin: -0.25rem 0 0 -0.25rem; border-width: 1px; }
.v4-map-tag { font-size: 0.6875rem; line-height: 1rem; padding: 0.125rem 0.375rem; }
}
/* ============================================================
ABOUT —— 暖棕渐变 + 背景图 opacity 0.2
时间轴（5 节点：2015 金色 / 其余白）+ 双列玻璃卡
============================================================ */
.v4-about { background: var(--v4-dark-warm); padding: 5rem 0; }
/* 时间轴：横向滚动轮播（Figma 5 节点 + 左右同款箭头按钮）。
结构：.v4-timeline 相对定位，中线 ::before 贯穿整个容器宽度（拉满）；
左右箭头绝对定位贴在中线两端（在线上）；.v4-timeline-viewport 为原生横向滚动容器；
节点可点击切换、自动轮播高亮闪烁、可横向拖动、左右按钮可逐点移动。 */
.v4-timeline { position: relative; margin: 3rem 0; padding: 1rem 0 7rem; }
/* 中线：与 .v4-sec 同宽（整屏通栏，Figma #8005:15 全宽 1920 贯穿），位于节点圆环中心，半透明白，垫在节点/按钮之下 */
.v4-timeline::before { content: ''; position: absolute; top: 2.5rem; left: 50%; width: 100vw; margin-left: -50vw; height: 1px; background: var(--v4-white); opacity: 0.5; pointer-events: none; z-index: 0; }
/* 左右箭头：实底圆形 #333333（不透明，覆盖住后面的中线），白箭头居中
用 body.home-v4 前缀抬升特异性，压过重置区 body.home-v4 button{background:none} */
body.home-v4 .v4-timeline-arrow { position: absolute; top: 1.25rem; width: 2.5rem; height: 2.5rem; cursor: pointer; z-index: 2; border-radius: 50%; background: #988973; display: flex; align-items: center; justify-content: center; }
.v4-timeline-arrow img { width: 1.25rem; height: 1.25rem; display: block; }
.v4-timeline-arrow.prev { left: 0; }
.v4-timeline-arrow.next { right: 0; }
.v4-timeline-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; position: relative; z-index: 1; }
.v4-timeline-viewport::-webkit-scrollbar { display: none; }
.v4-timeline-track { display: flex; align-items: flex-start; gap: 0rem; width: max-content; padding: 0 8rem 0 6rem; }
.v4-timeline-item { flex: 0 0 auto; width: 17rem; display: flex; flex-direction: column; align-items: flex-start; }
/* 节点圆点：纯 CSS 12px 实心圆（默认白），居中落在中线上 */
.v4-timeline-node { position: relative; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--v4-white); margin: 1.125rem 0 2rem; cursor: pointer; }
/* 未高亮节点：点外一圈描边圆环 */
.v4-timeline-node::before { content: ''; position: absolute; inset: -0.25rem; border-radius: 50%; border: 1px solid var(--v4-white); }
.v4-timeline-year { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 2.25rem; line-height: 1.875rem; color: var(--v4-white); margin: 0 0 0 0.375rem; transform: translateX(-50%); cursor: pointer; }
.v4-timeline-year-gold { color: var(--v4-gold-deep); }
/* 默认隐藏正文（正文已迁到外层 tip，item 内不再有 body） */
.v4-timeline-body { display: none; }
/* 外层浮动 tip：绝对定位到高亮年份正下方，左缘与年份左缘对齐（不居中），宽度由 JS 按剩余空间动态限制、不够自动换行 */
.v4-timeline-tip { position: absolute; z-index: 5; left: 0; top: 8rem; display: flex; flex-direction: column; align-items: flex-start; pointer-events: none; }
/* 标题：单行不换行，全部展示 */
.v4-timeline-title { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 1.5rem; line-height: 1.875rem; color: var(--v4-white); white-space: nowrap; }
/* 描述：一行能展示就不换行，展示不完自然换行（不截断、不省略） */
.v4-timeline-desc { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 1.25rem; line-height: 1.625rem; color: var(--v4-white); margin-top: 0.5rem; max-width: 28rem; }
/* 高亮：圆点变金色（同 2015）、年份变金、正文浮动淡入；圆点外扩一圈金色涟漪环 */
.v4-timeline-item.is-active .v4-timeline-node { background: var(--v4-gold-deep); }
.v4-timeline-item.is-active .v4-timeline-node::before { border-color: transparent; }
.v4-timeline-item.is-active .v4-timeline-year { color: var(--v4-gold-deep); }
.v4-timeline-tip { animation: v4TimelineReveal 0.4s ease-out; }
@keyframes v4TimelineReveal {
from { opacity: 0; transform: translateY(0.75rem); }
to { opacity: 1; transform: translateY(0); }
}
.v4-timeline-item.is-active .v4-timeline-node::after {
content: ''; position: absolute; inset: 0; border-radius: 50%;
border: 2px solid rgba(255,192,89,0.9);
animation: v4TimelineRipple 1.6s ease-out infinite;
}
@keyframes v4TimelineRipple {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2.6); opacity: 0; }
}
.v4-about-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.v4-about-col { background: var(--v4-glass); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); border-radius: var(--v4-radius); padding: 2.25rem; }
.v4-col-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
/* 列标题图标：金色纹理衬底（Figma image 47/48，79×86）叠白色图形（about-col-icon-*.svg，35×35，1px 暖棕投影）。
尺寸与产品卡 .v4-card-ic 保持一致（79×86 底 / 2.2rem 图形），让 Key Differentiators 头与 System/Agent 头视觉同大 */
.v4-col-ic { position: relative; flex: 0 0 auto; width: 4.9375rem; height: 5.375rem; display: block; }
.v4-col-ic .v4-col-ic-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v4-col-ic .v4-col-ic-glyph { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 2.2rem; height: 2.2rem; object-fit: contain; display: block; filter: drop-shadow(1px 1px 0 rgba(176,146,115,1)); }
.v4-col-title { font-family: 'Inter', sans-serif; font-size: 2rem; line-height: 3rem; font-weight: 600; color: var(--v4-gold); margin: 0; }
.v4-col-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-family: 'Inter', sans-serif; font-size: 1rem; line-height: 1.625rem; color: var(--v4-white); margin-bottom: 0.75rem; }
.v4-col-list li::before { content: ''; flex: 0 0 auto; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--v4-gold-deep); margin-top: 0.5rem; }
/* ============================================================
CORE TEAM —— 白底 + 背景图，全屏无限循环拖动轮播
4 张照片卡（Figma 466×706）按「顾总→Chinang→Jim→湾总」顺序重复。
结构：.v4-team-scroll（视口 overflow hidden，无滚动条）→
.v4-team-track（卡片条，JS 手势平移，transform 位移）→ 卡片。
初始视口：左露半张 + 中间三张 + 右露半张（5 卡等宽排布）。
============================================================ */
.v4-team { background: #FFFFFF; padding: 2.8rem 0 6.5rem; }
.v4-team-eyebrow { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 2.5rem; line-height: 5rem; color: var(--v4-gold-brown); text-align: center; margin-bottom: 2rem; }
.v4-team-scroll {
--v4-team-step: 26rem; /* 单卡宽 */
--v4-team-gap: 4rem;
position: relative;
overflow: hidden;
height: calc(var(--v4-team-step) * 706 / 466 + 7rem);
cursor: grab; user-select: none; -webkit-user-select: none;
}
.v4-team-scroll:active { cursor: grabbing; }
.v4-team-track {
position: absolute; left: 50%; top: 50%;
transform: translate(-50%, -50%);
display: flex; align-items: center; gap: var(--v4-team-gap);
flex: 0 0 auto; will-change: transform;
}
.v4-team-card {
position: relative; flex: 0 0 var(--v4-team-step); width: var(--v4-team-step); aspect-ratio: 466 / 706;
border-radius: 20px; overflow: hidden;
background: linear-gradient(180deg, #EBEBEB 0%, #D7D7D7 100%);
border: 2px solid #C2C2C2; cursor: pointer;
}
/* 上下错位：按 4 人循环节奏（Figma：顾总 y=0 上、Chinang y=90 下、Jim y=0 上、湾总 y=90 下） */
.v4-team-card:nth-child(4n+1) { transform: translateY(-3.5rem); } /* Dr. Lingyun Gu */
.v4-team-card:nth-child(4n+2) { transform: translateY(2.25rem); } /* Chinang Kong */
.v4-team-card:nth-child(4n+3) { transform: translateY(-3.5rem); } /* Jim Costello */
.v4-team-card:nth-child(4n) { transform: translateY(2.25rem); } /* Wan Duan */
.v4-team-card:hover { border-color: #B7A37C; }
.v4-team-card:focus { outline: none; border-color: var(--v4-gold-deep); }
/* 照片区：仅覆盖顶部，底部交给 shade + 信息卡（Figma 照片蒙版 y=17 起、圆角 10px） */
.v4-team-media { position: absolute; left: 0; top: 1.0625rem; right: 0; bottom: 0; }
.v4-team-photo { position: absolute; inset: 0; background-size: cover; background-position: center top; background-color: #EBEBEB; }
.v4-team-shade { position: absolute; left: 0; right: 0; bottom: 0; height: 42.9%; background: linear-gradient(180deg, rgba(119,119,119,0) 0%, rgba(91,90,90,1) 100%); }
.v4-team-info {
position: absolute; left: 1.75rem; right: 1.75rem; bottom: 1.75rem;
padding: 1.0625rem 1.75rem 1.25rem; border-radius: 10px;
background: rgba(119,119,119,0.5); border: 1px solid #FFFFFF;
backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px);
}
.v4-team-name { font-family: 'Inter', sans-serif; color: var(--v4-gold); font-weight: 600; font-size: 1.75rem; line-height: 3.0625rem; }
.v4-team-position { display: block; font-family: 'Inter', sans-serif; color: var(--v4-gold); font-weight: 500; font-size: 1.125rem; line-height: 1.5rem; }
.v4-team-divider { display: block; height: 1px; margin: 0.25rem 0 0.625rem; background: rgba(255,255,255,0.5); }
.v4-team-bio { font-family: 'Inter', sans-serif; color: var(--v4-white); font-weight: 400; font-size: 1rem; line-height: 1.625rem; letter-spacing: -0.0313em; }
/* 窄屏（<800px）：卡片变小后信息卡文字缩小，避免换行溢出遮住照片 */
@media (max-width: 800px) {
.v4-team-name { font-size: 1.125rem; line-height: 1.5rem; }
.v4-team-position { font-size: 0.8125rem; line-height: 1.125rem; }
.v4-team-divider { margin: 0.125rem 0 0.375rem; }
.v4-team-bio { font-size: 0.75rem; line-height: 1.125rem; }
.v4-team-info { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; padding: 0.625rem 0.75rem 0.75rem; }
}
/* ============================================================
CTA + FOOTER
============================================================ */
.v4-cta { background: var(--v4-dark-grad); padding: 5rem 0; text-align: left; }
.v4-cta-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 3rem; line-height: 5rem; letter-spacing: -0.0208em; color: var(--v4-gold); }
.v4-cta-desc { font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 1.25rem; line-height: 2rem; color: var(--v4-white); margin: 1rem 0 2rem; max-width: 44rem; }
.v4-cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.5rem 0.5rem 1.25rem; border-radius: 100px; background: var(--v4-gold); color: var(--v4-brown); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; line-height: 1.5rem; text-decoration: none; }
/* 上述两条需 body.home-v4 前缀提升特异性，压过重置区 body.home-v4 p{margin:0} / a{color:inherit}（否则按钮文字变白、与描述间无间距） */
body.home-v4 .v4-cta-desc { margin: 1rem 0 2rem; }
body.home-v4 .v4-cta-btn { color: var(--v4-brown); }
.v4-cta-btn img { width: 1.5rem; height: 1.5rem; display: block; }
.v4-footer { background: #FFFFFF; padding: 3rem 0; }
.v4-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-bottom: 1rem; flex-wrap: wrap; }
.v4-footer-left { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.v4-footer-logo { display: flex; align-items: center; gap: 0.5rem; flex: 0 0 auto; }
.v4-footer-logo img { display: block; }
.v4-footer-logo .v4-footer-logo-icon { width: 2.25rem; height: 2.25rem; }
.v4-footer-logo .v4-footer-logo-text { height: 1.25rem; width: auto; }
.v4-footer-links { display: flex; gap: 1.5rem; justify-content: flex-end; flex-wrap: nowrap; white-space: nowrap; }
.v4-footer-links .link { color: #000000; text-decoration: underline; font-family: 'DM Sans', sans-serif; font-size: 0.9375rem; }
.v4-footer-copy { color: #000000; font-family: 'DM Sans', sans-serif; font-size: 0.875rem; text-align: left; white-space: normal; flex: 0 0 auto; max-width: 100%; }
.v4-footer-meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 1rem; justify-content: space-between; color: #000000; font-family: 'Inter', sans-serif; font-size: 0.875rem; line-height: 1.875rem; }
.v4-footer-meta .link { color: #000000; }
/* ============================================================
板块背景图（Figma 各板块低透明度照片背景，叠加在渐变之上）
============================================================ */
.v4-sec { overflow: hidden; }
.v4-sec > .v4-inner { position: relative; z-index: 1; }
.v4-sec::before { content: ''; position: absolute; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; pointer-events: none; }
.v4-ai::before { background-image: url('../../media/images/home/v4-ai-bg.png'); }
.v4-products::before { background-image: url('../../media/images/home/v4-product-bg.png'); opacity: 0.15; }
.v4-awards::before { background-image: url('../../media/images/home/v4-awards-bg.png'); }
.v4-news::before { background-image: url('../../media/images/home/v4-news-bg.png'); }
.v4-about::before { background-image: url('../../media/images/home/v4-about-bg.png'); }
.v4-team::before { background-image: url('../../media/images/home/v4-team-bg.png'); opacity: 0.1; }
.v4-cta::before { background-image: url('../../media/images/home/v4-cta-bg.png');}
/* ============================================================
响应式
============================================================ */
@media (max-width: 1024px) {
.v4-team-scroll { --v4-team-step: 20rem; --v4-team-gap: 2.25rem; height: calc(var(--v4-team-step) * 706 / 466 + 7rem); }
.v4-menu { gap: 1rem; }
/* 平板：两列下缩字号并允许 nowrap 标题折行，避免长标题把所在列撑宽（左右宽度不一致） */
.v4-award { padding: 1.25rem 1rem; }
.v4-award-ic { flex-basis: 4.5rem; width: 4.5rem; height: 4.5rem; }
.v4-award-title { font-size: 1.5rem; line-height: 2.125rem; }
}
/* ---------- 移动端头部（navbar-home-v4.php 的 #nav-simple） ----------
与 home-v3 同构：不在此处写 display，显隐完全交给 main.css 的 .screen-* 规则
（.screen-m/.screen-l/.screen-h 隐藏、.screen-s/.screen-x 显示）。
之前的 body.home-v4 .nav.nav-simple{display:none} 特异性(0,3,1)高过
main.css 的 .screen-s .nav.nav-simple{display:block}(0,3,0)，把移动端汉堡栏整个藏掉，
这正是「手机端导航不见了」的根因。 */
body.home-v4 .nav.nav-simple {
height: 3.75rem;
line-height: 3.75rem;
padding: 0 0 0 1rem;
background-color: #FFFFFF;
border-bottom: 1px solid #E9EDF5;
overflow: hidden;
}
body.home-v4 .v4-mobile-logo { display: flex; align-items: center; gap: 0.375rem; height: 3.75rem; color: #0F2137; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.5rem; line-height: 1; text-decoration: none; }
body.home-v4 .v4-mobile-logo .v4-logo-icon { display: block; width: 1.875rem; height: 1.875rem; }
body.home-v4 .v4-mobile-logo .v4-logo-text { display: block; height: 1rem; width: auto; }
/* 移动端细栏永远白底（覆盖 main.css .nav-simple-black 的深底），汉堡线固定深色 */
body.home-v4 .nav.nav-simple.nav-simple-white,
body.home-v4 .nav.nav-simple.nav-simple-black,
body.home-v4 .nav.nav-simple.nav-simple-black.nav-simple-white { background-color: #FFFFFF; }
body.home-v4 .nav.nav-simple .icon-line,
body.home-v4 .nav.nav-simple.nav-simple-white .icon-line,
body.home-v4 .nav.nav-simple.nav-simple-black .icon-line { border-top-color: #0F2137; }
/* ---------- 抽屉（复用 main.css .screen-s/.screen-x 机制，白底版，参考 home-v3） ----------
关键：body 自身同时带 .home-v4 与 .screen-s/.screen-x 类，须写复合选择器（无空格）。
原先误写成后代选择器 body.home-v4 .screen-s（要求 body 内再有 .screen-s 元素），
恒不匹配，导致移动端抽屉样式全部未生效——这是「自适应不行」的直接原因。 */
body.home-v4.screen-s .nav.nav-main,
body.home-v4.screen-x .nav.nav-main { background-color: #FFFFFF; padding-top: 4.5rem; }
body.home-v4.screen-s .nav.nav-main .v4-menu,
body.home-v4.screen-x .nav.nav-main .v4-menu { display: block; gap: 0; }
body.home-v4.screen-s .nav.nav-main .v4-menu > .v4-menu-item,
body.home-v4.screen-x .nav.nav-main .v4-menu > .v4-menu-item {
width: 100%; float: none; display: block; text-align: left;
border-bottom: 1px solid #E9EDF5; height: auto;
}
body.home-v4.screen-s .nav.nav-main .v4-menu .v4-menu-button,
body.home-v4.screen-x .nav.nav-main .v4-menu .v4-menu-button {
display: block; float: none; padding: 0 2rem; width: 100%;
line-height: 3.25rem; font-size: 1.25rem; color: #0F2137 !important;
}
body.home-v4.screen-s .nav.nav-main .v4-menu .v4-menu-item.menu-item-active .v4-menu-button,
body.home-v4.screen-x .nav.nav-main .v4-menu .v4-menu-item.menu-item-active .v4-menu-button { color: var(--v4-gold-deep) !important; }
body.home-v4.screen-s .nav.nav-main .nav-cld-panel,
body.home-v4.screen-x .nav.nav-main .nav-cld-panel {
background-color: #FFFFFF;
height: auto;
padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
}
body.home-v4.screen-s .nav.nav-main .v4-nav-cta,
body.home-v4.screen-x .nav.nav-main .v4-nav-cta {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 3rem;
}
/* ---------- Header 断点修正（同 home-v3 提前切汉堡，阈值由 875px 提到 1000px） ----------
getScreenState() 依据 #screen 内 .screen-* 标签的 display 判定档位。
在 576-1000px 提前切到 .screen-s，触发 main.css 整套抽屉规则，
避免 768-1000px 区间桌面横排菜单被挤压。 */
@media (max-width: 1000px) and (min-width: 576px) {
body.home-v4 .screen-l,
body.home-v4 .screen-m { display: none; }
body.home-v4 .screen-s { display: block; }
}
@media (max-width: 1000px) {
/* 抽屉内隐藏桌面 logo：main.css .screen-s .nav .logo{display:none}(0,3,0) 特异性
低于 body.home-v4 .v4-nav .v4-logo{display:flex}(0,3,1)，会被盖回——桌面 logo
会浮在抽屉里与菜单重叠。移动端标识由 .nav-simple 的 .v4-mobile-logo 承担。 */
body.home-v4 .nav.nav-main .v4-logo { display: none; }
/* 统计条 4 列 → 2 列（换两行）：窄屏收起胶囊宽度、收紧内边距；
隐藏第 3 格左缘分隔线，避免换行后多出竖线。 */
.v4-hero-stats { grid-template-columns: repeat(2, 1fr); width: calc(100% - 2rem); margin-top: -3.5rem; padding: 1rem 0.625rem 1.25rem; }
.v4-stat:nth-child(3)::before { display: none; }
/* 能力 pill 3 列 → 2 列（2×3 排布），避免 1000px 以下 3 列拥挤。
margin-top 固定 2rem（不用 auto）：内容超过 min-height 时 auto 塌成 0，
pill 会贴死上方的 overlay 胶囊，无间距。全息图保持 absolute 叠在标题下，
不做 position:relative 改动（否则标题/描述会被顶出图片区域）。 */
.v4-ai-overlay { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: none; }
.v4-ai-pills { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; margin-top: auto; padding-top: 5rem }
/* NEWS 卡片 3 列 → 2 列（配合 JS perView 在 ≤1000px 时每页 2 张） */
.v4-news-card { flex: 0 0 calc((100% - 1.3125rem) / 2); }
}
/* 平板（768–1000px）：四步流程一排两个（2×2 网格），箭头隐藏 */
@media (min-width: 768px) and (max-width: 1000px) {
.v4-flow { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem 1.5rem; }
.v4-flow-item { width: 100%; }
.v4-flow-arrow { display: none; }
}
/* 低于 880px 时，AI 三个模块（Raw Data / TaaS Assetization / Millisecond Decisioning）各占一行。
胶囊竖排后内容变高，取消 banner 固定 min-height，让灰底背景高度随内容自适应；
pill 的 margin-top 由 auto 改为固定 2rem（否则 min-height 移除后 auto 塌成 0，pill 贴死胶囊）。 */
@media (max-width: 880px) {
.v4-ai-pills { grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2rem; margin-top: auto; padding-top: 5rem }
.v4-ai-overlay { grid-template-columns: 1fr; }
.v4-ai-overlay-line span,
.v4-ai-overlay-line strong { white-space: normal; }
.v4-ai-banner { min-height: 0; }
/* 移动端把全息图作为「标题/描述/胶囊」块的背景（而非铺满整个 banner），
让文字压在图上；下方的 6 个能力 pill 则落回灰色卡底 #4F4B42，
与桌面/平板一致（pill 区始终是灰色背景）。 */
.v4-ai-banner-media { display: none; }
.v4-ai-banner-text {
position: relative;
padding: 1.5rem ;
overflow: hidden;
}
/* 底层全息图（水平镜像 + 0.5 透明度，同桌面 ![]()
效果） */
.v4-ai-banner-text::before {
content: '';
position: absolute; inset: 0; z-index: -2;
background: url('../../media/images/home/v4-ai-hologram.png') center / cover no-repeat;
opacity: 0.5;
transform: scaleX(-1);
}
/* 左缘向卡底色的融合渐变 + 底缘渐隐，复刻桌面 .v4-ai-banner-media::after */
.v4-ai-banner-text::after {
content: '';
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(90deg, #4F4B42 0%, rgba(79,75,66,0.55) 22%, rgba(79,75,66,0) 50%),
linear-gradient(180deg, rgba(79,75,66,0) 55%, rgba(79,75,66,0.9) 100%);
pointer-events: none;
}
.v4-ai-banner-title { font-size: 1.5rem; line-height: 2.25rem; }
}
@media (max-width: 767px) {
.v4-inner { padding-left: 1rem; padding-right: 1rem; }
.v4-sec[id] { scroll-margin-top: 3.75rem; }
.v4-hero { min-height: 40rem; }
body.home-v4 .v4-hero-title { font-size: 2.75rem; line-height: 3.25rem; }
body.home-v4 .v4-hero-title-sub { font-size: 2.75rem; }
body.home-v4 .v4-hero-eyebrow { font-size: 1.25rem; line-height: 1.875rem; }
body.home-v4 .v4-hero-sub { font-size: 1.25rem; line-height: 1.875rem; }
.v4-hero .v4-pill-btn { font-size: 0.9rem; line-height: 0.9rem; }
.v4-hero-stats { width: calc(100% - 2rem); padding: 1rem 0.875rem 1.25rem; }
.v4-stat { padding: 0 0.375rem 0 1rem; }
.v4-stat::before { height: 2.5rem; }
.v4-stat-num { font-size: 1.5rem; line-height: 1.2; }
.v4-stat-unit { font-size: 1.5rem; line-height: 1.2; }
.v4-stat-label { font-size: 0.875rem; margin-top: 0.25rem; }
.v4-eyebrow { font-size: 2.5rem; line-height: 2.5rem; margin-bottom: 1rem; }
.v4-eyebrow::before { width: 20rem; height: 2.5rem; }
.v4-sec-title { font-size: 1.75rem; line-height: 2.5rem; margin-bottom: 0.75rem; }
/* 移动端统计条上提 3.5rem（桌面 4rem），文案区底部预留量同步；
靠左 + 垂直居中仍由 Grid 布局 + .v4-inner 的 1rem 内边距保证 */
.v4-hero .v4-inner.v4-hero-content { bottom: 3.5rem; }
.v4-cards, .v4-award-list, .v4-about-cols { grid-template-columns: 1fr; }
.v4-award-title { font-size: 1.25rem; line-height: 1.75rem; }
/* 认证条：窄屏收窄内边距与列间距，按 minmax 自动换行成多行，末行靠左 */
.v4-cert-banner { padding: 1.25rem 1.5rem; gap: 1.25rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)); }
.v4-cert-item { gap: 1.25rem; }
.v4-ai-banner { min-height: 0; }
/* 移动端把全息图作为「标题/描述/胶囊」块的背景（而非铺满整个 banner），
让文字压在图上；下方的 6 个能力 pill 则落回灰色卡底 #4F4B42，
与桌面/平板一致（pill 区始终是灰色背景）。 */
.v4-ai-banner-media { display: none; }
.v4-ai-banner-text {
position: relative;
padding: 1.5rem ;
overflow: hidden;
}
/* 底层全息图（水平镜像 + 0.5 透明度，同桌面 ![]()
效果） */
.v4-ai-banner-text::before {
content: '';
position: absolute; inset: 0; z-index: -2;
background: url('../../media/images/home/v4-ai-hologram.png') center / cover no-repeat;
opacity: 0.5;
transform: scaleX(-1);
}
/* 左缘向卡底色的融合渐变 + 底缘渐隐，复刻桌面 .v4-ai-banner-media::after */
.v4-ai-banner-text::after {
content: '';
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(90deg, #4F4B42 0%, rgba(79,75,66,0.55) 22%, rgba(79,75,66,0) 50%),
linear-gradient(180deg, rgba(79,75,66,0) 55%, rgba(79,75,66,0.9) 100%);
pointer-events: none;
}
.v4-ai-banner-title { font-size: 1.5rem; line-height: 2.25rem; }
.v4-ai-overlay { grid-template-columns: 1fr; }
.v4-ai-pills { grid-template-columns: 1fr; gap: 1.5rem; margin-top: 2rem; padding: 0 1.5rem 1.5rem; }
.v4-news-card { flex: 0 0 88%; }
.v4-card-features { grid-template-columns: 1fr; }
/* 移动端「System / Agent / Model / Data」卡头标题与副标题放大；
需 body.home-v4 前缀抬升特异性（0,2,1），压过 main.css 的
.screen-s h4 / .screen-x h4 { font-size:1rem }（0,1,1） */
body.home-v4 .v4-card-title { font-size: 2rem; line-height: 3rem; }
body.home-v4 .v4-card-sub { font-size: 1.25rem; line-height: 2rem; }
body.home-v4 .v4-card-ic { width: 3.95rem; height: 4.3rem; }
body.home-v4 .v4-card-ic img { width: 1.75rem; height: 1.75rem; }
/* Key Differentiators / Talent & Innovation 列头图标与产品卡头同步缩放（3.95rem×4.3rem 底 / 1.75rem 图形，保持 79:86 比例） */
body.home-v4 .v4-col-ic { width: 3.95rem; height: 4.3rem; }
body.home-v4 .v4-col-ic .v4-col-ic-glyph { width: 1.75rem; height: 1.75rem; }
/* 移动端流程步骤改为左右结构：左列「图标 + 标题」竖排，右列内容描述 */
.v4-flow { flex-direction: column; align-items: stretch; }
.v4-flow-item {
display: grid;
grid-template-columns: 7rem 1fr;
grid-template-areas:
"ic desc"
"title desc";
column-gap: 1.75rem;
row-gap: 0.375rem;
align-items: center;
width: 100%;
text-align: left;
}
.v4-flow-ic { grid-area: ic; width: 3rem; height: 3rem; margin: 0; justify-self: center; }
.v4-flow-ic img { width: 3rem; height: 3rem; }
.v4-flow-title { grid-area: title; font-size: 1.125rem; line-height: 1.5rem; justify-self: center; }
.v4-flow-desc { grid-area: desc; max-width: none; margin: 0; }
.v4-flow-arrow { transform: rotate(90deg); padding-top: 0; margin: 0 auto; }
.v4-timeline-item { width: 14rem; }
.v4-col-title { font-size: 1.25rem; line-height: 1.75rem; }
.v4-cta-title { font-size: 1.75rem; line-height: 2.5rem; }
.v4-timeline-year { font-size: 1.5rem; line-height: 1.5rem; }
.v4-timeline-title { font-size: 1.125rem; line-height: 1.5rem; }
.v4-timeline-desc { font-size: 1rem; line-height: 1.375rem; }
.v4-team-scroll { --v4-team-step: 16rem; --v4-team-gap: 1.75rem; height: calc(var(--v4-team-step) * 706 / 466 + 7rem); }
.v4-footer-links { justify-content: flex-start; flex-wrap: wrap; }
}
@media (max-width: 800px) {
/* 时间轴底部预留更多空间：tip 描述换行变多时不会覆盖到下方内容 */
.v4-timeline { padding-bottom: 8rem; }
}