/* 全局样式重置/基础（如已引入Tailwind可忽略） */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Microsoft Yahei", sans-serif;
}

/* 九大优势卡片核心样式 */
.digital-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: 100%;          /* 适配网格列宽 */
    max-width: 28em;      /* 限制最大宽度，避免大屏拉伸 */
    min-height: 18em;     /* 统一卡片最小高度，避免排版错乱 */
    padding: 2em 1em;     /* 内边距适配小屏 */
    background: #FFF;
    box-shadow: 0 0 8px 0 rgba(32, 32, 36, 0.08);
    border-radius: 12px;  /* 圆角更美观 */
    transition: all 0.35s ease;
}

/* 卡片顶部横线特效 */
.digital-card::before, .digital-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 4px 4px 0 0; /* 横线圆角匹配卡片 */
}

.digital-card::before {
    background: #FF7F00; /* 橙色主色 */
    width: 0;
    opacity: 0;
    transition: opacity 0 ease, width 0 ease;
    transition-delay: 0.5s;
}

.digital-card::after {
    background: #FFFFFF;
    width: 100%;
    transition: width 0.5s ease;
}

/* 卡片内容区 */
.digital-content {
    width: 90%;           /* 适配小屏，减少左右留白 */
    max-width: 20em;
    text-align: center;
}

/* 卡片标题/logo */
.digital-logo {
    margin: 0 0 1.2em;
    font-size: 1.25em;
    font-weight: 700;
    color: #333333;
    transition: all 0.35s ease;
}

/* 悬浮展开的内容 */
.digital-hover-content {
    overflow: hidden;
    max-height: 0;
    transform: translateY(1em);
    transition: all 0.55s ease;
}

.digital-hover-content p {
    margin: 1.2em 0 0;
    color: #6E6E70;
    line-height: 1.6em;
    text-align: left;    /* 正文左对齐更易读 */
    font-size: 0.95em;   /* 缩小字体，适配9张卡片排版 */
}

/* 卡片hover交互 */
.digital-card:hover {
    transform: translateY(-8px); /* 轻微上浮，增强交互感 */
    box-shadow: 0 12px 24px 0 rgba(32, 32, 36, 0.12);
}

.digital-card:hover::before {
    width: 100%;
    opacity: 1;
    transition: opacity 0.5s ease, width 0.5s ease;
    transition-delay: 0;
}

.digital-card:hover::after {
    width: 0;
    opacity: 0;
    transition: width 0 ease;
}

.digital-card:hover .digital-logo {
    margin-bottom: 0.8em;
}

.digital-card:hover .digital-hover-content {
    max-height: 18em; /* 增大最大高度，适配长文本 */
    transform: none;
}

/* 响应式微调：小屏优化 */
@media (max-width: 640px) {
    .digital-card {
        min-height: 16em;
        padding: 1.5em 0.8em;
    }
    .digital-logo {
        font-size: 1.1em;
    }
    .digital-hover-content p {
        font-size: 0.9em;
    }
}

/* 平板端微调 */
@media (min-width: 641px) and (max-width: 1024px) {
    .digital-card {
        min-height: 17em;
    }
}