*{margin:0;padding:0;box-sizing:border-box;font-family:"Microsoft Yahei",sans-serif;}
body{background:#f8f8f8;padding:50px 40px;}

/* 标题：故障输出 / 打字机逐个字母动画 */
h1{
    text-align:center;
    font-size:32px;
    color:#222;
    margin-bottom:50px;
    opacity:0;
    animation: textGlitch 1.8s ease-out forwards;
}

/* 文字故障弹出动画核心 */
@keyframes textGlitch {
    0% {
        opacity: 0;
        transform: translateY(20px);
        letter-spacing: -2px;
    }
    20% {
        opacity: 0.3;
        letter-spacing: 1px;
    }
    50% {
        opacity: 0.7;
        transform: translateY(-5px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        letter-spacing: 0px;
    }
}

.box-wrap{
    display:grid;
    grid-template-columns: repeat(4,1fr);
    gap:32px;
}

.item-card{
    background:#fff;
    padding:35px 30px;
    border-radius:8px;
    box-shadow:0 2px 10px rgba(0,0,0,0.05);
    width:100%;
    height:auto;
    min-height:380px;
    word-wrap:break-word;
    white-space:normal;
    overflow:hidden;

    /* 大幅度上浮淡入 */
    opacity:0;
    transform: translateY(80px);
    animation: slideUp 1.1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

/* 依次延迟：1→2→3→4 */
.item-card:nth-child(1) { animation-delay: 0.8s; }
.item-card:nth-child(2) { animation-delay: 1.0s; }
.item-card:nth-child(3) { animation-delay: 1.2s; }
.item-card:nth-child(4) { animation-delay: 1.4s; }

.icon-img{
    width:110px;
    height:110px;
    margin-bottom:20px;
    object-fit:contain;
}

.card-title{
    font-size:20px;
    font-weight:bold;
    color:#222;
    margin-bottom:16px;
    line-height:1.4;
    min-height:56px;
}

.card-desc{
    font-size:15px;
    line-height:1.7;
    color:#555;
    word-break:normal;
}

@keyframes slideUp {
    to {
        opacity:1;
        transform: translateY(0);
    }
}