/* 全局样式 */
[x-cloak]{display:none!important}
html{scroll-behavior:smooth}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif}

/* 渐变背景动画 */
.gradient-bg{background:linear-gradient(135deg,#1e40af 0%,#3b82f6 50%,#06b6d4 100%);background-size:200% 200%;animation:gradient 8s ease infinite}
@keyframes gradient{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* 浮动动画 */
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}100%{transform:translateY(0)}}
.float-anim{animation:float 4s ease-in-out infinite}

/* 卡片悬停 */
.card-hover{transition:all .3s ease}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 20px 40px -10px rgba(0,0,0,.1)}

/* 渐入动画 */
@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.fade-in-up{animation:fadeInUp .6s ease-out forwards}

/* 数字滚动 */
.counter{font-variant-numeric:tabular-nums}

/* 波浪分割线 */
.wave-divider{position:relative;height:80px;overflow:hidden}
.wave-divider svg{position:absolute;width:100%;height:100%}

/* 产品图标渐变 */
.icon-gradient-1{background:linear-gradient(135deg,#3b82f6,#06b6d4)}
.icon-gradient-2{background:linear-gradient(135deg,#06b6d4,#10b981)}
.icon-gradient-3{background:linear-gradient(135deg,#10b981,#84cc16)}
.icon-gradient-4{background:linear-gradient(135deg,#8b5cf6,#ec4899)}

/* 架构图节点 */
.arch-node{transition:all .3s ease}
.arch-node:hover{filter:brightness(1.1);transform:scale(1.03)}

/* 时间线 */
.timeline-dot{width:12px;height:12px;border-radius:50%;background:#3b82f6;position:relative;z-index:2}
.timeline-line{position:absolute;left:5px;top:0;bottom:0;width:2px;background:#e5e7eb}

/* 表格美化 */
.version-table th{background:#f0f9ff;color:#1e40af}
.version-table td,.version-table th{padding:12px 16px;border:1px solid #e5e7eb;text-align:center}
.version-table tr:hover td{background:#f8fafc}

/* 证书卡片翻转 */
.cert-card{perspective:1000px}
.cert-inner{transition:transform .6s;transform-style:preserve-3d;position:relative}
.cert-card:hover .cert-inner{transform:rotateY(180deg)}
.cert-front,.cert-back{backface-visibility:hidden;position:absolute;top:0;left:0;width:100%;height:100%}
.cert-back{transform:rotateY(180deg)}