/**
 * ========================================
 * 四方格产品展示模块 - Quad Grid Section
 * ========================================
 *
 * 文件说明：
 * 用于首页产品分类的四方格布局样式
 *
 * 布局特性：
 * - PC端：2x2 网格布局，占满整个视口高度（100vh）
 * - 布局：上字下图
 * - 背景：白色带发光带效果
 * - Hover：发光带从左上角扫到右下角
 *
 * 使用页面：home.php
 *
 * @author ToupTek Astro
 * @version 1.1.0
 * @date 2024-12
 */

/* ========================================
   1. 容器样式
   ======================================== */

/**
 * 四方格区域容器
 */
.tpa-quad-grid-section {
    width: 100%;
    padding: 0;
    margin: 0;
}

/**
 * 四方格网格容器
 * 使用 CSS Grid 实现 2x2 布局
 */
.tpa-quad-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, calc(50vh - 20px));
    gap: 20px; /* 格子之间20px间隙 */
    width: calc(100% - 40px); /* 左右各留20px */
    min-height: calc(100vh - 40px); /* 上下各留20px */
    margin: 20px; /* 四周20px外边距 */
    background: transparent; /* 透明背景 */
}

/* ========================================
   2. 单个格子样式
   ======================================== */

/**
 * 单个格子容器
 * 简约白灰色调设计
 */
.tpa-quad-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 30px;
    background: var(--guad-bg, #F5F5F7); /* 纯白背景，回退值与 root.css 中定义一致 */
    border-radius: 8px;
    /*box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);*/
    transition: all 0.3s ease;
}

/**
 * 格子内的链接元素
 * 上字下图垂直排列
 */
.tpa-quad-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: var(--thm-black, #1a1a2e);
    gap: 25px;
    position: relative;
    z-index: 1;
}

/* ========================================
   3. 内容区域样式（文字在上）
   ======================================== */

/**
 * 内容容器
 * 文字居中，在图片上方
 */
.tpa-quad-content {
    text-align: center;
    padding: 0 20px;
    order: 1; /* 文字排在前面 */
    margin-bottom: 30px;
}

/**
 * 标题样式
 */
