.article-list{position:relative;overflow:hidden;background:linear-gradient(180deg, #f8fafc 0%, #eef5fa 100%)}.article-list::before,.article-list::after{content:'';position:absolute;border-radius:50%;pointer-events:none}.article-list::before{left:-140px;top:-120px;width:360px;height:360px;background:radial-gradient(circle, rgba(37,196,252,0.16), rgba(37,196,252,0) 70%)}.article-list::after{right:-120px;bottom:-160px;width:320px;height:320px;background:radial-gradient(circle, rgba(111,217,255,0.18), rgba(111,217,255,0) 70%)}.article-list .container{position:relative;z-index:1}.article-list .list-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;padding-bottom:22px;margin-bottom:34px;border-bottom:1px solid rgba(37,196,252,0.2)}.article-list .list-head .head-left{min-width:0}.article-list .list-head .head-left .head-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--primary-color)}.article-list .list-head .head-left .head-eyebrow::before{content:'';width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg, var(--primary-color), #6FD9FF)}.article-list .list-head .head-left .head-title{margin-top:10px;color:#1f2d3d;line-height:1.3}.article-list .list-head .head-left .head-desc{margin-top:8px;max-width:640px;color:#8a97a5;line-height:1.7}.article-list .list-head .head-count{flex:0 0 auto;text-align:right}.article-list .list-head .head-count .count-num{display:block;font-size:40px;font-weight:700;line-height:1;background:linear-gradient(120deg, var(--primary-color), #6FD9FF);-webkit-background-clip:text;background-clip:text;color:transparent}.article-list .list-head .head-count .count-text{display:block;margin-top:6px;font-size:13px;color:#8a97a5}.article-list .article-list-wrapper{display:grid;grid-template-columns:repeat(3, 1fr);gap:28px}.article-list .article-list-wrapper .article-item{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(20,60,110,0.08);transition:transform .45s ease,box-shadow .45s ease}.article-list .article-list-wrapper .article-item::after{content:'';position:absolute;left:0;top:0;z-index:3;width:0;height:3px;border-radius:0 3px 3px 0;background:linear-gradient(90deg, var(--primary-color), #6FD9FF);transition:width .45s ease}.article-list .article-list-wrapper .article-item .image-wrapper{position:relative;aspect-ratio:16 / 10;overflow:hidden;background:linear-gradient(120deg, #eaf6fd 0%, #f4f9fc 100%)}.article-list .article-list-wrapper .article-item .image-wrapper img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}.article-list .article-list-wrapper .article-item .image-wrapper::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(10,40,70,0) 50%, rgba(10,40,70,0.32) 100%);opacity:0;transition:opacity .45s ease}.article-list .article-list-wrapper .article-item .image-wrapper .featured-tag{position:absolute;left:16px;top:16px;z-index:2;padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#fff;background:linear-gradient(120deg, var(--primary-color) 0%, #6FD9FF 100%);box-shadow:0 6px 16px rgba(37,196,252,0.4)}.article-list .article-list-wrapper .article-item .image-wrapper .image-mask{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(15,60,100,0.28);opacity:0;transition:opacity .45s ease}.article-list .article-list-wrapper .article-item .image-wrapper .image-mask .mask-icon{display:flex;align-items:center;justify-content:center;width:52px;height:52px;border-radius:50%;color:#fff;background:linear-gradient(120deg, var(--primary-color) 0%, #6FD9FF 100%);box-shadow:0 10px 24px rgba(37,196,252,0.45);transform:scale(.6);transition:transform .45s cubic-bezier(.2, .8, .3, 1)}.article-list .article-list-wrapper .article-item .content{display:flex;flex-direction:column;flex:1;padding:22px 24px 20px}.article-list .article-list-wrapper .article-item .content .meta{display:flex;align-items:center;gap:18px;font-size:13px;color:#97a3b0}.article-list .article-list-wrapper .article-item .content .meta span{display:inline-flex;align-items:center;gap:6px}.article-list .article-list-wrapper .article-item .content .meta svg{flex:0 0 auto}.article-list .article-list-wrapper .article-item .content .title{margin-top:12px;font-size:18px;line-height:1.5;color:#1f2d3d;transition:color .3s ease}.article-list .article-list-wrapper .article-item .content .desc{margin-top:10px;line-height:1.7;color:#78848f}.article-list .article-list-wrapper .article-item .content .more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font-size:14px;font-weight:600;color:var(--primary-color)}.article-list .article-list-wrapper .article-item .content .more svg{transition:transform .35s ease}.article-list .article-list-wrapper .article-item.featured{grid-column:1 / -1;flex-direction:row;align-items:stretch}.article-list .article-list-wrapper .article-item.featured .image-wrapper{width:52%;flex:0 0 52%;aspect-ratio:16 / 11}.article-list .article-list-wrapper .article-item.featured .content{flex:1;min-width:0;justify-content:center;padding:36px 40px}.article-list .article-list-wrapper .article-item.featured .content .title{font-size:26px;line-height:1.35}.article-list .article-list-wrapper .article-item.featured .content .desc{margin-top:14px;-webkit-line-clamp:3}.article-list .article-list-wrapper .article-item.featured .content .more{padding-top:24px}.article-list .article-list-wrapper .article-item:hover{transform:translateY(-8px);box-shadow:0 20px 44px rgba(37,196,252,0.2)}.article-list .article-list-wrapper .article-item:hover::after{width:100%}.article-list .article-list-wrapper .article-item:hover .image-wrapper img{transform:scale(1.08)}.article-list .article-list-wrapper .article-item:hover .image-wrapper::after{opacity:1}.article-list .article-list-wrapper .article-item:hover .image-wrapper .image-mask{opacity:1}.article-list .article-list-wrapper .article-item:hover .image-wrapper .image-mask .mask-icon{transform:scale(1)}.article-list .article-list-wrapper .article-item:hover .content .title{color:var(--primary-color)}.article-list .article-list-wrapper .article-item:hover .content .more svg{transform:translateX(5px)}@media screen and (max-width:1200px){.article-list .article-list-wrapper{gap:20px}.article-list .article-list-wrapper .article-item.featured .content{padding:28px}}@media screen and (max-width:992px){.article-list .list-head{flex-direction:column;align-items:flex-start;gap:16px;padding-bottom:16px;margin-bottom:20px}.article-list .list-head .head-left .head-title{font-size:22px}.article-list .list-head .head-left .head-desc{-webkit-line-clamp:2}.article-list .list-head .head-count{text-align:left}.article-list .list-head .head-count .count-num{font-size:30px}.article-list .article-list-wrapper{grid-template-columns:1fr;gap:20px}.article-list .article-list-wrapper .article-item{border-radius:14px}.article-list .article-list-wrapper .article-item .content{padding:18px 18px 16px}.article-list .article-list-wrapper .article-item .content .title{font-size:17px}.article-list .article-list-wrapper .article-item.featured{flex-direction:column}.article-list .article-list-wrapper .article-item.featured .image-wrapper{width:100%;flex:none;aspect-ratio:16 / 10}.article-list .article-list-wrapper .article-item.featured .content{padding:18px 18px 16px}.article-list .article-list-wrapper .article-item.featured .content .title{font-size:19px}.article-list .article-list-wrapper .article-item.featured .content .desc{-webkit-line-clamp:2}.article-list .article-list-wrapper .article-item.featured .content .more{padding-top:16px}.article-list .article-list-wrapper .article-item:hover{transform:translateY(-4px)}}