@font-face {
    /* 引入本地标题字体，用于首页 banner 英文大标题。 */
    font-family: "XinYiLogoTi";
    src: url("../fonts/XinYilogoTi.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

* {
    /* 统一盒模型，避免内边距和边框撑大元素。 */
    box-sizing: border-box;
}

html {
    /* 页面锚点滚动使用平滑动画。 */
    scroll-behavior: smooth;
}

body {
    /* 设置首页基础字体、颜色和深色背景。 */
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    color: #fff;
    font-family: "Microsoft YaHei", Arial, sans-serif;
    background: #020817;
}

a {
    /* 链接继承颜色并去掉默认下划线。 */
    color: inherit;
    text-decoration: none;
}

button,
input {
    /* 表单控件继承页面字体。 */
    font: inherit;
}

button {
    /* 所有按钮显示小手。 */
    cursor: pointer;
}

.page-bg {
    /* 固定星空背景层。 */
    position: fixed;
    inset: 0;
    z-index: -1;
    background: radial-gradient(circle at 18% 12%, rgba(127, 48, 255, .28), transparent 24%), radial-gradient(circle at 84% 18%, rgba(0, 206, 255, .18), transparent 28%), linear-gradient(135deg, #060525 0%, #03091b 54%, #02192b 100%);
}

.page-bg::after {
    /* 使用小圆点绘制星空颗粒。 */
    content: "";
    position: absolute;
    inset: 0;
    opacity: .18;
    background-image: radial-gradient(circle, rgba(255, 255, 255, .7) 1px, transparent 1px);
    background-size: 72px 72px;
}

.site-header,
.layout,
.site-footer {
    /* 首页、分页统一使用 1720px 最大内容宽度。 */
    width: min(1720px, calc(100% - 56px));
    margin-left: auto;
    margin-right: auto;
}

.site-header {
    /* 顶部导航栏样式。 */
    min-height: 76px;
    padding: 0 32px;
    display: flex;
    align-items: center;
    gap: 40px;
    border: 1px solid rgba(132, 79, 255, .32);
    border-radius: 0 0 24px 24px;
    background: rgba(3, 8, 26, .94);
    box-shadow: 0 0 34px rgba(77, 64, 255, .22);
}

.logo {
    /* 首页顶部 Logo 使用粉蓝渐变。 */
    flex: 0 0 auto;
    font-size: 32px;
    font-weight: 950;
    letter-spacing: 1px;
    background: linear-gradient(90deg, #ff42f6, #24d7ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.main-nav {
    /* 主导航居中排列，间距和四个素材分页保持一致。 */
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 54px;
}

.nav-link {
    /* 单个导航入口，文字大小、粗细和位置与四个素材分页保持一致。 */
    height: auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    color: rgba(255, 255, 255, .9);
    font-size: 18px;
    line-height: normal;
    font-weight: 700;
    transition: color .2s ease, transform .2s ease;
}

.nav-link:hover {
    /* 导航悬停时只切换文字颜色，不位移，和素材分页保持一致。 */
    transform: none;
}

.nav-link:active {
    /* 导航点击时也不位移，避免图标和文字变形。 */
    transform: none;
}

.nav-link:hover:has(.nav-icon.ps) { color: #00a8ff; }
.nav-link:hover:has(.nav-icon.ai) { color: #ff9300; }
.nav-link:hover:has(.nav-icon.c4d) { color: #cbd4ff; }
.nav-link:hover:has(.nav-icon.print) { color: #00f0c8; }

.nav-icon {
    /* 导航图标统一为素材分页最终尺寸。 */
    width: 34px;
    /* 最小宽度锁定，避免图标被导航文字挤压。 */
    min-width: 34px;
    /* 高度和宽度一致，保证图标不变形。 */
    height: 34px;
    /* flex 尺寸固定，点击和悬停时不会影响其他导航项。 */
    flex: 0 0 34px;
    /* 使用 inline-grid 和分页导航保持一致。 */
    display: inline-grid;
    /* 图标文字水平垂直居中。 */
    place-items: center;
    /* 圆角和分页导航一致。 */
    border-radius: 8px;
    /* 字号和分页导航一致。 */
    font-size: 15px;
    /* 使用 normal 行高，让文字垂直位置和分页一致。 */
    line-height: normal;
    /* 字重统一。 */
    font-weight: 900;
    /* 禁止 C4D、3D 换行。 */
    white-space: nowrap;
    /* 不额外拉开字距，防止 C4D 出框。 */
    letter-spacing: 0;
    /* 顶部导航默认保留描边，和素材分页一致。 */
    box-shadow: inset 0 0 0 2px currentColor;
}

.nav-icon.ps { color: #00a8ff; }
.nav-icon.ai { color: #ff9300; }
.nav-icon.c4d { color: #cbd4ff; font-size: 15px; }
.nav-icon.print { color: #00f0c8; font-size: 15px; font-weight: 900; }

.search-box {
    /* 顶部搜索框尺寸和素材分页保持一致。 */
    width: 310px;
    /* 搜索框高度和分页一致。 */
    height: 46px;
    /* 使用 flex 保证搜索图标垂直居中。 */
    display: flex;
    /* 垂直居中输入框和按钮。 */
    align-items: center;
    /* 左右内边距和分页一致。 */
    padding: 0 12px 0 20px;
    /* 粉紫描边。 */
    border: 1px solid rgba(255, 79, 234, .58);
    /* 胶囊圆角。 */
    border-radius: 999px;
    /* 深色半透明背景。 */
    background: rgba(4, 8, 24, .78);
    /* 搜索框外发光。 */
    box-shadow: 0 0 22px rgba(138, 55, 255, .42);
}

.search-box input {
    /* 搜索输入框占据剩余空间。 */
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    color: #fff;
    background: transparent;
}

.search-box button {
    /* 搜索按钮尺寸和分页一致。 */
    width: 36px;
    /* 搜索按钮高度和宽度一致。 */
    height: 36px;
    /* 使用 flex 居中 CSS 搜索图标。 */
    display: inline-flex;
    /* 水平居中搜索图标。 */
    align-items: center;
    /* 垂直居中搜索图标。 */
    justify-content: center;
    /* 去掉默认内边距。 */
    padding: 0;
    /* 去掉默认边框。 */
    border: 0;
    /* 搜索图标颜色。 */
    color: #f994ff;
    /* 按钮背景透明。 */
    background: transparent;
}

.search-icon {
    /* CSS 绘制搜索放大镜，绘制区域和分页一致。 */
    position: relative;
    /* 放大镜绘制宽度。 */
    width: 20px;
    /* 放大镜绘制高度。 */
    height: 20px;
    /* 块级显示，避免和按钮文字基线产生偏移。 */
    display: block;
}

.search-icon::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    width: 11px;
    height: 11px;
    border: 3px solid currentColor;
    border-radius: 50%;
}

.search-icon::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 8px;
    height: 3px;
    border-radius: 999px;
    background: currentColor;
    transform: rotate(45deg);
}

.layout {
    /* 首页主体内容区域。 */
    padding-top: 12px;
}

.hero {
    /* 首页真实图片 banner，按 1800×500 比例完整显示。 */
    position: relative;
    aspect-ratio: 1800 / 500;
    overflow: hidden;
    border: 1px solid rgba(132, 79, 255, .48);
    border-radius: 18px;
    background: #050018;
    box-shadow: 0 0 36px rgba(127, 48, 255, .24);
}

.hero-images,
.hero-image {
    /* banner 图片铺满容器。 */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.hero-image {
    /* 非当前图片隐藏，切换时淡入淡出。 */
    opacity: 0;
    object-fit: cover;
    transition: opacity .45s ease;
}

.hero-image.active { opacity: 1; }

.hero-title-hidden {
    /* 无障碍标题视觉隐藏。 */
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.home-hero-copy {
    /* banner 代码文字层，位置和素材分页保持一致。 */
    position: absolute;
    /* 左侧距离和分页一致。 */
    left: 72px;
    /* 垂直位置和分页一致。 */
    top: 48%;
    /* 文字层高于图片。 */
    z-index: 2;
    /* 图标和文字横向排列。 */
    display: flex;
    /* 和分页一致，顶部对齐。 */
    align-items: flex-start;
    /* 图标和文字之间的距离。 */
    gap: 22px;
    /* 文案宽度和分页一致。 */
    width: min(640px, 45%);
    /* 文案左对齐。 */
    text-align: left;
    /* 非当前轮播默认隐藏。 */
    opacity: 0;
    /* 隐藏状态不接收鼠标事件。 */
    pointer-events: none;
    /* 隐藏状态略微偏上，切换时有过渡。 */
    transform: translateY(-46%);
    /* 轮播切换过渡。 */
    transition: opacity .35s ease, transform .35s ease;
}

.home-hero-copy.active {
    /* 当前 banner 文字层显示。 */
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
}

.home-hero-icon {
    /* banner 左侧图标，尺寸和四个素材分页保持一致。 */
    width: 76px;
    /* 高度与宽度一致，保证图标不变形。 */
    height: 76px;
    /* 在 flex 布局中锁定图标尺寸，避免文字区域挤压它。 */
    flex: 0 0 76px;
    /* 使用网格把图标文字完全居中。 */
    display: grid;
    /* 水平和垂直居中。 */
    place-items: center;
    /* 描边用当前主题色。 */
    border: 3px solid currentColor;
    /* 圆角和分页 banner 图标一致。 */
    border-radius: 14px;
    /* 图标字号和分页 banner 图标一致。 */
    font-size: 32px;
    /* 字重加粗，保持图标识别度。 */
    font-weight: 950;
    /* 行高固定，避免 C4D、3D 垂直偏移。 */
    line-height: 1;
    /* 不加字距，防止 C4D 三个字符出框。 */
    letter-spacing: 0;
    /* 图标文本居中。 */
    text-align: center;
    /* 深色半透明背景压住图片，提高文字对比度。 */
    background: rgba(0, 0, 0, .42);
    /* 外发光和内高光与分页 banner 保持一致。 */
    box-shadow: 0 0 18px currentColor, inset 0 0 18px rgba(255, 255, 255, .04);
}

.home-hero-icon.ps { color: #18c7ff; }
.home-hero-icon.ai { color: #ff9300; }
.home-hero-icon.c4d { color: #b56cff; }
.home-hero-icon.print { color: #9dff35; }

.home-hero-text {
    /* banner 文案容器，和素材分页保持一致。 */
    width: 100%;
    /* 允许文字容器在 flex 中收缩。 */
    min-width: 0;
    /* 文案颜色。 */
    color: #fff;
    /* 文案左对齐。 */
    text-align: left;
    /* 阴影提高图片上的可读性。 */
    text-shadow: 0 2px 12px rgba(0, 0, 0, .62);
}

.home-hero-eyebrow {
    /* banner 小标题。 */
    margin: 0 0 4px;
    /* 小标题颜色。 */
    color: rgba(255, 255, 255, .86);
    /* 小标题字号。 */
    font-size: clamp(17px, 1.45vw, 24px);
    /* 小标题字重。 */
    font-weight: 700;
    /* 小标题行高。 */
    line-height: 1.2;
    /* 小标题字距。 */
    letter-spacing: 1px;
    /* 小标题左对齐。 */
    text-align: left;
}

.home-hero-main {
    /* banner 英文大标题，采用本地字体和图标同系上下渐变。 */
    display: block;
    /* 宽度占满文字容器，和分页一致。 */
    width: 100%;
    /* 最大宽度和分页一致。 */
    max-width: 560px;
    /* 外边距和分页一致。 */
    margin: 0 0 2px;
    /* 文字透明后显示背景渐变。 */
    color: transparent;
    /* 使用本地标题字体。 */
    font-family: "XinYiLogoTi", Impact, "Arial Black", sans-serif;
    /* 字号和分页一致。 */
    font-size: clamp(42px, 4.1vw, 68px);
    /* 英文倾斜效果。 */
    font-style: italic;
    /* 字体自身较粗，所以保持 400。 */
    font-weight: 400;
    /* 行高压紧。 */
    line-height: .96;
    /* 不额外增加字距。 */
    letter-spacing: 0;
    /* 大标题左对齐。 */
    text-align: left;
    /* 渐变裁剪到文字。 */
    -webkit-background-clip: text;
    /* 标准属性裁剪到文字。 */
    background-clip: text;
    /* 亮度和分页一致，避免过暗。 */
    filter: brightness(1.22) saturate(1.18) drop-shadow(0 0 18px rgba(255, 255, 255, .32));
}

.home-hero-main.ps { background-image: linear-gradient(180deg, #7ff7ff 0%, #16d4ff 100%); }
.home-hero-main.ai { background-image: linear-gradient(180deg, #ffd84a 0%, #ff9300 100%); }
.home-hero-main.c4d { background-image: linear-gradient(180deg, #ffffff 0%, #b56cff 100%); }
.home-hero-main.print { background-image: linear-gradient(180deg, #d8ff52 0%, #53ff00 100%); }

.home-hero-text h2 {
    /* banner 中文标题。 */
    margin: 0 0 10px;
    font-size: clamp(28px, 2.5vw, 42px);
    font-weight: 950;
    line-height: 1.06;
}

.home-hero-copy .ps + .home-hero-text h2 span { color: #18c7ff; }
.home-hero-copy .ai + .home-hero-text h2 span { color: #ff9300; }
.home-hero-copy .c4d + .home-hero-text h2 span { color: #b56cff; }
.home-hero-copy .print + .home-hero-text h2 span { color: #9dff35; }

.home-hero-text p:last-of-type {
    /* banner 说明文字。 */
    margin: 0 0 22px;
    color: rgba(255, 255, 255, .74);
    font-size: clamp(15px, 1.18vw, 20px);
    line-height: 1.35;
    white-space: nowrap;
}

.home-hero-btn {
    /* banner 立即探索按钮，大小统一，只按分类换颜色。 */
    height: 48px;
    min-width: 164px;
    padding: 0 10px 0 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    border-radius: 999px;
    color: #fff;
    font-size: 20px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    transition: filter .2s ease, box-shadow .2s ease;
}

.home-hero-btn.ps { background: linear-gradient(90deg, #20cfff 0%, #7358ff 100%); }
.home-hero-btn.ai { background: linear-gradient(90deg, #ffc323 0%, #ff5b1e 100%); }
.home-hero-btn.c4d { background: linear-gradient(90deg, #55c7ff 0%, #8c45ff 100%); }
.home-hero-btn.print { color: #102600; background: linear-gradient(90deg, #d8ff52 0%, #53ff00 100%); }

.home-hero-btn span {
    /* 按钮右侧圆形箭头。 */
    position: relative;
    width: 34px;
    min-width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #5f6472;
    background: #fff;
    font-size: 0;
    line-height: 1;
}

.home-hero-btn span::before {
    /* 用边框画箭头，保证垂直居中。 */
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 8px;
    border-top: 4px solid currentColor;
    border-right: 4px solid currentColor;
    border-radius: 1px;
    transform: translate(-62%, -50%) rotate(45deg);
}

.home-hero-btn:hover {
    /* 悬停只变亮，不位移。 */
    filter: brightness(1.08);
    box-shadow: 0 0 30px rgba(255, 255, 255, .34);
}

.slider-arrow {
    /* banner 左右切换箭头。 */
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 64px;
    height: 64px;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    color: #fff;
    font-size: 0;
    line-height: 1;
    background: rgba(34, 12, 82, .45);
    box-shadow: 0 0 22px rgba(159, 84, 255, .66);
    transform: translateY(-50%);
}

.slider-arrow::before {
    /* 用边框绘制轮播箭头，避免字符偏心。 */
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    border-top: 5px solid #fff;
    border-right: 5px solid #fff;
    border-radius: 2px;
}

.slider-arrow.left { left: 28px; }
.slider-arrow.right { right: 28px; }
.slider-arrow.left::before { transform: translate(-35%, -50%) rotate(-135deg); }
.slider-arrow.right::before { transform: translate(-65%, -50%) rotate(45deg); }

.slider-dots {
    /* banner 圆点分页。 */
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 4;
    display: flex;
    gap: 8px;
    transform: translateX(-50%);
}

.dot {
    /* 普通轮播圆点。 */
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .48);
    transition: width .25s ease, background .25s ease, box-shadow .25s ease;
}

.dot.active {
    /* 当前轮播圆点。 */
    width: 30px;
    background: #fff;
    box-shadow: 0 0 16px rgba(255, 255, 255, .82);
}

.category-grid {
    /* 四个素材分类入口。 */
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.category-card {
    /* 分类卡片基础样式。 */
    position: relative;
    /* 隐藏装饰圆和 hover 发光的溢出部分。 */
    overflow: hidden;
    /* 卡片最小高度统一。 */
    min-height: 154px;
    /* 内边距统一。 */
    padding: 28px;
    /* 图标和文字横向排列。 */
    display: flex;
    /* 垂直居中图标和文案。 */
    align-items: center;
    /* 图标和文案之间的距离。 */
    gap: 24px;
    /* 卡片圆角。 */
    border-radius: 16px;
    /* 默认透明描边，悬停时再显现，避免默认描边。 */
    border: 1px solid transparent;
    /* 卡片文字默认白色。 */
    color: #fff;
    /* 默认位置归零，hover 时用 transform 做动画。 */
    transform: translateY(0);
    /* 过渡属性只控制视觉动画。 */
    transition: transform .24s ease, filter .24s ease, border-color .24s ease, box-shadow .24s ease;
}

.category-card::after {
    /* 分类卡片右下角装饰圆。 */
    content: "";
    /* 绝对定位到卡片右下角。 */
    position: absolute;
    /* 向右溢出，让圆只露出一部分。 */
    right: -34px;
    /* 向下溢出，让圆只露出一部分。 */
    bottom: -48px;
    /* 装饰圆宽度。 */
    width: 150px;
    /* 装饰圆高度与宽度一致，避免压扁。 */
    height: 150px;
    /* 圆形。 */
    border-radius: 50%;
    /* 半透明白色装饰。 */
    background: rgba(255, 255, 255, .12);
    /* hover 时圆形轻微放大。 */
    transform: scale(1);
    /* 装饰圆动画。 */
    transition: transform .24s ease, background .24s ease;
}

.category-card:hover {
    /* 悬停时卡片轻微上浮，恢复之前的入口动画。 */
    transform: translateY(-8px);
    /* 悬停时颜色更亮。 */
    filter: saturate(1.16) brightness(1.06);
    /* 悬停时才出现浅色描边。 */
    border-color: rgba(255, 255, 255, .5);
    /* 悬停时出现柔和发光。 */
    box-shadow: 0 16px 34px rgba(0, 0, 0, .28), 0 0 24px rgba(255, 255, 255, .18);
}

.category-card:hover::after {
    /* 悬停时装饰圆放大，增强动效但不改变布局。 */
    transform: scale(1.18) translate(-8px, -6px);
    /* 悬停时装饰圆略微提亮。 */
    background: rgba(255, 255, 255, .18);
}

.category-card:hover .category-icon {
    /* 悬停时图标轻微放大并旋转，默认状态不描边。 */
    transform: scale(1.06) rotate(-3deg);
    /* 悬停时才给图标加描边和发光。 */
    box-shadow: inset 0 0 0 4px currentColor, 0 0 18px currentColor;
}
.category-card.blue:hover .category-icon.ps {
    /* Photoshop 卡片悬停时使用更亮的蓝色描边和发光。 */
    color: #69e8ff;
    /* 悬停才显示图标描边和发光。 */
    box-shadow: inset 0 0 0 4px #69e8ff, 0 0 24px rgba(0, 216, 255, .82), 0 0 42px rgba(0, 120, 255, .45);
}

.category-card.orange:hover .category-icon.ai {
    /* Illustrator 卡片悬停时提高橙色描边亮度，避免在橙色背景上看不清。 */
    color: #ffd05a;
    /* 悬停才显示更亮的橙黄描边和双层发光。 */
    box-shadow: inset 0 0 0 4px #ffd05a, 0 0 28px rgba(255, 211, 76, .95), 0 0 48px rgba(255, 91, 30, .78);
}

.category-card.purple:hover .category-icon.c4d {
    /* C4D 卡片悬停时使用更亮的紫白描边。 */
    color: #f4e8ff;
    /* 悬停才显示图标描边和发光。 */
    box-shadow: inset 0 0 0 4px #f4e8ff, 0 0 24px rgba(181, 108, 255, .82), 0 0 42px rgba(135, 66, 255, .48);
}

.category-card.green:hover .category-icon.print {
    /* 3D 打印卡片悬停时使用更亮的青绿色描边。 */
    color: #4dffe1;
    /* 悬停才显示图标描边和发光。 */
    box-shadow: inset 0 0 0 4px #4dffe1, 0 0 24px rgba(0, 240, 200, .82), 0 0 42px rgba(0, 168, 137, .48);
}
.category-card.blue { background: linear-gradient(135deg, #006dff, #2f66f2); }
.category-card.orange { background: linear-gradient(135deg, #ff9300, #f06c00); }
.category-card.purple { background: linear-gradient(135deg, #962cff, #6c42d8); }
.category-card.green { background: linear-gradient(135deg, #00a889, #168f81); }

.category-icon {
    /* 分类卡片大图标。 */
    width: 92px;
    /* 高度等于宽度，保证图标框是正方形。 */
    height: 92px;
    /* 在 flex 布局中锁死图标宽度，避免被文字挤压。 */
    flex: 0 0 92px;
    /* 使用网格居中图标文字。 */
    display: grid;
    /* 水平和垂直居中。 */
    place-items: center;
    /* 卡片图标圆角。 */
    border-radius: 14px;
    /* 默认字号。 */
    font-size: 42px;
    /* 图标字重。 */
    font-weight: 950;
    /* 固定行高，避免文字上下偏移。 */
    line-height: 1;
    /* 禁止 C4D 换行。 */
    white-space: nowrap;
    /* 隐藏文字或发光溢出，避免 C4D 出框。 */
    overflow: hidden;
    /* 默认不加描边，悬停时再显示描边发光。 */
    box-shadow: none;
    /* 深色底提高图标对比度。 */
    background: rgba(0, 0, 0, .38);
    /* 图标 hover 动画。 */
    transition: transform .24s ease, box-shadow .24s ease, color .24s ease;
}

.category-icon.ps { color: #00c8ff; }
.category-icon.ai { color: #ff9300; }
.category-icon.c4d { color: #e4d7ff; font-size: 30px; letter-spacing: -2px; }
.category-icon.print { color: #00f0c8; font-size: 36px; }

.category-text {
    /* 分类文字放在装饰层上方。 */
    position: relative;
    z-index: 1;
}

.category-text h2 { margin: 0 0 8px; font-size: 30px; font-weight: 950; }
.category-text p { margin: 0 0 16px; color: rgba(255, 255, 255, .76); font-size: 16px; }

.category-text a {
    /* 分类立即查看按钮。 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, .76);
    border-radius: 999px;
    font-weight: 900;
    transition: box-shadow .2s ease, background .2s ease;
}

.category-text a:hover {
    /* 悬停时按钮不移动，只变亮。 */
    background: rgba(255, 255, 255, .14);
    box-shadow: 0 0 16px rgba(255, 255, 255, .28);
}

.recommend-section { margin-top: 26px; }

.section-heading,
.heading-left {
    /* 热门推荐标题栏。 */
    display: flex;
    align-items: center;
}

.section-heading { justify-content: space-between; margin-bottom: 14px; }
.heading-left { gap: 12px; }
.fire { font-size: 28px; }
.section-heading h2 { margin: 0; font-size: 28px; font-weight: 950; }
.section-heading p { margin: 0; color: rgba(255, 255, 255, .48); }

.card-grid {
    /* 首页推荐素材六列网格。 */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 18px;
}

.resource-card {
    /* 推荐素材卡片。 */
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(155, 66, 255, .38);
    border-radius: 12px;
    background: rgba(4, 10, 30, .92);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.resource-card:hover { transform: translateY(-4px); border-color: rgba(0, 216, 255, .72); box-shadow: 0 0 22px rgba(0, 216, 255, .22); }
.resource-card.hidden { display: none; }

.thumb {
    /* 纯色缩略图占位。 */
    position: relative;
    height: 168px;
    overflow: hidden;
}

.thumb::after {
    /* 缩略图右下角装饰圆。 */
    content: "";
    position: absolute;
    right: 24px;
    bottom: 18px;
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
}

.thumb.pink { background: linear-gradient(135deg, #ef55b8, #b52dff); }
.thumb.blue { background: linear-gradient(135deg, #0d7cff, #08c7ef); }
.thumb.violet { background: linear-gradient(135deg, #8036e7, #ff7b3d); }
.thumb.cyan { background: linear-gradient(135deg, #26c8e5, #54e0bd); }
.thumb.mint { background: linear-gradient(135deg, #c3f0ef, #84a5ff); }
.thumb.orange { background: linear-gradient(135deg, #ef6b3d, #2637f0); }

.card-info { padding: 14px 16px 16px; }
.card-info h3 { margin: 0 0 14px; font-size: 16px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-info p { margin: 0; display: flex; justify-content: space-between; color: rgba(255, 255, 255, .52); }

.tag {
    /* 素材类型标签。 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 900;
}

.tag.ps { background: #087cff; }
.tag.ai { background: #ff8500; }
.tag.c4d { background: #8036ff; }
.tag.print { background: #00b994; }

.resource-card[data-material-id]::before {
    /* 固定素材编号提示，编号来自 HTML 的 data-material-id。 */
    content: "素材编号：" attr(data-material-id);
    position: absolute;
    left: 12px;
    top: 12px;
    z-index: 5;
    padding: 7px 11px;
    border: 1px solid rgba(255, 66, 246, .72);
    border-radius: 999px;
    color: #ffb7ff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
    background: rgba(4, 8, 28, .9);
    box-shadow: 0 0 18px rgba(255, 66, 246, .3);
    opacity: 0;
    pointer-events: none;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease;
}

.resource-card[data-material-id]:hover::before { opacity: 1; transform: translateY(0); }

.float-tools {
    /* 右侧联系作者和回到顶部工具，布局和四个素材分页保持一致。 */
    --tool-icon-size: 46px;
    position: fixed;
    right: 20px;
    top: 36%;
    z-index: 12;
    display: grid;
    justify-items: end;
    gap: 22px;
}

.contact-card,
.back-top {
    /* 两个右侧按钮大小、文字和底色与四个素材分页保持一致。 */
    width: 76px;
    min-height: 86px;
    padding: 8px 7px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid rgba(0, 168, 255, .65);
    border-radius: 18px;
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    background: rgba(7, 10, 42, .92);
    box-shadow: 0 0 24px rgba(0, 168, 255, .38);
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.contact-card:hover,
.back-top:hover {
    /* 悬停只改变描边和发光，不产生位移。 */
    transform: none;
    border-color: #00a8ff;
    box-shadow: 0 0 24px rgba(0, 168, 255, .26);
}

.back-top {
    /* 回到顶部按钮使用紫色描边，和素材分页一致。 */
    border-color: rgba(149, 65, 255, .78);
}

.wechat-icon {
    /* 微信图标圆形底、大小、内边距和四个素材分页保持一致。 */
    width: var(--tool-icon-size);
    height: var(--tool-icon-size);
    display: block;
    object-fit: contain;
    padding: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #19d36b, #00b65f);
    box-shadow: 0 0 16px rgba(25, 211, 107, .55);
}

.contact-label,
.back-top span:last-child {
    /* 右侧按钮文字大小和行高与素材分页一致。 */
    font-size: 14px;
    line-height: 1.1;
}

.qr-panel {
    /* 二维码悬停面板，位置和四个素材分页保持一致。 */
    position: absolute;
    right: calc(100% + 14px);
    top: 50%;
    width: 170px;
    padding: 14px 12px;
    border: 1px solid rgba(0, 168, 255, .65);
    border-radius: 16px;
    background: rgba(7, 10, 42, .96);
    box-shadow: 0 0 24px rgba(0, 168, 255, .42);
    opacity: 0;
    pointer-events: none;
    text-align: center;
    transform: translate(8px, -50%);
    transition: opacity .2s ease, transform .2s ease;
}

.contact-card:hover .qr-panel,
.contact-card:focus-within .qr-panel {
    /* 联系作者悬停或聚焦时，二维码面板按分页同款动画滑入。 */
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%);
}

.qr-code {
    /* 二维码图片尺寸和四个素材分页保持一致。 */
    width: 112px;
    height: 112px;
    display: block;
    margin: 10px auto 8px;
    object-fit: contain;
    border: 8px solid #fff;
    background: #fff;
}

.qr-panel p {
    /* 二维码提示文字和素材分页一致。 */
    margin: 0;
    color: rgba(255, 255, 255, .66);
    font-size: 12px;
    text-align: center;
}

.contact-card:hover .wechat-icon {
    /* 悬停联系作者时强化微信图标发光，和分页右侧工具一致。 */
    filter: drop-shadow(0 0 14px rgba(35, 245, 139, .72));
}

.back-top:hover .back-icon {
    /* 悬停回到顶部时保持蓝紫渐变图标发光。 */
    background: linear-gradient(145deg, #9a80ff 0%, #23e0ff 100%);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, .22), 0 0 22px rgba(35, 224, 255, .7);
}

.back-icon {
    /* 回到顶部圆形箭头图标。 */
    position: relative;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #8a70ff 0%, #24d7ff 100%);
    box-shadow: inset 0 0 12px rgba(255, 255, 255, .22), 0 0 22px rgba(35, 224, 255, .55);
}

.back-icon::before {
    /* 绘制回到顶部箭头竖线。 */
    content: "";
    position: absolute;
    left: 50%;
    top: 14px;
    width: 4px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    transform: translateX(-50%);
}

.back-icon::after {
    /* 绘制回到顶部箭头尖角。 */
    content: "";
    position: absolute;
    left: 50%;
    top: 10px;
    width: 14px;
    height: 14px;
    border-left: 4px solid #fff;
    border-top: 4px solid #fff;
    transform: translateX(-50%) rotate(45deg);
}
.site-footer {
    /* 首页页尾信息栏，宽度、网格和素材分页保持一致。 */
    width: min(1720px, calc(100% - 56px));
    margin: 18px auto 0;
    padding: 28px 38px 18px;
    display: grid;
    grid-template-columns: 1.8fr 1.1fr 1.2fr 1.1fr 1.2fr 1.8fr;
    gap: 28px;
    border: 1px solid rgba(255, 66, 246, .28);
    border-radius: 26px 26px 0 0;
    background: linear-gradient(180deg, rgba(12, 10, 42, .94), rgba(4, 8, 30, .96));
    box-shadow: 0 0 26px rgba(36, 215, 255, .16);
}

.footer-brand h2 {
    /* 首页页尾品牌标题使用顶部 Logo 同款渐变。 */
    margin: 0 0 14px;
    font-size: 28px;
    background: linear-gradient(90deg, #ff42f6, #24d7ff);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.footer-brand p {
    margin: 0;
    color: rgba(255, 255, 255, .58);
    line-height: 1.8;
}

.footer-contact p {
    margin: 8px 0;
    color: rgba(255, 255, 255, .62);
    line-height: normal;
}
.footer-col h3,
.footer-contact h3 { margin: 0 0 10px; font-size: 18px; }
.footer-col a { display: block; margin: 8px 0; color: rgba(255, 255, 255, .55); transition: color .2s ease, transform .2s ease; }
.footer-col a:hover { color: #ff42f6; transform: translateX(6px); }

.footer-art {
    /* DESIGN 装饰色块，尺寸和素材分页保持一致。 */
    min-height: 116px;
    display: grid;
    place-items: center;
    border-radius: 18px;
    color: #fff;
    font-size: 42px;
    font-weight: 950;
    background: linear-gradient(135deg, #ff2ebd, #00d7ff);
    box-shadow: 0 0 26px rgba(255, 46, 189, .32);
}

.copyright {
    /* 版权和备案信息。 */
    grid-column: 1 / -1;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .46);
    text-align: center;
}

.copyright a { color: inherit; cursor: pointer; transition: color .2s ease; }
.copyright a:hover { color: #ff42f6; }

@media (max-width: 1400px) {
    /* 中等屏幕下缩小导航间距和推荐网格列数。 */
    .main-nav { gap: 26px; }
    .card-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1280px) {
    /* 平板宽度布局调整。 */
    .site-header { flex-wrap: wrap; padding-block: 16px; }
    .main-nav { order: 3; flex-basis: 100%; flex-wrap: wrap; }
    .search-box { width: 260px; }
    .category-grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
    /* 手机宽度布局调整。 */
    .site-header,
    .layout,
    .site-footer { width: calc(100% - 24px); }
    .logo { font-size: 26px; }
    .search-box { width: 100%; }
    .home-hero-copy { left: 22px; width: 75%; gap: 10px; }
    .home-hero-icon { width: 50px; height: 50px; flex-basis: 50px; font-size: 22px; border-width: 2px; }
    .home-hero-main { font-size: 34px; }
    .home-hero-text h2 { font-size: 24px; }
    .home-hero-text p:last-of-type { white-space: normal; }
    .category-grid,
    .card-grid { grid-template-columns: 1fr; }
    .category-card { padding: 22px; }
    .float-tools { right: 10px; }
}