/* 清淡天青 / 淡蓝系：明亮、干净，非咖啡色 */
/* 抬头标题：思源黑体特粗（国内镜像），失败则回退微软雅黑 */
@import url("https://fonts.loli.net/css2?family=Noto+Sans+SC:wght@700;800;900&display=swap");

body {
    background: linear-gradient(165deg, #f0fbff 0%, #e3f4fc 45%, #d8eff9 100%);
    background-color: #eaf6fc;
    min-height: 100vh;
    color: #1a3a52;
}

.container {
    position: relative;
    z-index: 0;
}

header {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(230, 246, 255, 0.9) 100%);
    border-bottom: 1px solid rgba(125, 211, 252, 0.55);
    box-shadow: 0 8px 28px rgba(14, 116, 144, 0.08);
}

/* 抬头主标题：无底版镂空 —— 去掉 text-stroke，仅用实色渐变 + 轻外晕（适配白/淡蓝底） */
@keyframes title-gradient-flow {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

@keyframes title-line-flow {
    0% {
        background-position: 0% 50%;
        opacity: 0.92;
    }
    100% {
        background-position: 100% 50%;
        opacity: 1;
    }
}

header h1 {
    font-family: "Noto Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    font-size: clamp(1.9rem, 5vw, 2.95rem);
    font-weight: 900;
    letter-spacing: 0.1em;
    margin: 0.5rem 0 0.12rem;
    line-height: 1.28;
    text-align: center;

    /* 靛紫 → 艳紫 → 玫红点缀 → 天青：对比够、中间不用近白色，避免“空心字” */
    background: linear-gradient(
        100deg,
        #312e81 0%,
        #4f46e5 16%,
        #6d28d9 30%,
        #9333ea 42%,
        #c026d3 52%,
        #0891b2 62%,
        #7c3aed 76%,
        #4338ca 90%,
        #312e81 100%
    );
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;

    /* 禁止描边：勿用 -webkit-text-stroke，与 clip-text 叠用易出现笔画镂空、断裂 */

    /* 金黄色光晕（字本身仍为紫青渐变） */
    filter:
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 3px rgba(255, 236, 160, 0.95))
        drop-shadow(0 0 8px rgba(255, 214, 80, 0.65))
        drop-shadow(0 0 14px rgba(255, 193, 7, 0.35))
        drop-shadow(0 2px 4px rgba(180, 120, 0, 0.15));

    animation: title-gradient-flow 10s ease-in-out infinite alternate;
}

header h1::after {
    content: "";
    display: block;
    width: min(16em, 95%);
    height: 4px;
    margin: 0.55rem auto 0;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(79, 70, 229, 0.5),
        #7c3aed,
        #22d3ee,
        #a855f7,
        rgba(79, 70, 229, 0.5),
        transparent
    );
    background-size: 200% 100%;
    background-position: 0% 50%;
    box-shadow:
        0 0 6px rgba(255, 220, 120, 0.55),
        0 0 12px rgba(255, 193, 7, 0.35);
    animation: title-line-flow 8s ease-in-out infinite alternate;
}

.sidebar,
.content,
.service-box {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(125, 211, 252, 0.45);
    backdrop-filter: blur(8px);
}

.sidebar h3,
.content h2,
.service-box h3 {
    color: #0e7490;
    border-bottom-color: rgba(34, 211, 238, 0.35);
}

.category-item h4 {
    color: #0e7490;
}

.menu-item {
    background: rgba(224, 242, 254, 0.65);
}

.menu-item:hover {
    background: rgba(186, 230, 253, 0.9);
}

.menu-item a {
    color: #164e63;
}

.news-date {
    color: #0891b2;
}

.download-btn,
.action-btn {
    background: linear-gradient(95deg, #22d3ee 0%, #38bdf8 45%, #7dd3fc 100%);
    color: #0c4a6e;
}

.download-btn:hover,
.action-btn:hover {
    background: linear-gradient(100deg, #06b6d4 0%, #0ea5e9 48%, #38bdf8 100%);
    color: #082f49;
}

footer {
    border-top-color: rgba(125, 211, 252, 0.5);
    color: #64748b;
}

.news-item {
    border-bottom-color: rgba(125, 211, 252, 0.25);
}

.category-item,
.equipment-categories .category-item {
    border-color: rgba(125, 211, 252, 0.4);
}