* {
    margin: 0;
    padding: 0;
    /*font-family:'MiSans', 'Noto Sans SC', 'Inter', sans-serif;*/
    /* 关闭浏览器自带字体平滑加粗，网页字体不糊不粗 */
    font-family: 'MiSans', sans-serif, -apple-system, BlinkMacSystemFont;
    border: 0;
    outline: medium;
    text-shadow: none;
    text-decoration: none;
}


:root {
    --accent: #ff006e;
    --primary: #22D3EE;
    --secondary: #C084FC;
    --green: #4ADE80;
    --orange: #FB923C;
    --dark: #020013;
    --glass: rgba(255, 255, 255, 0.03);
}
.c_blue{color:var(--primary);}
.c_prue{color:var(--secondary);}
.c_green{color:var(--green);}
.c_orange{color:var(--orange);}
ul {
    list-style: none;
}
body {
    background: linear-gradient(180deg,#020013 0%, #030014 33%, #090230 76.25%);
    color: #fff;
    overflow-x: hidden;
}
html {
    font-size: 0.52083vw;
    font-size: clamp(6.5px, 0.52083vw, 10px);
}


a, a:link, a:active, a:visited, a:hover {
    text-decoration: none;
}
.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
}
/* 自定义滚动条 */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #0a0a0a;
}
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 4px;
}



/* 霓虹文字效果 */
.neon-text {
    text-shadow:
            0 0 10px rgba(0, 240, 255, 0.5),
            0 0 20px rgba(0, 240, 255, 0.3),
            0 0 40px rgba(0, 240, 255, 0.2);
}

.neon-border {
    box-shadow:
            0 0 20px rgba(0, 240, 255, 0.3),
            inset 0 0 20px rgba(0, 240, 255, 0.1);
}

/* 网格背景 */
.grid-bg {
    background-image:
            linear-gradient(rgba(0, 240, 255, 0.03) 1px, transparent 1px),
            linear-gradient(90deg, rgba(0, 240, 255, 0.03) 1px, transparent 1px);
    background-size: 50px 50px;
}

/* 浮动动画 */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-20px); }
}


@keyframes pulse-glow {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

@keyframes scan {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}
.animate-pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse {
    50% {
        opacity: .5
    }
}
.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0
    }
}
.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}


/* 玻璃拟态 */
.glass-panel {
    background: var(--glass);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 3D卡片效果 */
.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.5s;
}

.card-3d:hover {
    transform: rotateY(5deg) rotateX(5deg) translateZ(20px);
}

/* 文字解码动画 */
.decode-text {
    font-family: monospace;
}

/* 粒子画布 */
#particles-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    display: block;

}

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

/* 故障艺术 */
.glitch {
    position: relative;
}

.glitch::before,
.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.glitch::before {
    animation: glitch-1 2s infinite;
    color: #ff006e;
    z-index: -1;
}

.glitch::after {
    animation: glitch-2 2s infinite;
    color: #00f0ff;
    z-index: -2;
}

@keyframes glitch-1 {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
    20% { clip-path: inset(20% 0 30% 0); transform: translate(-2px, 2px); }
    40% { clip-path: inset(50% 0 20% 0); transform: translate(2px, -2px); }
    60% { clip-path: inset(10% 0 60% 0); transform: translate(-2px, 0); }
    80% { clip-path: inset(80% 0 5% 0); transform: translate(2px, 2px); }
}

@keyframes glitch-2 {
    0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
    20% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -2px); }
    40% { clip-path: inset(30% 0 40% 0); transform: translate(-2px, 2px); }
    60% { clip-path: inset(10% 0 80% 0); transform: translate(2px, 0); }
    80% { clip-path: inset(40% 0 30% 0); transform: translate(-2px, -2px); }
}

/* 全息效果 */
.hologram {
    background: linear-gradient(135deg,
    rgba(0, 240, 255, 0.1) 0%,
    rgba(112, 0, 255, 0.1) 50%,
    rgba(255, 0, 110, 0.1) 100%);
    border: 1px solid rgba(0, 240, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.hologram::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: repeating-linear-gradient(
            0deg,
            transparent,
            transparent 2px,
            rgba(0, 240, 255, 0.03) 2px,
            rgba(0, 240, 255, 0.03) 4px
    );
    animation: hologram-scan 10s linear infinite;
}

@keyframes hologram-scan {
    0% { transform: translateY(0); }
    100% { transform: translateY(50%); }
}

/* 按钮特效 */
.cyber-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s;
}

.cyber-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.5s;
}

.cyber-btn:hover::before {
    left: 100%;
}

.cyber-btn:hover {
    box-shadow: 0 0 30px rgba(70, 48, 255, 0.6);
    transform: translateY(-2px);
}

/* 标签效果 */
.tag {
    position: relative;
    padding: 4px 12px;
    background: rgba(0, 240, 255, 0.1);
    border: 1px solid rgba(0, 240, 255, 0.3);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* 进度环 */
.progress-ring {
    transform: rotate(-90deg);
}
.progress-ring-circle {
    transition: stroke-dashoffset 1s ease-in-out;
}
.warpper{
    width:1600px;
    margin:0 auto;
}