.tpa-quad-title {
    font-size: clamp(18px, 2vw, 12px);
    font-weight: 600;
    /* 标题颜色：引用 V2 辅助文字色变量，回退值 #c9c9c9 */
    color: var(--v2-text-secondary, #c9c9c9);
    margin-bottom: 8px;
    /* 通用卡片标签保留模板原始大小写，避免把正常英文标题强制改成全大写。 */
    text-transform: none;
    letter-spacing: 1px;
}

/**
 * 副标题样式（产品系列名）
 */
.tpa-quad-subtitle {
    font-size: clamp(26px, 3vw, 35px);
    font-weight: 700;
    color: var(--guad-text, #171A1D);
    margin-bottom: 0px;
}

/**
 * 描述文字样式
 */
.tpa-quad-desc {
    font-size: clamp(13px, 1.2vw, 15px);
    color: var(--guad-text, #171A1D); /* 使用段落文字色，回退值与 root.css 中定义一致 */
    margin-bottom: 0;
    line-height: 1.6;
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}

/* ========================================
   4. 产品图片样式（图片在下）
   ======================================== */

/**
 * 产品图片容器
 * 居中显示，占格子的 30%
 */
.tpa-quad-img {
    width: 40%;
    flex-shrink: 0;
    order: 2; /* 图片排在后面 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/**
 * 产品图片
 * 使用 <img> 标签支持懒加载
 * 兼容 <picture> 标签
 */
.tpa-quad-img img,
.tpa-quad-img picture {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s ease;
    /* 为透明底的图片增加有轮廓感的底部阴影，提升视觉立体感 */
    /*filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.5));*/
    display: block;
}

.tpa-quad-img picture img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/**
 * 鼠标 hover 时图片放大效果
 */
.tpa-quad-item:hover .tpa-quad-img img,
.tpa-quad-item:hover .tpa-quad-img picture {
    transform: scale(1.4);
}

.tpa-quad-item:hover .tpa-quad-img picture img {
    transform: scale(1.4);
}

/**
 * 遮罩层（隐藏，不再使用）
 */
.tpa-quad-overlay {
    display: none;
}

/* ========================================
   6. 每个格子的独特底色（简约白灰色调）
   ======================================== */

/**
 * 所有格子统一使用白色背景
 * 通过微妙的灰度差异区分
 */
.tpa-quad-item-1, .tpa-quad-item-2, .tpa-quad-item-3, .tpa-quad-item-4 {
    /* 采用微妙的径向渐变，中心稍亮，边缘略微变暗，增加视觉层次感 */
    /*background: radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%);*/
}

/*.tpa-quad-item-2 {*/
/*    !* 采用微妙的径向渐变，中心稍亮，边缘略微变暗，增加视觉层次感 *!*/
/*    background: radial-gradient(circle at center, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%);*/
/*}*/

/*.tpa-quad-item-3 {*/
/*    !* 采用微妙的径向渐变，中心稍亮，边缘略微变暗，增加视觉层次感 *!*/
/*    background: radial-gradient(circle at center, rgba(246,246,246,1) 0%, rgba(230,230,230,1) 100%);*/
/*}*/

/*.tpa-quad-item-4 {*/
/*    !* 采用微妙的径向渐变，中心稍亮，边缘略微变暗，增加视觉层次感 *!*/
/*    background: radial-gradient(circle at center, rgba(255,255,255,1) 0%, rgba(245,245,245,1) 100%);*/
/*}*/

/* ========================================
   7. 响应式布局 - 平板设备
   ======================================== */

@media (max-width: 991px) {
    .tpa-quad-grid {
        grid-template-rows: repeat(2, 45vh);
    }

    .tpa-quad-grid > div {
        overflow: hidden;
    }

    .tpa-quad-item {
        padding: 30px 25px;
    }

    /**
     * 平板端图片改用高度百分比
     * 因为格子变高了，用高度控制更合适
     */
    .tpa-quad-img {
        width: auto;
        height: 45%;
    }

    .tpa-quad-img img,
    .tpa-quad-img picture {
        width: auto;
        height: 100%;
        max-width: 100%;
    }

    .tpa-quad-img picture img {
        width: auto;
        height: 100%;
        max-width: 100%;
    }

    .tpa-quad-link {
        gap: 20px;
    }
}

/* ========================================
   8. 响应式布局 - 手机设备
   ======================================== */

@media (max-width: 767px) {
    .tpa-quad-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        min-height: auto;
        width: calc(100% - 40px); /* 保持左右20px边距 */
        margin: 20px; /* 四周20px外边距 */
        gap: 20px; /* 间隙20px */
    }

    .tpa-quad-item {
        padding: 40px 20px;
        min-height: 320px;
    }

    /**
     * 手机端图片改用高度百分比
     * 竖向布局时用高度控制图片大小更合理
     */
    .tpa-quad-img {
        width: auto;
        height: 50%;
    }

    .tpa-quad-img img,
    .tpa-quad-img picture {
        width: auto;
        height: 100%;
        max-width: 100%;
    }

    .tpa-quad-img picture img {
        width: auto;
        height: 100%;
        max-width: 100%;
    }

    .tpa-quad-title {
        font-size: 16px;
    }

    .tpa-quad-subtitle {
        font-size: 22px;
    }

    .tpa-quad-desc {
        font-size: 14px;
    }

    .tpa-quad-link {
        gap: 20px;
    }
}

/* ========================================
   9. 响应式布局 - 小屏手机
   ======================================== */

@media (max-width: 480px) {
    .tpa-quad-grid {
        width: calc(100% - 30px); /* 小屏幕左右各15px边距 */
        margin: 15px; /* 四周15px外边距 */
        gap: 15px; /* 间隙相应减小 */
    }

    .tpa-quad-item {
        padding: 30px 15px;
        min-height: 280px;
    }

    /**
     * 小屏手机图片高度占比稍大
     */
    .tpa-quad-img {
        height: 45%;
    }

    .tpa-quad-title {
        font-size: 14px;
        margin-bottom: 5px;
    }

    .tpa-quad-subtitle {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .tpa-quad-desc {
        font-size: 13px;
    }

    .tpa-quad-btn {
        padding: 8px 16px;
        font-size: 12px;
        margin-top: 12px;
    }

    .tpa-quad-link {
        gap: 15px;
    }
}

/* ========================================
   10. 伪元素装饰 - 背景美化
   ======================================== */

/**
 * 斜向光柱装饰 - 使用 ::before 伪元素
 * 从左上角到右下角的渐变光柱，增添动感和层次
 */
.tpa-quad-item::before {
    content: '';
    position: absolute;
    top: -100%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
            135deg,
            transparent 0%,
            transparent 40%,
            rgba(58, 151, 255, 0.03) 45%,
            rgba(58, 151, 255, 0.06) 50%,
            rgba(58, 151, 255, 0.03) 55%,
            transparent 60%,
            transparent 100%
    );
    pointer-events: none;
    z-index: 0;
    transition: transform 0.6s ease;
    transform: translateX(-100%) translateY(-100%);
}

/**
 * 角落光晕装饰 - 使用 ::after 伪元素
 * 在角落添加淡蓝色光晕，增添天文主题感
 */
.tpa-quad-item::after {
    content: '';
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(
            circle,
            rgba(58, 151, 255, 0.06) 0%,
            rgba(58, 151, 255, 0.02) 50%,
            transparent 70%
    );
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    transition: all 0.4s ease;
}

/**
 * 确保链接内容层级在装饰元素之上
 */
.tpa-quad-link {
    position: relative;
    z-index: 2;
}

/* ========================================
   11. 四个格子的独特装饰位置
   ======================================== */

/**
 * 格子1: 右上角光晕
 */
/*.tpa-quad-item-1::after {
    top: -60px;
    right: -60px;
    left: auto;
    bottom: auto;
}*/

/**
 * 格子2: 左上角光晕
 */
/*.tpa-quad-item-2::after {
    top: -60px;
    left: -60px;
    right: auto;
    bottom: auto;
}*/

/**
 * 格子3: 右下角光晕
 */
.tpa-quad-item-3::after {
    bottom: -60px;
    right: -60px;
    top: auto;
    left: auto;
}

/**
 * 格子4: 左下角光晕
 */
.tpa-quad-item-4::after {
    bottom: -60px;
    left: -60px;
    top: auto;
    right: auto;
}

/* ============================================================
   V2 四方格组件样式 - 新规范（渐进式迁移）
   使用 --v2-* 变量系统，参考 root.css 和 v2-components.css
   ============================================================ */

/**
 * V2 四方格容器
 */
.tpa-quad-grid.v2-grid {
    gap: var(--v2-spacing-lg, 20px);
    background: transparent;
}

/**
 * V2 单个格子样式
 */
.tpa-quad-item.v2-card {
    background: var(--v2-bg-primary, #FFFFFF);
    border: 1px solid var(--v2-bg-divider, #E3E8F0);
    border-radius: var(--v2-radius-md, 12px);
    box-shadow: var(--v2-shadow-card, 0 4px 12px rgba(0, 0, 0, 0.08));
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.tpa-quad-item.v2-card:hover {
    border-color: var(--v2-primary-200, #A7CEFA);
    box-shadow: var(--v2-shadow-card-hover, 0 12px 24px rgba(41, 103, 211, 0.15));
    transform: translateY(-2px);
}

/**
 * V2 四方格标题
 */
.tpa-quad-item.v2-card .tpa-quad-title {
    color: var(--v2-text-tertiary, #8B95A5);
    font-size: clamp(var(--v2-font-size-sm, 14px), 1.5vw, var(--v2-font-size-base, 16px));
    font-weight: 600;
    letter-spacing: 1px;
    /* V2 卡片标签同样遵循文案原始大小写，避免页面显示与模板文案不一致。 */
    text-transform: none;
}

/**
 * V2 四方格副标题（产品系列名）
 */
.tpa-quad-item.v2-card .tpa-quad-subtitle {
    color: var(--v2-text-primary, #182028);
    font-size: clamp(24px, 2.5vw, var(--v2-h3-font-size, 30px));
    font-weight: 700;
    line-height: var(--v2-h3-line-height, 38px);
}

/**
 * V2 四方格描述文字
 */
.tpa-quad-item.v2-card .tpa-quad-desc {
    color: var(--v2-text-secondary, #5A6B7C);
    font-size: clamp(var(--v2-font-size-sm, 13px), 1.2vw, var(--v2-font-size-base, 15px));
    line-height: var(--v2-line-height-base, 24px);
}

/**
 * V2 四方格图片容器
 */
.tpa-quad-item.v2-card .tpa-quad-img img,
.tpa-quad-item.v2-card .tpa-quad-img picture {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.tpa-quad-item.v2-card:hover .tpa-quad-img img,
.tpa-quad-item.v2-card:hover .tpa-quad-img picture {
    transform: scale(1.15);
}

/**
 * V2 四方格伪元素装饰 - 使用新颜色
 */
.tpa-quad-item.v2-card::before {
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 40%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.03) 45%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.06) 50%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.03) 55%,
        transparent 60%,
        transparent 100%
    );
}

.tpa-quad-item.v2-card::after {
    background: radial-gradient(
        circle,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.08) 0%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.03) 50%,
        transparent 70%
    );
}

/* ============================================================
   V2 响应式适配
   ============================================================ */

@media (max-width: 991px) {
    .tpa-quad-grid.v2-grid {
        grid-template-rows: repeat(2, 45vh);
    }
}

@media (max-width: 767px) {
    .tpa-quad-grid.v2-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
        min-height: auto;
        gap: var(--v2-spacing-md, 16px);
    }

    .tpa-quad-item.v2-card {
        padding: var(--v2-spacing-lg, 32px) var(--v2-spacing-md, 16px);
        min-height: 320px;
    }
}

@media (max-width: 480px) {
    .tpa-quad-grid.v2-grid {
        gap: var(--v2-spacing-sm, 12px);
    }

    .tpa-quad-item.v2-card {
        padding: var(--v2-spacing-md, 24px) var(--v2-spacing-sm, 12px);
        min-height: 280px;
    }

    .tpa-quad-item.v2-card .tpa-quad-title {
        font-size: var(--v2-font-size-sm, 14px);
    }

    .tpa-quad-item.v2-card .tpa-quad-subtitle {
        font-size: var(--v2-h5-font-size, 18px);
    }

    .tpa-quad-item.v2-card .tpa-quad-desc {
        font-size: var(--v2-font-size-sm, 13px);
    }
}

/* 减少动画偏好设置 */
@media (prefers-reduced-motion: reduce) {
    .tpa-quad-item.v2-card,
    .tpa-quad-item.v2-card::before,
    .tpa-quad-item.v2-card::after,
    .tpa-quad-item.v2-card .tpa-quad-img img,
    .tpa-quad-item.v2-card .tpa-quad-img picture {
        transition: none !important;
        animation: none !important;
    }

    .tpa-quad-item.v2-card:hover {
        transform: none;
    }

    .tpa-quad-item.v2-card:hover .tpa-quad-img img,
    .tpa-quad-item.v2-card:hover .tpa-quad-img picture {
        transform: none;
    }
}

/* ============================================================
   首页 V2 四宫格覆盖层
   仅在首页 wrapper 存在时启用，避免改变其它页面的旧布局
   ============================================================ */

/**
 * 首页四宫格从“满屏模块”收敛为规范版心内的 2x2 结构，
 * 保留 20px 间距，并将高度控制在更稳定的产品展示比例。
 */
.page-wrapper.homepage-v2 .tpa-quad-grid-section {
    /* 首屏下方首组模块需要与 Hero 更紧密衔接，避免 96px 空隙造成断层。 */
    padding: 40px var(--v2-container-padding, 20px) 0;
    background: var(--v2-bg-primary, #FFFFFF);
}

.page-wrapper.homepage-v2 .tpa-quad-grid.v2-grid {
    width: 100%;
    max-width: var(--v2-container-max-width, 1240px);
    min-height: auto;
    margin: 0 auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(320px, 360px));
    gap: var(--v2-container-padding, 20px);
}

/**
 * 卡片切换为 V2 的 24px 圆角和 32px 内边距，
 * 标题、正文、装饰渐变也一起切到新语义色。
 */
.page-wrapper.homepage-v2 .tpa-quad-item.v2-card {
    /* 新版首组模块保留 24px 大圆角，但卡片内部节奏比旧版更紧。 */
    padding: 28px;
    border-radius: var(--v2-radius-lg, 24px);
    border: 1px solid var(--v2-bg-divider, #E3E8F0);
    background: var(--v2-bg-primary, #FFFFFF);
    /* 卡片默认阴影：引用 V2 规范浅投影变量，回退值为三层复合阴影 */
    box-shadow: var(--v2-shadow-card, 0 3px 6px -4px rgba(41, 103, 211, 0.12), 0 6px 16px 0 rgba(41, 103, 211, 0.08), 0 9px 28px 8px rgba(41, 103, 211, 0.05));
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card:hover {
    transform: translateY(-4px);
    border-color: var(--v2-primary-200, #A7CEFA);
    /* 卡片悬停阴影：升级为深投影，回退值为三层复合阴影 */
    box-shadow: var(--v2-shadow-card-hover, 0 1px 2px -2px rgba(41, 103, 211, 0.16), 0 3px 6px 0 rgba(41, 103, 211, 0.12), 0 5px 12px 4px rgba(41, 103, 211, 0.09));
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-link {
    gap: 24px;
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-content {
    padding: 0;
    margin-bottom: 0;
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-title {
    color: var(--v2-text-secondary, #6E6E73);
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 6px;
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-subtitle {
    color: var(--v2-text-heading, #171A1D);
    /* 副标题维持强识别，但比上一版更克制，贴近新版示例的卡片节奏。 */
    font-size: clamp(26px, 2.1vw, 32px);
    line-height: 1.18;
    margin-bottom: 10px;
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-desc {
    color: var(--v2-text-body, #3A3A3C);
    max-width: 360px;
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card::before {
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 42%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.008) 47%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.018) 50%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.008) 53%,
        transparent 58%,
        transparent 100%
    );
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card::after {
    background: radial-gradient(
        circle,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.025) 0%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.01) 48%,
        transparent 72%
    );
}

@media (max-width: 1199px) {
    .page-wrapper.homepage-v2 .tpa-quad-grid-section {
        padding-top: 32px;
    }

    .page-wrapper.homepage-v2 .tpa-quad-grid.v2-grid {
        grid-template-rows: repeat(2, minmax(280px, 320px));
    }
}

@media (max-width: 767px) {
    .page-wrapper.homepage-v2 .tpa-quad-grid-section {
        padding-left: 16px;
        padding-right: 16px;
        padding-top: 24px;
    }

    .page-wrapper.homepage-v2 .tpa-quad-grid.v2-grid {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, minmax(260px, auto));
        gap: 16px;
    }

    .page-wrapper.homepage-v2 .tpa-quad-item.v2-card {
        padding: 24px;
    }
}

/* ============================================================
   首页 V2 四宫格第二轮精修
   统一四张卡片的文本节奏、装饰强度和 hover 语言
   ============================================================ */

/**
 * 四宫格与首页其它主卡片保持同一套卡片过渡和抬升幅度。
 */
.page-wrapper.homepage-v2 .tpa-quad-item.v2-card {
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card:hover,
.page-wrapper.homepage-v2 .tpa-quad-item.v2-card:focus-within {
    transform: translateY(-3px);
    border-color: var(--v2-primary-200, #A7CEFA);
    /* 第二轮精修悬停阴影：引用深投影变量，回退值为三层复合阴影 */
    box-shadow: var(--v2-shadow-card-hover, 0 1px 2px -2px rgba(41, 103, 211, 0.16), 0 3px 6px 0 rgba(41, 103, 211, 0.12), 0 5px 12px 4px rgba(41, 103, 211, 0.09));
}

/**
 * 文案块统一采用更稳定的 28px 卡片内部分隔，
 * 让副标题、描述与产品图之间的节奏更接近首页其它模块。
 */
.page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-link {
    gap: 24px;
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-content {
    max-width: 360px;
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-title {
    margin-bottom: 6px;
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-subtitle {
    margin-bottom: 10px;
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-desc {
    line-height: 24px;
    margin-bottom: 0;
}

/**
 * 第二轮降低发光装饰的透明度，
 * 只保留轻微的蓝色氛围，不让浅底卡片显得过亮或发飘。
 */
.page-wrapper.homepage-v2 .tpa-quad-item.v2-card::before {
    background: linear-gradient(
        135deg,
        transparent 0%,
        transparent 43%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.006) 47%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.014) 50%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.006) 53%,
        transparent 57%,
        transparent 100%
    );
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card::after {
    background: radial-gradient(
        circle,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.018) 0%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.008) 48%,
        transparent 72%
    );
}

/**
 * 产品图 hover 同步切到更克制的 1.08 缩放，
 * 避免与首页新闻、视频等模块的图像交互产生脱节。
 */
.page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-img img,
.page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-img picture {
    transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-wrapper.homepage-v2 .tpa-quad-item.v2-card:hover .tpa-quad-img img,
.page-wrapper.homepage-v2 .tpa-quad-item.v2-card:hover .tpa-quad-img picture,
.page-wrapper.homepage-v2 .tpa-quad-item.v2-card:focus-within .tpa-quad-img img,
.page-wrapper.homepage-v2 .tpa-quad-item.v2-card:focus-within .tpa-quad-img picture {
    transform: scale(1.05);
}

@media (max-width: 767px) {
    .page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-content {
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-subtitle {
        font-size: 28px;
        line-height: 34px;
    }

    .page-wrapper.homepage-v2 .tpa-quad-item.v2-card .tpa-quad-desc {
        font-size: 15px;
        line-height: 22px;
    }
}

/* ========================================================================================
 * 2026-04-07 首页顶部首组模块重排
 * 说明：
 * - 首页 Hero 下方的首组模块改为深色底上的 2x2 展示区。
 * - 该模块只作用于首页顶部，不复用旧四宫格的“满屏白底”语义。
 * ======================================================================================== */

.page-wrapper.homepage-v2 .tpa-home-feature-grid {
    position: relative;
    padding: 84px var(--v2-container-padding, 20px) 96px;
    background:
        radial-gradient(
            circle at 50% -10%,
            rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.18) 0%,
            rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0) 38%
        ),
        /* 深色渐变背景：使用 rgba + --v2-bg-dark-rgb 变量实现极深色渐变 */
        linear-gradient(
            180deg,
            rgba(var(--v2-bg-dark-rgb, 24, 32, 43), 0.98) 0%,
            rgba(var(--v2-bg-dark-rgb, 24, 32, 43), 0.95) 100%
        );
    overflow: hidden;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid::before,
.page-wrapper.homepage-v2 .tpa-home-feature-grid::after {
    content: '';
    position: absolute;
    pointer-events: none;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid::before {
    top: 56px;
    left: -120px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0.12) 0%,
        rgba(var(--v2-primary-500-rgb, 41, 103, 211), 0) 74%
    );
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid::after {
    right: -140px;
    bottom: 36px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(var(--v2-primary-400-rgb, 79, 137, 224), 0.14) 0%,
        rgba(var(--v2-primary-400-rgb, 79, 137, 224), 0) 70%
    );
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid > .container {
    position: relative;
    z-index: 1;
    max-width: var(--v2-container-max-width, 1240px);
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__header {
    max-width: 620px;
    margin: 0 auto 40px;
    text-align: center;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__kicker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
    /* 眉标文字颜色：引用 V2 深色背景反白眉标变量 */
    color: var(--v2-home-inverse-eyebrow, rgba(255, 255, 255, 0.66));
    font-size: 13px;
    line-height: 20px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__header h2 {
    margin: 0 0 12px;
    /* 标题颜色：引用 V2 反白文字变量 */
    color: var(--v2-text-inverse, #FFFFFF);
    font-size: clamp(34px, 3.2vw, 46px);
    line-height: 1.12;
    font-weight: 700;
    letter-spacing: -0.03em;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__header p {
    margin: 0;
    /* 副标题颜色：引用 V2 深色背景反白正文变量 */
    color: var(--v2-home-inverse-body, rgba(255, 255, 255, 0.72));
    font-size: 16px;
    line-height: 24px;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card {
    min-height: 420px;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-link {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 420px;
    padding: 30px 30px 0;
    overflow: hidden;
    /* 深色区域上的微弱白色边框：引用 V2 深色区边框变量 */
    border: 1px solid var(--v2-home-border-on-dark, rgba(255, 255, 255, 0.10));
    border-radius: var(--v2-radius-lg, 24px);
    /* 卡片背景：引用 V2 主背景色变量，使用半透明渐变实现毛玻璃效果 */
    background:
        linear-gradient(
            180deg,
            rgba(var(--v2-bg-primary-rgb, 255, 255, 255), 0.96) 0%,
            rgba(var(--v2-bg-content-rgb, 246, 248, 252), 0.96) 100%
        );
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.22);
    text-decoration: none;
    transition: transform 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.24s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.24s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-link:hover,
.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-link:focus-visible {
    transform: translateY(-4px);
    border-color: rgba(var(--v2-primary-400-rgb, 79, 137, 224), 0.55);
    box-shadow: 0 34px 78px rgba(0, 0, 0, 0.28);
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-copy {
    max-width: 360px;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-label {
    display: block;
    margin-bottom: 8px;
    color: var(--v2-text-secondary, #6E6E73);
    font-size: 14px;
    line-height: 22px;
    font-weight: 600;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-copy h3 {
    margin: 0 0 12px;
    color: var(--v2-text-heading, #171A1D);
    font-size: clamp(28px, 2.4vw, 36px);
    line-height: 1.16;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-copy p {
    margin: 0;
    color: var(--v2-text-body, #3A3A3C);
    font-size: 16px;
    line-height: 24px;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-media {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 240px;
    margin-top: 18px;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-media::before {
    content: '';
    position: absolute;
    inset: auto 10% 10px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0.20) 0%,
        rgba(0, 0, 0, 0) 72%
    );
    filter: blur(10px);
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-media picture,
.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-media img {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 360px;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    display: block;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-link:hover .tpa-home-feature-grid__card-media img,
.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-link:hover .tpa-home-feature-grid__card-media picture,
.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-link:focus-visible .tpa-home-feature-grid__card-media img,
.page-wrapper.homepage-v2 .tpa-home-feature-grid__card-link:focus-visible .tpa-home-feature-grid__card-media picture {
    transform: translateY(-4px) scale(1.035);
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card--controller .tpa-home-feature-grid__card-media img,
.page-wrapper.homepage-v2 .tpa-home-feature-grid__card--controller .tpa-home-feature-grid__card-media picture {
    max-width: 320px;
}

.page-wrapper.homepage-v2 .tpa-home-feature-grid__card--accessories .tpa-home-feature-grid__card-media img,
.page-wrapper.homepage-v2 .tpa-home-feature-grid__card--accessories .tpa-home-feature-grid__card-media picture {
    max-width: 300px;
}

@media (max-width: 1199px) {
    .page-wrapper.homepage-v2 .tpa-home-feature-grid {
        padding-top: 72px;
        padding-bottom: 84px;
    }

    .page-wrapper.homepage-v2 .tpa-home-feature-grid__card,
    .page-wrapper.homepage-v2 .tpa-home-feature-grid__card-link {
        min-height: 388px;
    }
}

@media (max-width: 991px) {
    .page-wrapper.homepage-v2 .tpa-home-feature-grid {
        padding-top: 64px;
        padding-bottom: 72px;
    }

    .page-wrapper.homepage-v2 .tpa-home-feature-grid__layout {
        grid-template-columns: 1fr;
    }

    .page-wrapper.homepage-v2 .tpa-home-feature-grid__header {
        margin-bottom: 32px;
    }
}

@media (max-width: 767px) {
    .page-wrapper.homepage-v2 .tpa-home-feature-grid {
        padding: 52px 16px 56px;
    }

    .page-wrapper.homepage-v2 .tpa-home-feature-grid__header h2 {
        font-size: 32px;
    }

    .page-wrapper.homepage-v2 .tpa-home-feature-grid__card,
    .page-wrapper.homepage-v2 .tpa-home-feature-grid__card-link {
        min-height: 340px;
    }

    .page-wrapper.homepage-v2 .tpa-home-feature-grid__card-link {
        padding: 24px 24px 0;
    }

    .page-wrapper.homepage-v2 .tpa-home-feature-grid__card-copy h3 {
        font-size: 28px;
    }

    .page-wrapper.homepage-v2 .tpa-home-feature-grid__card-media {
        height: 190px;
    }
}

/* ============================================================
   Homepage 20260407 First Section
   说明：
   - 首页 banner 保持旧轮播版本不动。
   - 这里单独接管 banner 下方首组深色产品入口模块。
   - 模块结构已经在 index.php 中重排，样式层只负责新版
     2x2 深色区、白卡、节奏和响应式，不再复用旧 featured grid 规则。
   ============================================================ */

/**
 * 产品系统区容器
 * - 本轮重构目标是让模块脱离常规版心，形成真正的全宽 2x2 入口区。
 * - 桌面端通过左右内边距制造卡片间留白，而不是把内容塞回 .container。
 * - 背景继续沿用首页浅色区块变量，避免和后续模块产生断层。
 */
.page-wrapper.homepage-v2 .tpa-home-system-section {
    position: relative;
    margin-top: var(--v2-home-card-gap, 20px);
    padding: 0 var(--v2-home-card-gap, 20px);
    box-sizing: border-box;
    height: max(
        calc(100dvh - var(--v2-home-card-gap, 20px)),
        calc((590px * 2) + var(--v2-home-card-gap, 20px))
    );
    min-height: max(
        calc(100dvh - var(--v2-home-card-gap, 20px)),
        calc((590px * 2) + var(--v2-home-card-gap, 20px))
    );
    background: var(--v2-home-light-section-bg, #F4F6F9);
}

/**
 * 产品系统区 2x2 网格布局
 * - 桌面端固定为两列两行，整体高度使用浏览器可见内容区的 100dvh。
 * - 两行卡片平分可见区域，避免使用物理屏幕高度导致被浏览器工具栏遮挡。
 * - 使用首页统一卡片间距变量，保持与其它模块的节奏一致。
 */
.page-wrapper.homepage-v2 .tpa-home-system-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--v2-home-card-gap, 20px);
    min-height: 0;
    height: 100%;
}

/**
 * 产品系统区卡片容器
 * - 这里不再挂链接语义，只负责占位与高度继承。
 * - min-height: 0 让内部网格可以真正按一屏高度拉伸，不会被内容撑坏。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card {
    min-height: 0;
    height: 100%;
}

/**
 * 产品系统区卡片主体
 * - 用独立容器承接 hover、边框、圆角和阴影。
 * - 改成“文案在上、图片在下”的双行布局，让产品图完整展示。
 * - 这里只做视觉容器，不再承担点击行为。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__inner {
    position: relative;
    display: flex;
    align-items: stretch;
    min-height: 100%;
    height: 100%;
    padding: 0;
    border-radius: 0;
    border: 1px solid var(--v2-bg-divider, #E3E8F0);
    background: linear-gradient(180deg, var(--v2-home-card-bg, #FFFFFF) 0%, rgba(255, 255, 255, 0.96) 100%);
    box-shadow: none;
    overflow: hidden;
    transition: none;
}

/**
 * 产品系统区卡片 hover 效果
 * - 当前需求明确要求删除卡片 hover 反馈。
 * - 因此这里不再给卡片添加上移、阴影升级或边框变色。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__inner:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--v2-bg-divider, #E3E8F0);
}

/**
 * 产品系统区文案容器
 * - 桌面端改为左对齐，提升信息层级和按钮可扫读性。
 * - 通过 gap 统一标题、正文与按钮的垂直节奏。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    gap: var(--v2-spacing-sm, 12px);
    width: 100%;
    max-width: none;
    min-height: 100%;
    padding: clamp(48px, 7vw, 96px) clamp(32px, 5vw, 64px) clamp(32px, 4vw, 48px);
}

/**
 * 产品系统区卡片标签
 * - 保持源码原始大小写，禁止 CSS 强制全大写。
 * - 继续使用较小字号做 eyebrow，不抢主标题层级。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__label {
    font-size: var(--v2-home-card-meta-font-size, 13px);
    line-height: var(--v2-home-card-meta-line-height, 18px);
    font-weight: 600;
    letter-spacing: var(--v2-home-card-meta-letter-spacing, 0.04em);
    text-transform: none;
    color: var(--v2-text-secondary, #6E6E73);
}

/**
 * 产品系统区卡片主标题
 * - 使用较大的标题等级，但通过 wrap 允许自然换行。
 * - 保证型号类词组不会因为缺少空格而溢出容器。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__copy h3 {
    margin: 0;
    font-size: var(--v2-h1-font-size, 32px);
    line-height: var(--v2-h1-line-height, 40px);
    color: var(--v2-text-heading, #171A1D);
    overflow-wrap: anywhere;
}

/**
 * 产品系统区卡片描述文字
 * - 描述保持当前页面文案不变，只调整版式和最大宽度。
 * - 桌面端给一个适度的阅读宽度，避免每行过长。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__copy p {
    margin: 0;
    max-width: 36rem;
    color: var(--v2-text-body, #3A3A3C);
    font-size: var(--v2-font-size-lg, 18px);
    line-height: var(--v2-line-height-lg, 28px);
}

/**
 * 产品系统区按钮
 * - 按钮是模块中唯一的可点击元素。
 * - 复用首页现有蓝色胶囊按钮体系，只在这里补充最小布局约束。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__cta.tpa-gallery-btn.v2-btn {
    margin-top: var(--v2-spacing-xs, 8px);
    width: fit-content;
    text-decoration: none;
    min-height: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--v2-text-heading, #171A1D);
    font-size: var(--v2-font-size-lg, 18px);
    font-weight: 600;
    line-height: var(--v2-line-height-lg, 28px);
    position: relative;
}

/**
 * 文本按钮尾部箭头
 * - 参考目标效果，按钮不再是胶囊块，而是文本后跟轻量箭头。
 * - 箭头单独用伪元素实现，避免改动按钮文案本身。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__cta.tpa-gallery-btn.v2-btn::after {
    content: '›';
    margin-left: var(--v2-spacing-xs, 8px);
    font-size: 1.15em;
    line-height: 1;
}

/**
 * 文本按钮 hover
 * - 仅做颜色和轻微位移反馈，不再使用蓝底胶囊 hover。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__cta.tpa-gallery-btn.v2-btn:hover {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--v2-primary-500, #2967D3);
    transform: translateY(-1px);
}

/**
 * 文本按钮 active
 * - 保持纯文本语义，仅调整颜色。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__cta.tpa-gallery-btn.v2-btn:active {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: var(--v2-primary-600, #184AAD);
}

/**
 * 产品系统区图片容器
 * - 使用剩余空间承接图片，保证 2x2 卡片在一屏内仍有足够图像面积。
 * - 图片区居中并向底部对齐，保持产品展示稳定。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    pointer-events: none;
    z-index: 1;
}

/**
 * 产品系统区不再给文案加任何背景或遮罩
 * - 当前需求明确要求文字直接叠在图片上，不要额外背景模块。
 * - 因此这里显式关闭之前的保护渐变层，避免继续污染画面。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__media::before {
    display: none;
}

/**
 * 产品系统区图片与 <picture> 容器
 * - 当前产品图已经按长画幅重新设计，所以这里改为直接铺满卡片高度。
 * - 使用 cover 让图片真正占满父层，不再因为 contain 留出上下空白。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__media picture,
.page-wrapper.homepage-v2 .tpa-home-system-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    transition: none;
}

/**
 * 产品系统区图片 hover 联动
 * - 当前图片需要严格贴满卡片，不能再做位移，否则会露出底部空白。
 * - 因此这里取消图片本身的 hover 位移，只保留卡片容器的整体反馈。
 */
.page-wrapper.homepage-v2 .tpa-home-system-card__inner:hover .tpa-home-system-card__media img,
.page-wrapper.homepage-v2 .tpa-home-system-card__inner:hover .tpa-home-system-card__media picture {
    transform: none;
}

/* ============================================================
   产品系统区响应式适配 - 大平板端（≤1199px）
   ============================================================ */
@media (max-width: 1199px) {
    .page-wrapper.homepage-v2 .tpa-home-system-grid {
        grid-template-rows: repeat(2, minmax(0, 1fr));
        min-height: 0;
        height: 100%;
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card {
        min-height: 0;
        height: 100%;
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card__inner {
        min-height: 100%;
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card__copy h3 {
        font-size: var(--v2-display-sm-size, 28px);
        line-height: var(--v2-display-sm-line-height, 36px);
    }
}

/* ============================================================
   产品系统区响应式适配 - 平板与手机（≤991px）
   - 统一切为单列纵向堆叠，避免 2x2 满屏结构在窄屏上压缩。
   ============================================================ */
@media (max-width: 991px) {
    .page-wrapper.homepage-v2 .tpa-home-system-section {
        margin-top: var(--v2-home-system-offset-md, 32px);
        height: auto;
        min-height: auto;
        padding: var(--v2-spacing-lg, 16px);
    }

    .page-wrapper.homepage-v2 .tpa-home-system-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: var(--v2-spacing-lg, 16px);
        min-height: auto;
        height: auto;
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card {
        min-height: var(--v2-home-system-card-min-height-sm, 480px);
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card__inner {
        display: flex;
        min-height: var(--v2-home-system-card-min-height-sm, 480px);
        padding: 0;
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card__copy {
        position: absolute;
        inset: 0;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        width: 100%;
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card__copy p {
        max-width: 100%;
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card__cta.tpa-gallery-btn.v2-btn {
        width: 100%;
        justify-content: center;
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card__media {
        position: absolute;
        inset: 0;
        min-height: 100%;
        margin-top: 0;
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card__media picture,
    .page-wrapper.homepage-v2 .tpa-home-system-card__media img {
        object-fit: cover;
        object-position: center center;
    }
}

/* ============================================================
   产品系统区响应式适配 - 手机端（≤767px）
   - 对齐移动端视觉规范：垂直商品卡片高度 528px。
   ============================================================ */
@media (max-width: 767px) {
    .page-wrapper.homepage-v2 .tpa-home-system-section {
        margin-top: var(--v2-home-system-offset-sm, 24px);
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card__copy h3 {
        font-size: var(--v2-h2-font-size, 24px);
        line-height: var(--v2-h2-line-height, 32px);
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card__copy p {
        font-size: var(--v2-font-size-base, 16px);
        line-height: var(--v2-line-height-base, 24px);
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card {
        height: 528px;
        min-height: 528px;
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card__inner {
        height: 528px;
        min-height: 528px;
    }

    .page-wrapper.homepage-v2 .tpa-home-system-card__media {
        min-height: 100%;
    }
}