/* docs/style.css - 动漫风格主题 */

/* --- CSS 变量 (动漫风格柔和配色) --- */
:root {
    /* 主要配色: 柔和蓝色和粉色点缀 */
    --primary-color: #7aa2f7; /* 柔和蓝色 */
    --primary-hover: #9abdfa;
    --accent-color: #f77daa;   /* 柔和粉色 */
    --accent-hover: #ff9fbc;

    /* 辅助颜色 */
    --secondary-color: #9aa5ce; /* 淡紫灰色用于文本 */
    --background-color: #f2f4ff; /* 非常浅的蓝/紫色调 */
    --surface-color: #ffffff;   /* 白色用于卡片/页头 */
    --text-color: #414868;      /* 深蓝/灰色 */
    --heading-color: #2e3a59;   /* 更深的蓝/灰色 */
    --border-color: #e0e0ff;    /* 浅紫色边框 */

    /* 渐变和阴影 */
    --gradient-start: #a7c7e7; /* 浅蓝色 */
    --gradient-end: #e0d6ff;   /* 浅紫色 */
    --card-shadow: 0 5px 15px rgba(122, 162, 247, 0.1); /* 更柔和的蓝色阴影 */
    --card-hover-shadow: 0 8px 25px rgba(122, 162, 247, 0.18);
    --button-shadow: 0 4px 10px rgba(122, 162, 247, 0.2);
    --button-hover-shadow: 0 6px 15px rgba(122, 162, 247, 0.3);

    /* 排版和布局 */
    --font-family: 'Poppins', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --border-radius-base: 10px;  /* 更圆润 */
    --border-radius-large: 16px; /* 更加圆润 */
    --border-radius-pill: 50px;
}

/* --- 全局样式和重置 --- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-family);
    line-height: 1.7;
    color: var(--text-color);
    background-color: var(--background-color);
    overflow-x: hidden;
    font-weight: 400;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
    box-sizing: border-box;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--heading-color);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.75rem;
    letter-spacing: -0.02em; /* 稍微紧凑的字间距 */
}

h2:hover, h3:hover, h4:hover, h5:hover, h6:hover {
    color: var(--primary-color);
    transform: scale(1.01);
    text-shadow: 0 0 8px rgba(122, 162, 247, 0.2);
}

a {
    color: var(--accent-color); /* 链接使用粉色 */
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-hover);
    text-decoration: none; /* 全局移除下划线，获得更整洁的外观 */
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* --- 页头/导航 --- */
.main-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(242, 244, 255, 0.7); /* 使用 --background-color 的 RGB 近似值 */
    border-bottom: 1px solid rgba(224, 224, 255, 0.15); /* 使用 --border-color 的 RGB 近似值 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    padding: 1rem 0;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

.main-header:hover {
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 20px rgba(122, 162, 247, 0.12);
}

.main-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px; /* 确保左右内边距一致 */
}

.logo {
    font-size: 1.9rem; /* 增加logo大小 */
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.6rem; /* 增加logo图标和文字的间距 */
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.logo-img {
    height: 3.4rem; /* 增加logo图标大小 */
    width: auto;
    margin-right: 0.1rem;
    vertical-align: middle;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 5px rgba(122, 162, 247, 0.3)); /* 添加微妙的阴影 */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
}

/* 添加Logo图标的悬停动画 */
@keyframes logoWiggle {
    0% { transform: scale(1); }
    15% { transform: scale(1.05, 0.95); }
    30% { transform: scale(0.92, 1.08); }
    45% { transform: scale(1.06, 0.94); }
    60% { transform: scale(0.95, 1.03); }
    75% { transform: scale(1.02, 0.98); }
    100% { transform: scale(1); }
}

/* Logo整体悬停效果 */
.logo:hover .logo-img {
    animation: jelly 0.7s ease;
    transform-origin: center;
}

/* 只有图标悬停的效果 */
.logo-img:hover {
    animation: jelly 0.7s ease;
    transform-origin: center;
}

/* 导航样式 */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2rem; /* 增加导航项间距 */
}

.nav-links a {
    color: var(--text-color);
    font-weight: 500; /* 增加字重 */
    text-decoration: none;
    position: relative;
    padding-bottom: 0.3rem;
    transition: color 0.3s ease;
    display: inline-block;
    font-size: 1.05rem; /* 增加导航文字大小 */
}

.nav-links a:hover {
    color: var(--primary-color); /* 导航链接悬停时为蓝色 */
    animation: jelly 0.6s ease;
}

.nav-links a::after { /* 下划线动画 */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--accent-color); /* 粉色下划线 */
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
    border-radius: 1px;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 60%; /* 较小的下划线，更可爱的感觉 */
}

/* 操作按钮容器 */
.action-buttons {
    display: flex;
    gap: 1rem;
    margin-left: 1rem;
}

.nav-button {
    background-color: var(--primary-color);
    color: white !important;
    padding: 0.6rem 1.5rem; /* 增加内边距 */
    border-radius: var(--border-radius-pill);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--button-shadow);
    font-weight: 600;
    font-size: 1rem; /* 增加字体大小 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-button i {
    margin-right: 0.7rem; /* 增加图标和文字的间距 */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
    display: inline-block;
    font-size: 1.1em; /* 增加图标大小，相对于按钮文字 */
}

.nav-button:hover {
    background-color: var(--primary-hover);
    color: white !important;
    text-decoration: none;
    box-shadow: var(--button-hover-shadow);
    animation: jelly 0.6s ease;
    transform: translateY(-3px);
}

.nav-button::after {
    display: none;
}

/* 下载按钮样式 */
.download-btn {
    background: linear-gradient(45deg, var(--primary-color), #96b6ff) !important;
}

.download-btn:hover {
    background: linear-gradient(45deg, #96b6ff, var(--primary-color)) !important;
}

/* 支持项目按钮样式 */
.support-btn {
    background: linear-gradient(45deg, var(--accent-color), #f799b8) !important;
    box-shadow: 0 4px 15px rgba(247, 125, 170, 0.3) !important;
}

.support-btn:hover {
    background: linear-gradient(45deg, #f799b8, var(--accent-color)) !important;
    box-shadow: 0 6px 20px rgba(247, 125, 170, 0.4) !important;
}

.support-btn i {
    /* animation: coffeeSteam 2s infinite; Removed default animation */
    display: inline-block; /* Needed for transform */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Added transition for smoother hover effect */
    opacity: 0.8; /* Slightly faded when not animating */
    transform-origin: bottom center;
}

/* Add hover state animation */
.support-btn:hover i {
    animation: coffeeSteam 1.5s ease-in-out infinite alternate;
}

@keyframes coffeeSteam {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    50% { transform: translateY(-3px) rotate(-5deg); opacity: 1; }
    100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
}

/* 响应式导航 */
@media (max-width: 768px) {
    .nav-links {
        gap: 1rem;
    }
    
    .action-buttons {
        margin-left: 0;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .nav-button {
        padding: 0.5rem 1.2rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 600px) {
    .main-header .container {
        flex-direction: column;
        padding: 1rem 0;
    }
    
    .logo {
        margin-bottom: 1rem;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .action-buttons {
        margin-top: 0.5rem;
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }
    
    .nav-button {
        padding: 0.5rem 1rem;
    }
}

/* --- 英雄区域 --- */
.hero {
    padding: 4rem 0 5rem; /* 减少顶部和底部内边距，从原来的6rem 0 7rem */
    background-image: linear-gradient(145deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    position: relative;
    overflow: hidden;
}

.hero-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5rem; /* 从3rem增加到5rem，增加组件之间的间距 */
    position: relative;
    z-index: 2;
    padding: 1rem 0;
}

.hero-text {
    flex: 1 1 60%; /* 从55%增加到60%，让文本区域占据更多空间 */
    max-width: 540px;
}

.hero-title {
    font-size: 3.8rem;
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: var(--heading-color);
    line-height: 1.15;
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
    letter-spacing: -0.03em; /* 更紧凑的字间距 */
}

/* 3D旋转文字效果 */
@keyframes rotate3D {
    0% {
        transform: perspective(500px) rotateX(0) rotateY(0);
    }
    25% {
        transform: perspective(500px) rotateX(5deg) rotateY(-5deg);
    }
    50% {
        transform: perspective(500px) rotateX(0) rotateY(0);
    }
    75% {
        transform: perspective(500px) rotateX(-5deg) rotateY(5deg);
    }
    100% {
        transform: perspective(500px) rotateX(0) rotateY(0);
    }
}

.hero-title:hover {
    color: transparent;
    background-image: linear-gradient(
        90deg,
        var(--primary-color) 0%,
        var(--accent-color) 30%,
        var(--primary-color) 60%,
        var(--accent-color) 100%
    );
    background-size: 200% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    transform-style: preserve-3d;
    animation: rotate3D 4s ease-in-out infinite, textShimmer 3s linear infinite;
    text-shadow: none;
}

/* 光芒四射效果 */
@keyframes glowing {
    0%, 100% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
                    0 0 20px var(--primary-color),
                    0 0 30px var(--primary-color),
                    0 0 40px var(--primary-color),
                    0 0 50px var(--primary-color),
                    0 0 60px var(--primary-color);
    }
    50% {
        text-shadow: 0 0 20px rgba(255, 255, 255, 1),
                    0 0 30px var(--accent-color),
                    0 0 40px var(--accent-color),
                    0 0 50px var(--accent-color),
                    0 0 60px var(--accent-color),
                    0 0 70px var(--accent-color);
    }
}

/* 修改section-title的悬停效果为光芒四射 */
.section-title:hover {
    color: white;
    text-shadow: none;
    animation: glowing 2s ease-in-out infinite, jelly 0.6s ease;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

/* 为特性卡片标题添加新的悬停效果 */
.feature-card h3:hover {
    transform: translateZ(20px);
    color: var(--primary-color);
    animation: jelly 0.6s ease;
}

/* 为副标题添加可爱的动效 */
@keyframes cuteWiggle {
    0%, 100% { 
        transform: translateY(0) rotate(0deg) scale(1); 
        color: var(--primary-color);
    }
    25% { 
        transform: translateY(-5px) rotate(-3deg) scale(1.05); 
        color: #ff85b1; /* 浅粉色 */
    }
    50% { 
        transform: translateY(0) rotate(0deg) scale(1.1); 
        color: #a18fff; /* 浅紫色 */
    }
    75% { 
        transform: translateY(-5px) rotate(3deg) scale(1.05); 
        color: #85c7ff; /* 浅蓝色 */
    }
}

/* 为副标题添加可爱的彩色阴影 */
.hero-subtitle {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.5s ease;
    position: relative;
}

.hero-subtitle:hover {
    animation: cuteWiggle 3s ease-in-out infinite;
    text-shadow: 
        0 0 8px rgba(255, 150, 200, 0.7),
        0 0 15px rgba(161, 143, 255, 0.5);
    letter-spacing: 1px;
    transform: none;
}

/* 添加可爱的装饰元素 */
.hero-subtitle::before,
.hero-subtitle::after {
    content: '♡';
    position: absolute;
    opacity: 0;
    transition: all 0.5s ease;
    font-size: 1.2rem;
    color: var(--accent-color);
}

.hero-subtitle::before {
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
}

.hero-subtitle::after {
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}

.hero-subtitle:hover::before,
.hero-subtitle:hover::after {
    opacity: 1;
    animation: heartbeat 1s ease-in-out infinite alternate;
}

@keyframes heartbeat {
    from { transform: translateY(-50%) scale(1); }
    to { transform: translateY(-50%) scale(1.3); }
}

/* 改进描述文字基本样式 */
.hero-description {
    font-size: 1.15rem;
    color: var(--text-color);
    margin-bottom: 2.8rem;
    max-width: 520px;
    line-height: 1.8;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 12px 0;
    position: relative;
    text-align: left; /* 改为左对齐而非两端对齐 */
    letter-spacing: 0.01em; /* 微调字间距 */
}

/* 添加鼠标悬停特效底部边框 */
.hero-description::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: width 0.6s ease;
}

.hero-description:hover::after {
    width: 100%;
    box-shadow: 0 0 10px rgba(122, 162, 247, 0.5);
}

/* 描述文字的单词效果 - 增强版 */
.desc-word {
    display: inline-block;
    margin-right: 5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0.85;
    transform-origin: center bottom;
    position: relative;
    padding: 0 2px;
}

.hero-description:hover .desc-word {
    opacity: 1;
}

/* 描述文字悬停效果 - 改进波浪动画 */
@keyframes wordFloat {
    0% { 
        transform: translateY(0) rotate(0deg); 
    }
    50% { 
        transform: translateY(-10px) rotate(2deg); 
    }
    100% { 
        transform: translateY(0) rotate(0deg); 
    }
}

/* 猫咪相关词汇特殊动画 - 加入更多猫咪元素 */
@keyframes catMove {
    0% { 
        transform: translateY(0) rotate(0deg) scale(1); 
        color: var(--text-color);
    }
    30% { 
        transform: translateY(-10px) rotate(-5deg) scale(1.15); 
        color: #ffac59; /* 橙色 - 猫咪色 */
    }
    60% { 
        transform: translateY(-5px) rotate(3deg) scale(1.08); 
        color: #ffac59; 
    }
    100% { 
        transform: translateY(0) rotate(0deg) scale(1); 
        color: var(--text-color);
    }
}

.hero-description:hover .cat-word {
    animation: catMove 1.5s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(255, 172, 89, 0.5);
    font-weight: 500;
}

/* 添加一个小猫爪图标在猫咪词之前 */
.hero-description:hover .cat-word:first-child::before {
    content: '🐾 ';
    font-size: 0.9em;
    opacity: 0;
    animation: fadeIn 0.5s forwards 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 突出词汇特殊动画 - 更强调重点 */
@keyframes empPulse {
    0% { 
        transform: scale(1); 
        color: var(--text-color);
    }
    50% { 
        transform: scale(1.25); 
        color: var(--accent-color);
        text-shadow: 0 0 15px rgba(247, 125, 170, 0.7);
    }
    100% { 
        transform: scale(1); 
        color: var(--text-color);
    }
}

.hero-description:hover .emp-word {
    animation: empPulse 1s ease-in-out infinite;
    font-weight: 600;
    position: relative;
}

/* 添加闪光效果到重点词 */
.hero-description:hover .emp-word::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    animation: sparkle 2s linear infinite;
    pointer-events: none;
}

@keyframes sparkle {
    0% { opacity: 0; transform: scale(0.5); }
    5% { opacity: 0.7; }
    10% { opacity: 0; transform: scale(1.2); }
    100% { opacity: 0; }
}

.hero-visual {
    flex: 1 1 35%; /* 从40%减少到35%，减少图片区域占比 */
    position: relative;
    text-align: center;
    margin-right: -5rem; /* 从-3rem增加到-5rem，使图片向右移动更多 */
}

.hero-screenshot {
    border-radius: var(--border-radius-large); /* 更圆润的边角 */
    box-shadow: 0 15px 35px rgba(122, 162, 247, 0.2); /* 更柔和、更大的阴影 */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    border: 6px solid rgba(255, 255, 255, 0.85); /* 半透明白色边框 */
    transform: scale(1.5) perspective(1000px); /* 默认1.5倍大小，添加透视效果 */
    transform-origin: center center;
    z-index: 2;
    cursor: pointer; /* 添加指针样式表示可点击 */
    user-select: none; /* 防止拖拽选中 */
}

.hero-screenshot::before,
.hero-screenshot::after {
    content: '';
    position: absolute;
    background: white;
    z-index: 1;
    opacity: 0.4;
    transition: all 0.5s ease;
}

/* 水平丝带 */
.hero-screenshot::before {
    height: 6px;
    width: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.2);
}

/* 垂直丝带 */
.hero-screenshot::after {
    width: 6px;
    height: 120%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.2);
}

/* 添加呼吸动画效果 */
@keyframes breathe {
    0% { transform: scale(1.4) perspective(1000px) rotateY(-10deg) rotateX(3deg); }
    50% { transform: scale(1.45) perspective(1000px) rotateY(-10deg) rotateX(3deg); }
    100% { transform: scale(1.4) perspective(1000px) rotateY(-10deg) rotateX(3deg); }
}

.hero-screenshot:hover {
    transform: scale(1.45) perspective(1000px); /* 悬停时略微放大 */
    box-shadow: 20px 15px 30px rgba(122, 162, 247, 0.25);
    border-color: rgba(255, 255, 255, 1);
    animation: none;
}

.hero-screenshot:hover::before,
.hero-screenshot:hover::after {
    opacity: 0.8; /* 鼠标悬停时丝带变得更明显 */
    box-shadow: 0 0 15px 6px rgba(255, 255, 255, 0.4);
}

/* 响应式调整悬停效果 */
@media (max-width: 992px) {
    @keyframes breathe {
        0% { transform: scale(1.2) perspective(1000px) rotateY(-8deg) rotateX(2deg); }
        50% { transform: scale(1.25) perspective(1000px) rotateY(-8deg) rotateX(2deg); }
        100% { transform: scale(1.2) perspective(1000px) rotateY(-8deg) rotateX(2deg); }
    }
    
    .hero-screenshot:hover {
        transform: scale(1.25) perspective(1000px);
    }

    .hero-screenshot {
        transform: scale(1.2) perspective(1000px); /* 减小平板上的默认缩放 */
    }

    .hero-visual {
        margin-right: -2.5rem; /* 从-1.5rem增加到-2.5rem */
    }
}

@media (max-width: 768px) {
    @keyframes breathe {
        0% { transform: scale(1.0) perspective(1000px) rotateY(-5deg) rotateX(2deg); }
        50% { transform: scale(1.05) perspective(1000px) rotateY(-5deg) rotateX(2deg); }
        100% { transform: scale(1.0) perspective(1000px) rotateY(-5deg) rotateX(2deg); }
    }
    
    .hero-screenshot:hover {
        transform: scale(1.1) perspective(1000px);
        box-shadow: 10px 10px 20px rgba(122, 162, 247, 0.2);
    }

    .hero-screenshot {
        transform: scale(1.0) perspective(1000px); /* 手机上不缩放 */
        max-width: 90%; /* 限制最大宽度 */
        margin: 0 auto; /* 居中显示 */
        animation: breathe 3s infinite ease-in-out; /* 应用动画效果 */
    }

    .hero-visual {
        margin-right: 0; /* 在手机屏幕上取消负边距 */
    }
    
    .hero-screenshot::before,
    .hero-screenshot::after {
        box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.15);
    }
}

@media (max-width: 480px) {
    .hero-screenshot {
        transform: scale(0.85) perspective(1000px); /* 在更小的屏幕上缩小 */
        border-width: 4px; /* 减小边框宽度 */
        animation: breathe 3s infinite ease-in-out; /* 应用动画效果 */
    }
    
    .hero-screenshot:hover {
        transform: scale(0.9) perspective(1000px); /* 悬停时缩小放大比例 */
        max-width: 95%; /* 限制最大宽度，防止溢出 */
    }
    
    @keyframes breathe {
        0% { transform: scale(0.85) perspective(1000px) rotateY(-3deg) rotateX(1deg); }
        50% { transform: scale(0.87) perspective(1000px) rotateY(-3deg) rotateX(1deg); }
        100% { transform: scale(0.85) perspective(1000px) rotateY(-3deg) rotateX(1deg); }
    }
}

/* 号召性按钮 */
.cta-button {
    display: inline-block;
    padding: 0.9rem 2rem; /* 增加内边距 */
    border-radius: var(--border-radius-pill);
    font-size: 1.05rem; /* 增加字体大小 */
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    margin: 0.5rem 0.5rem 0.5rem 0;
    box-shadow: var(--button-shadow);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em; /* 增加字间距 */
}

.cta-button i {
    margin-right: 0.7rem; /* 增加图标和文字的间距 */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
    display: inline-block;
    font-size: 1.1em; /* 增加图标大小，相对于按钮文字 */
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease-out, height 0.5s ease-out;
    z-index: 1;
    opacity: 0;
}

.cta-button:hover::before {
    width: 300%;
    height: 300%;
    opacity: 1;
}

.cta-button > * {
    position: relative;
    z-index: 2;
}

.cta-button.primary {
    background-color: var(--accent-color); /* 粉色主要按钮 */
    color: white;
    transition: all 0.4s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cta-button.primary:hover {
    background-color: #ff5d95; /* 更亮更饱和的粉色 */
    color: white;
    box-shadow: 0 6px 20px rgba(247, 125, 170, 0.5), 0 0 15px rgba(255, 93, 149, 0.6); /* 增强的粉色阴影和发光效果 */
    transform: translateY(-3px);
    animation: jelly 0.6s ease;
}

.cta-button.primary:hover i {
    transform: scale(1.2) rotate(10deg);
    color: #fff6f9; /* 更亮的颜色强调图标 */
}

.cta-button.secondary {
    background-color: var(--surface-color); /* 白色 */
    color: var(--primary-color); /* 蓝色文本 */
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cta-button.secondary:hover {
    background-color: #eef4ff; /* 更明显的淡蓝色 */
    color: #4f7df9; /* 更亮的蓝色 */
    border-color: #b8c9ff;
    box-shadow: 0 6px 15px rgba(122, 162, 247, 0.3), 0 0 10px rgba(79, 125, 249, 0.4); /* 增强的蓝色阴影和发光效果 */
    transform: translateY(-3px);
    animation: jelly 0.6s ease;
}

.cta-button.secondary:hover i {
    transform: scale(1.2) rotate(10deg);
    color: #3a69f8; /* 更亮的蓝色强调图标 */
}

.cta-button.large {
    padding: 1.1rem 2.7rem; /* 增加大型按钮的内边距 */
    font-size: 1.2rem; /* 增加大型按钮字体大小 */
    letter-spacing: 0.03em; /* 更大的字间距 */
}

/* 可选的背景形状 */
.background-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1; /* 非常微妙 */
    background-color: var(--accent-color); /* 粉色形状 */
    animation: float 15s infinite ease-in-out alternate;
}

.shape1 {
    width: 150px; height: 150px; top: 10%; left: 5%; animation-duration: 18s;
    background-color: rgba(255, 255, 255, 0.5); /* 白色形状 */
}

.shape2 {
    width: 80px; height: 80px; bottom: 15%; right: 10%; animation-duration: 12s; animation-delay: 2s;
}

.shape3 {
    width: 120px; height: 120px; top: 40%; right: 15%; animation-duration: 20s; animation-delay: 1s;
     background-color: rgba(167, 199, 231, 0.3); /* 浅蓝色形状 */
}

@keyframes float {
    0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    100% { transform: translateY(-20px) translateX(15px) rotate(20deg); }
}

/* --- 特性区域 --- */
.features {
    padding: 7rem 0; /* 增加垂直空间 */
    background-color: var(--surface-color);
    position: relative;
}

.section-title {
    text-align: center;
    font-size: 2.7rem; /* 增加大小 */
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: var(--heading-color);
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
    letter-spacing: -0.02em; /* 微调字间距 */
}

.section-title:hover {
    color: white;
    text-shadow: none;
    animation: glowing 2s ease-in-out infinite, jelly 0.6s ease;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem; /* 增加大小 */
    color: var(--secondary-color);
    margin-bottom: 4.8rem; /* 增加与内容的距离 */
    max-width: 650px; /* 增加宽度 */
    margin-left: auto;
    margin-right: auto;
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    line-height: 1.6; /* 优化行高 */
}

.section-subtitle:hover {
    color: var(--accent-color);
    transform: translateY(-2px);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 稍微增加卡片宽度 */
    gap: 2.8rem; /* 增加卡片间距 */
    margin-top: 2rem; /* 增加与标题的距离 */
}

.feature-card {
    background-color: #f8faff;
    padding: 2.8rem 2.2rem; /* 增加内边距 */
    border-radius: var(--border-radius-large);
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-10px); /* 更多提升 */
    box-shadow: var(--card-hover-shadow);
    border-color: rgba(122, 162, 247, 0.2);
    animation: jelly 0.7s ease;
}

.feature-icon {
    font-size: 2.8rem; /* 更大的图标 */
    color: var(--primary-color); /* 蓝色图标 */
    margin-bottom: 1.5rem;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    /* 可选的背景圆圈
    background-color: rgba(122, 162, 247, 0.1);
    width: 80px; height: 80px; line-height: 80px; border-radius: 50%;
    */
    transform-origin: center center;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1); 
}

/* 特性图标夸张动画效果 */
@keyframes ghostBounce {
    0%, 100% { transform: translateY(0) scale(1.1); filter: drop-shadow(0 0 5px rgba(146, 129, 236, 0.3)); }
    40% { transform: translateY(-25px) scale(1.5) rotate(15deg); filter: drop-shadow(0 0 15px rgba(146, 129, 236, 0.7)); }
    60% { transform: translateY(-25px) scale(1.5) rotate(-15deg); filter: drop-shadow(0 0 15px rgba(146, 129, 236, 0.7)); }
    80% { transform: translateY(-12px) scale(1.3); filter: drop-shadow(0 0 10px rgba(146, 129, 236, 0.5)); }
}

/* 修改沙漏图标的动画 */
@keyframes hourglassFlip {
    0% { transform: rotate(0deg) scale(1.1); filter: drop-shadow(0 0 5px rgba(247, 175, 62, 0.3)); }
    10% { transform: rotate(0deg) scale(1.5) translateY(-5px); filter: drop-shadow(0 0 12px rgba(247, 175, 62, 0.6)); }
    30% { transform: rotate(180deg) scale(1.8) translateY(10px); filter: drop-shadow(0 0 15px rgba(247, 175, 62, 0.8)); }
    50% { transform: rotate(180deg) scale(1.5) translateY(-5px); filter: drop-shadow(0 0 12px rgba(247, 175, 62, 0.6)); }
    70% { transform: rotate(360deg) scale(1.8) translateY(10px); filter: drop-shadow(0 0 15px rgba(247, 175, 62, 0.8)); }
    90% { transform: rotate(360deg) scale(1.5) translateY(-5px); filter: drop-shadow(0 0 12px rgba(247, 175, 62, 0.6)); }
    100% { transform: rotate(360deg) scale(1.1); filter: drop-shadow(0 0 5px rgba(247, 175, 62, 0.3)); }
}

@keyframes stopwatchSpin {
    0% { transform: rotate(0deg) scale(1.1); filter: drop-shadow(0 0 5px rgba(122, 162, 247, 0.3)); }
    40% { transform: rotate(180deg) scale(1.4); filter: drop-shadow(0 0 15px rgba(122, 162, 247, 0.7)); }
    80% { transform: rotate(320deg) scale(1.2); filter: drop-shadow(0 0 10px rgba(122, 162, 247, 0.5)); }
    100% { transform: rotate(360deg) scale(1.1); filter: drop-shadow(0 0 5px rgba(122, 162, 247, 0.3)); }
}

@keyframes magicSparkle {
    0% { transform: scale(1.1); filter: brightness(1) drop-shadow(0 0 5px rgba(247, 125, 170, 0.3)); }
    25% { transform: scale(1.8) rotate(20deg); filter: brightness(1.5) drop-shadow(0 0 15px rgba(247, 125, 170, 0.8)); }
    50% { transform: scale(1.5) rotate(-20deg); filter: brightness(1.3) drop-shadow(0 0 10px rgba(247, 125, 170, 0.6)); }
    75% { transform: scale(1.7) rotate(15deg); filter: brightness(1.5) drop-shadow(0 0 15px rgba(247, 125, 170, 0.8)); }
    100% { transform: scale(1.1); filter: brightness(1) drop-shadow(0 0 5px rgba(247, 125, 170, 0.3)); }
}

@keyframes bellShake {
    0%, 100% { transform: scale(1.1); filter: drop-shadow(0 0 5px rgba(255, 212, 59, 0.3)); }
    20% { transform: scale(1.6) rotate(35deg) translateY(-10px); filter: drop-shadow(0 0 15px rgba(255, 212, 59, 0.7)); }
    40% { transform: scale(1.4) rotate(-30deg) translateY(5px); filter: drop-shadow(0 0 12px rgba(255, 212, 59, 0.5)); }
    60% { transform: scale(1.6) rotate(25deg) translateY(-10px); filter: drop-shadow(0 0 15px rgba(255, 212, 59, 0.7)); }
    80% { transform: scale(1.4) rotate(-20deg) translateY(5px); filter: drop-shadow(0 0 12px rgba(255, 212, 59, 0.5)); }
}

@keyframes featherFloat {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1.1); filter: drop-shadow(0 0 5px rgba(120, 227, 167, 0.3)); }
    25% { transform: translateY(-25px) rotate(20deg) scale(1.6); filter: drop-shadow(0 0 15px rgba(120, 227, 167, 0.7)); }
    50% { transform: translateY(-35px) rotate(-15deg) scale(1.8); filter: drop-shadow(0 0 18px rgba(120, 227, 167, 0.8)); }
    75% { transform: translateY(-25px) rotate(15deg) scale(1.6); filter: drop-shadow(0 0 15px rgba(120, 227, 167, 0.7)); }
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1.1); color: var(--accent-color); filter: drop-shadow(0 0 5px rgba(255, 51, 102, 0.3)); }
    25% { transform: scale(1.9); color: #ff3366; filter: drop-shadow(0 0 15px rgba(255, 51, 102, 0.7)); }
    50% { transform: scale(1.1); color: var(--primary-color); filter: drop-shadow(0 0 5px rgba(122, 162, 247, 0.3)); }
    75% { transform: scale(1.7); color: #ff3366; filter: drop-shadow(0 0 15px rgba(255, 51, 102, 0.7)); }
}

/* 添加粒子效果和额外视觉效果的新动画 */
@keyframes ghostParticles {
    0%, 100% { box-shadow: 0 0 0 0 rgba(146, 129, 236, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(146, 129, 236, 0.2); }
}

@keyframes hourglassSand {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247, 175, 62, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(247, 175, 62, 0.2); }
}

@keyframes magicStars {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247, 125, 170, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(247, 125, 170, 0.2); }
}

@keyframes bellRing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 59, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(255, 212, 59, 0.2); }
}

@keyframes featherWind {
    0%, 100% { box-shadow: 0 0 0 0 rgba(120, 227, 167, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(120, 227, 167, 0.2); }
}

@keyframes heartGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(255, 51, 102, 0.2); }
}

/* 为每个特性卡片设置不同的动画和背景效果 */
.feature-card:nth-child(1):hover .feature-icon {
    animation: ghostBounce 1.8s ease infinite;
    color: #9281EC; /* 紫色幽灵色调 */
}

.feature-card:nth-child(1):hover {
    animation: jelly 0.7s ease, ghostParticles 2.5s ease-in-out infinite;
    background: radial-gradient(circle at center, rgba(146, 129, 236, 0.1) 0%, rgba(248, 250, 255, 1) 70%);
}

.feature-card:nth-child(2):hover .feature-icon {
    animation: hourglassFlip 3s ease-in-out infinite;
    color: #F7AF3E; /* 沙漏金色 */
}

.feature-card:nth-child(2):hover {
    animation: jelly 0.7s ease, hourglassSand 2.5s ease-in-out infinite;
    background: radial-gradient(circle at center, rgba(247, 175, 62, 0.1) 0%, rgba(248, 250, 255, 1) 70%);
}

.feature-card:nth-child(3):hover .feature-icon {
    animation: magicSparkle 2s ease-in-out infinite;
    color: #F77DAA; /* 魔法粉色 */
}

.feature-card:nth-child(3):hover {
    animation: jelly 0.7s ease, magicStars 2.5s ease-in-out infinite;
    background: radial-gradient(circle at center, rgba(247, 125, 170, 0.1) 0%, rgba(248, 250, 255, 1) 70%);
}

.feature-card:nth-child(4):hover .feature-icon {
    animation: bellShake 1.5s ease-in-out infinite;
    color: #FFD43B; /* 铃铛金色 */
}

.feature-card:nth-child(4):hover {
    animation: jelly 0.7s ease, bellRing 2.5s ease-in-out infinite;
    background: radial-gradient(circle at center, rgba(255, 212, 59, 0.1) 0%, rgba(248, 250, 255, 1) 70%);
}

.feature-card:nth-child(5):hover .feature-icon {
    animation: featherFloat 2.5s ease-in-out infinite;
    color: #78E3A7; /* 羽毛绿色 */
}

.feature-card:nth-child(5):hover {
    animation: jelly 0.7s ease, featherWind 2.5s ease-in-out infinite;
    background: radial-gradient(circle at center, rgba(120, 227, 167, 0.1) 0%, rgba(248, 250, 255, 1) 70%);
}

.feature-card:nth-child(6):hover .feature-icon {
    animation: heartPulse 1.8s ease-in-out infinite;
}

.feature-card:nth-child(6):hover {
    animation: jelly 0.7s ease, heartGlow 2.5s ease-in-out infinite;
    background: radial-gradient(circle at center, rgba(255, 51, 102, 0.1) 0%, rgba(248, 250, 255, 1) 70%);
}

/* 添加伪元素用于额外的粒子效果 */
.feature-card {
    position: relative;
    z-index: 1;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--border-radius-large);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.feature-card:nth-child(1):hover::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(146, 129, 236, 0.15), transparent 70%);
}

.feature-card:nth-child(2):hover::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(247, 175, 62, 0.15), transparent 70%);
}

.feature-card:nth-child(3):hover::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(247, 125, 170, 0.15), transparent 70%);
}

.feature-card:nth-child(4):hover::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(255, 212, 59, 0.15), transparent 70%);
}

.feature-card:nth-child(5):hover::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(120, 227, 167, 0.15), transparent 70%);
}

.feature-card:nth-child(6):hover::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(255, 51, 102, 0.15), transparent 70%);
}

.feature-card h3 {
    font-size: 1.4rem; /* 增加标题大小 */
    font-weight: 600;
    margin-bottom: 1rem; /* 增加与正文的距离 */
    color: var(--heading-color);
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.feature-card:hover h3 {
    transform: scale(1.1);
    text-shadow: 0 0 8px rgba(122, 162, 247, 0.2);
    animation: jelly 0.6s ease;
}

.feature-card:nth-child(1):hover h3 { color: #7d6dd8; }
.feature-card:nth-child(2):hover h3 { color: #e9a23b; }
.feature-card:nth-child(3):hover h3 { color: #e96e99; }
.feature-card:nth-child(4):hover h3 { color: #edc537; }
.feature-card:nth-child(5):hover h3 { color: #6ad096; }
.feature-card:nth-child(6):hover h3 { color: #e94f79; }

.feature-card p {
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.7;
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.feature-card:hover p {
    transform: translateY(-3px);
    color: var(--heading-color);
}

/* 文本闪烁效果 */
@keyframes textShimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.section-title:hover {
    color: white;
    text-shadow: none;
    animation: glowing 2s ease-in-out infinite, jelly 0.6s ease;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

/* 特殊悬停效果 - 波浪文本 改为跳跃效果 */
@keyframes jump {
    0%, 100% { 
        transform: translateY(0) scale(1); 
    }
    50% { 
        transform: translateY(-10px) scale(1.2); 
        color: var(--accent-color);
        text-shadow: 0 5px 15px rgba(255, 255, 255, 0.8);
    }
}

.cta-section h2:hover {
    animation: none;
    transform: none;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.cta-section h2:hover .wave-letter {
    display: inline-block;
    animation: jump 0.7s ease-in-out infinite;
}

.cta-section h2:hover .wave-letter:nth-child(2) {
    animation-delay: 0.05s;
}
.cta-section h2:hover .wave-letter:nth-child(3) {
    animation-delay: 0.1s;
}
.cta-section h2:hover .wave-letter:nth-child(4) {
    animation-delay: 0.15s;
}
.cta-section h2:hover .wave-letter:nth-child(5) {
    animation-delay: 0.2s;
}
.cta-section h2:hover .wave-letter:nth-child(6) {
    animation-delay: 0.25s;
}
.cta-section h2:hover .wave-letter:nth-child(7) {
    animation-delay: 0.3s;
}
.cta-section h2:hover .wave-letter:nth-child(8) {
    animation-delay: 0.35s;
}
.cta-section h2:hover .wave-letter:nth-child(9) {
    animation-delay: 0.4s;
}
.cta-section h2:hover .wave-letter:nth-child(10) {
    animation-delay: 0.45s;
}
.cta-section h2:hover .wave-letter:nth-child(11) {
    animation-delay: 0.5s;
}
.cta-section h2:hover .wave-letter:nth-child(12) {
    animation-delay: 0.55s;
}
.cta-section h2:hover .wave-letter:nth-child(13) {
    animation-delay: 0.6s;
}
.cta-section h2:hover .wave-letter:nth-child(14) {
    animation-delay: 0.65s;
}
.cta-section h2:hover .wave-letter:nth-child(15) {
    animation-delay: 0.7s;
}
.cta-section h2:hover .wave-letter:nth-child(16) {
    animation-delay: 0.75s;
}
.cta-section h2:hover .wave-letter:nth-child(17) {
    animation-delay: 0.8s;
}
.cta-section h2:hover .wave-letter:nth-child(18) {
    animation-delay: 0.85s;
}
.cta-section h2:hover .wave-letter:nth-child(19) {
    animation-delay: 0.9s;
}
.cta-section h2:hover .wave-letter:nth-child(20) {
    animation-delay: 0.95s;
}
.cta-section h2:hover .wave-letter:nth-child(21) {
    animation-delay: 1.0s;
}

/* 特殊文本悬停效果 */
.feature-card h3::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-card h3:hover::after {
    left: 100%;
}

/* --- GitHub 星星增长曲线 --- */
.github-stats {
    padding: 6rem 0;
    background: linear-gradient(to bottom, var(--surface-color), var(--background-color));
    position: relative;
}

.github-chart-container {
    max-width: 900px;
    margin: 2rem auto;
    background-color: white;
    border-radius: var(--border-radius-large);
    padding: 1rem;
    box-shadow: var(--card-shadow);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* 星星粒子效果 */
.github-chart-container .star-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.github-chart-container .star-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #ffcc33;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 4px 1px rgba(255, 204, 51, 0.4);
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

/* 创建多种不同颜色的星星 */
.github-chart-container .star-particle:nth-child(3n) {
    background-color: #7aa2f7;
    box-shadow: 0 0 4px 1px rgba(122, 162, 247, 0.4);
}

.github-chart-container .star-particle:nth-child(3n+1) {
    background-color: #f7a97a;
    box-shadow: 0 0 4px 1px rgba(247, 169, 122, 0.4);
}

.github-chart-container:hover .star-particles {
    opacity: 1;
}

.github-chart-container:hover .star-particle {
    animation-name: floatingStar, twinkleStar;
}

/* 为不同类型的星星设置不同的动画 */
.github-chart-container:hover .star-particle:nth-child(4n) {
    animation-name: floatingStarAlt, twinkleStar;
}

.github-chart-container:hover .star-particle:nth-child(5n) {
    animation-name: floatingStarSlow, twinkleStar;
}

@keyframes floatingStar {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-15px) translateX(5px) scale(1);
        opacity: 0.9;
    }
    50% {
        opacity: 0.6;
        transform: translateY(-50px) translateX(-5px) scale(0.8);
    }
    100% {
        transform: translateY(-100px) translateX(10px) scale(0);
        opacity: 0;
    }
}

@keyframes floatingStarAlt {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-10px) translateX(-8px) scale(1);
        opacity: 0.9;
    }
    60% {
        opacity: 0.7;
        transform: translateY(-70px) translateX(8px) scale(0.7);
    }
    100% {
        transform: translateY(-120px) translateX(-15px) scale(0);
        opacity: 0;
    }
}

@keyframes floatingStarSlow {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    15% {
        transform: translateY(-5px) translateX(3px) scale(1);
        opacity: 0.8;
    }
    70% {
        opacity: 0.5;
        transform: translateY(-40px) translateX(-3px) scale(0.9);
    }
    100% {
        transform: translateY(-80px) translateX(5px) scale(0);
        opacity: 0;
    }
}

@keyframes twinkleStar {
    0%, 100% {
        opacity: 0;
    }
    10%, 30%, 50%, 70%, 90% {
        opacity: 0.9;
    }
    20%, 40%, 60%, 80% {
        opacity: 0.5;
    }
}

/* 发光边框效果 */
.github-chart-container .glow-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--border-radius-large);
    border: 2px solid transparent;
    box-shadow: 0 0 15px rgba(122, 162, 247, 0);
    transition: all 1s ease;
    z-index: -1;
    pointer-events: none;
}

.github-chart-container:hover .glow-border {
    border-color: rgba(122, 162, 247, 0.3);
    box-shadow: 0 0 15px rgba(122, 162, 247, 0.5);
    animation: borderGlow 3s infinite alternate;
}

@keyframes borderGlow {
    0% {
        box-shadow: 0 0 15px rgba(122, 162, 247, 0.5);
    }
    50% {
        box-shadow: 0 0 25px rgba(122, 162, 247, 0.7);
    }
    100% {
        box-shadow: 0 0 15px rgba(122, 162, 247, 0.5);
    }
}

/* 星系背景效果 */
.github-chart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(122, 162, 247, 0.03) 0%, rgba(122, 162, 247, 0.03) 40%, rgba(225, 190, 231, 0.03) 100%);
    opacity: 0;
    z-index: 0;
    transition: opacity 0.8s ease;
    border-radius: var(--border-radius-large);
    background-size: 200% 200%;
}

.github-chart-container::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 50%, rgba(122, 162, 247, 0.03) 80%, rgba(122, 162, 247, 0.08) 100%);
    opacity: 0;
    transform: scale(0.5);
    z-index: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    pointer-events: none;
}

.github-chart-container:hover::before {
    opacity: 1;
    animation: galaxyBackground 15s infinite alternate;
}

.github-chart-container:hover::after {
    opacity: 0.8;
    transform: scale(1) rotate(0deg);
    animation: galaxyGlow 20s infinite linear;
}

@keyframes galaxyBackground {
    0% {
        background-position: 0% 0%;
        background-size: 150% 150%;
    }
    50% {
        background-position: 100% 100%;
        background-size: 200% 200%;
    }
    100% {
        background-position: 0% 0%;
        background-size: 150% 150%;
    }
}

@keyframes galaxyGlow {
    0% {
        transform: scale(0.8) rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(0.8) rotate(360deg);
        opacity: 0.5;
    }
}

.github-chart-container:hover {
    box-shadow: var(--card-hover-shadow), 0 0 30px rgba(122, 162, 247, 0.3);
    transform: translateY(-10px) scale(1.02);
    animation: chartPulse 3s infinite alternate;
}

.github-chart-container:hover::before {
    opacity: 1;
    animation: chartBackground 8s infinite alternate;
}

.github-chart-container:hover::after {
    opacity: 0.5;
    transform: scale(1);
    animation: chartGlow 5s infinite alternate;
}

@keyframes chartPulse {
    0% {
        transform: translateY(-10px) scale(1.02);
    }
    50% {
        transform: translateY(-8px) scale(1.03);
    }
    100% {
        transform: translateY(-10px) scale(1.02);
    }
}

@keyframes chartBackground {
    0% {
        background-position: 0% 0%;
        background: linear-gradient(135deg, rgba(122, 162, 247, 0.05), rgba(225, 190, 231, 0.05));
    }
    50% {
        background-position: 100% 100%;
        background: linear-gradient(135deg, rgba(225, 190, 231, 0.08), rgba(122, 162, 247, 0.08));
    }
    100% {
        background-position: 0% 0%;
        background: linear-gradient(135deg, rgba(122, 162, 247, 0.05), rgba(225, 190, 231, 0.05));
    }
}

@keyframes chartGlow {
    0% {
        opacity: 0.3;
        transform: scale(0.8) rotate(0deg);
    }
    50% {
        opacity: 0.5;
        transform: scale(1) rotate(180deg);
    }
    100% {
        opacity: 0.3;
        transform: scale(0.8) rotate(360deg);
    }
}

.github-chart {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-base);
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.github-chart-container:hover .github-chart {
    transform: scale(1.01);
    filter: drop-shadow(0 0 8px rgba(122, 162, 247, 0.3));
}

.github-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.github-button {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.8rem;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--border-radius-pill);
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--button-shadow);
}

.github-button i {
    margin-right: 0.8rem;
    font-size: 1.2rem;
}

.github-button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-3px);
    box-shadow: var(--button-hover-shadow);
    color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .github-chart-container {
        margin: 1.5rem auto;
        padding: 0.5rem;
    }
    
    .github-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .github-button {
        width: 80%;
        justify-content: center;
    }
}


/* --- 使用场景区域 --- */
.usage-scenarios {
    padding: 6rem 0;
    background-color: var(--background-color);
    position: relative;
}

.scenarios-container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 1rem;
}

.scenario-card {
    display: flex;
    align-items: center;
    gap: 4rem; /* 增加左右内容的间距 */
    background-color: var(--surface-color);
    border-radius: var(--border-radius-large);
    padding: 2.5rem; /* 增加内边距 */
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
    margin-bottom: 1rem; /* 卡片底部间距 */
}

.scenario-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--card-hover-shadow);
}

.scenario-card.reverse {
    flex-direction: row-reverse;
}

.scenario-visual {
    flex: 1;
    min-width: 40%;
    border-radius: var(--border-radius-base);
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(122, 162, 247, 0.15);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.scenario-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-large);
    box-shadow: 0 15px 35px rgba(122, 162, 247, 0.2);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    border: 6px solid rgba(255, 255, 255, 0.85);
    transform: perspective(1000px);
    transform-origin: center center;
    z-index: 2;
    user-select: none;
}

.scenario-img::before,
.scenario-img::after {
    content: '';
    position: absolute;
    background: white;
    z-index: 1;
    opacity: 0.4;
    transition: all 0.5s ease;
}

/* 水平丝带 */
.scenario-img::before {
    height: 6px;
    width: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.2);
}

/* 垂直丝带 */
.scenario-img::after {
    width: 6px;
    height: 120%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.2);
}

.scenario-card:hover .scenario-img {
    transform: perspective(1000px);
    box-shadow: 30px 20px 40px rgba(122, 162, 247, 0.25);
    border-color: rgba(255, 255, 255, 1);
}

.scenario-card:hover .scenario-img::before,
.scenario-card:hover .scenario-img::after {
    opacity: 0.8;
    box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.4);
}

/* 添加脚本控制悬停和点击效果 */
.scenario-content {
    flex: 1;
    padding: 1rem;
}

.scenario-icon {
    width: 70px;
    height: 70px;
    background-color: rgba(122, 162, 247, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: var(--primary-color);
    transition: all 0.3s ease;
    transform-origin: center center;
    box-shadow: 0 0 15px rgba(122, 162, 247, 0.1);
}

/* 卡片悬停时图标背景变色 */
.scenario-card:hover .scenario-icon {
    background-color: var(--primary-color);
    color: white;
    /* 不应用动画 */
}

/* 使用场景图标动画效果 */
@keyframes dragonFloat {
    0%, 100% { 
        transform: scale(1.1) translateY(0) rotate(0deg); 
        filter: drop-shadow(0 0 5px rgba(122, 162, 247, 0.3)); 
    }
    25% { 
        transform: scale(1.4) translateY(-10px) rotate(15deg); 
        filter: drop-shadow(0 0 15px rgba(255, 50, 50, 0.7)) brightness(1.5); 
    }
    50% { 
        transform: scale(1.5) translateY(-5px) rotate(-10deg); 
        filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8)) brightness(1.6); 
    }
    75% { 
        transform: scale(1.4) translateY(-10px) rotate(10deg); 
        filter: drop-shadow(0 0 15px rgba(255, 50, 50, 0.7)) brightness(1.5); 
    }
}

/* 添加新的喷火效果动画 */
@keyframes dragonFireBreath {
    0%, 100% {
        transform: scale(0) translateX(0);
        opacity: 0;
    }
    15% {
        transform: scale(0.3) translateX(15px) translateY(-5px);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2) translateX(30px) translateY(-10px);
        opacity: 0.9;
    }
    70% {
        transform: scale(0.8) translateX(40px) translateY(-5px);
        opacity: 0.6;
    }
    90% {
        transform: scale(0.3) translateX(50px) translateY(0);
        opacity: 0.2;
    }
}

/* 稍微不同的第二个火焰动画 */
@keyframes dragonFireBreath2 {
    0%, 100% {
        transform: scale(0) translateX(0) translateY(0);
        opacity: 0;
    }
    10% {
        transform: scale(0.4) translateX(10px) translateY(-8px);
        opacity: 0.6;
    }
    35% {
        transform: scale(1.4) translateX(25px) translateY(-15px);
        opacity: 0.95;
    }
    65% {
        transform: scale(1.0) translateX(35px) translateY(-10px);
        opacity: 0.7;
    }
    85% {
        transform: scale(0.5) translateX(45px) translateY(-5px);
        opacity: 0.3;
    }
}

/* 第三个火焰动画变体 */
@keyframes dragonFireBreath3 {
    0%, 100% {
        transform: scale(0) translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: scale(0.6) translateX(15px) translateY(-3px) rotate(5deg);
        opacity: 0.7;
    }
    45% {
        transform: scale(1.3) translateX(28px) translateY(-8px) rotate(-5deg);
        opacity: 0.9;
    }
    75% {
        transform: scale(0.9) translateX(38px) translateY(-2px) rotate(10deg);
        opacity: 0.5;
    }
    95% {
        transform: scale(0.4) translateX(48px) translateY(5px) rotate(0deg);
        opacity: 0.1;
    }
}

@keyframes firePulse {
    0%, 100% {
        box-shadow: 0 0 10px 2px rgba(255, 50, 0, 0.7), 
                   0 0 20px 5px rgba(255, 120, 0, 0.5),
                   0 0 30px 7px rgba(255, 180, 0, 0.3);
        background: radial-gradient(circle, rgba(255, 50, 0, 0.9) 10%, rgba(255, 120, 0, 0.8) 50%, rgba(255, 180, 0, 0.4) 90%);
    }
    50% {
        box-shadow: 0 0 15px 4px rgba(255, 50, 0, 0.9), 
                   0 0 30px 8px rgba(255, 120, 0, 0.7),
                   0 0 40px 10px rgba(255, 180, 0, 0.5);
        background: radial-gradient(circle, rgba(255, 50, 0, 1) 20%, rgba(255, 120, 0, 0.9) 60%, rgba(255, 180, 0, 0.6) 90%);
    }
}

/* 添加第二种火焰颜色 - 蓝色核心的龙火 */
@keyframes dragonFirePulse {
    0%, 100% {
        box-shadow: 0 0 10px 2px rgba(0, 150, 255, 0.7), 
                   0 0 20px 5px rgba(100, 200, 255, 0.5),
                   0 0 30px 7px rgba(180, 220, 255, 0.3);
        background: radial-gradient(circle, rgba(0, 200, 255, 0.9) 10%, rgba(100, 150, 255, 0.8) 50%, rgba(150, 100, 255, 0.4) 90%);
    }
    50% {
        box-shadow: 0 0 15px 4px rgba(0, 150, 255, 0.9), 
                   0 0 30px 8px rgba(80, 180, 255, 0.7),
                   0 0 40px 10px rgba(160, 200, 255, 0.5);
        background: radial-gradient(circle, rgba(50, 220, 255, 1) 20%, rgba(80, 180, 255, 0.9) 60%, rgba(130, 120, 255, 0.6) 90%);
    }
}

@keyframes boltFlash {
    0%, 100% { 
        transform: scale(1.1); 
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5)); 
    }
    10% { 
        transform: scale(1.5) rotate(10deg); 
        filter: drop-shadow(0 0 25px rgba(255, 255, 0, 0.9)) brightness(1.8); 
    }
    20% { 
        transform: scale(1.3) rotate(-5deg); 
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7)) brightness(1.5); 
    }
    30% { 
        transform: scale(1.5) rotate(8deg); 
        filter: drop-shadow(0 0 25px rgba(255, 255, 0, 0.9)) brightness(1.8); 
    }
    40% { 
        transform: scale(1.25) rotate(-5deg); 
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7)) brightness(1.5); 
    }
    50% { 
        transform: scale(1.6) rotate(12deg); 
        filter: drop-shadow(0 0 30px rgba(255, 255, 0, 1)) brightness(2); 
    }
    60% { 
        transform: scale(1.25) rotate(-7deg); 
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7)) brightness(1.5); 
    }
    70% { 
        transform: scale(1.5) rotate(8deg); 
        filter: drop-shadow(0 0 25px rgba(255, 255, 0, 0.9)) brightness(1.8); 
    }
    80% { 
        transform: scale(1.25) rotate(-5deg); 
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7)) brightness(1.5); 
    }
    90% { 
        transform: scale(1.35) rotate(6deg); 
        filter: drop-shadow(0 0 20px rgba(255, 255, 0, 0.8)) brightness(1.6); 
    }
}

@keyframes presentationPulse {
    0%, 100% { 
        transform: scale(1.1) rotate(0deg); 
        filter: drop-shadow(0 0 5px rgba(122, 162, 247, 0.3)); 
    }
    20% { 
        transform: scale(1.4) translateY(-8px) rotate(10deg); 
        filter: drop-shadow(0 0 18px rgba(0, 150, 255, 0.7)) brightness(1.5); 
    }
    40% { 
        transform: scale(1.3) translateY(5px) rotate(-8deg); 
        filter: drop-shadow(0 0 12px rgba(0, 150, 255, 0.6)) brightness(1.4); 
    }
    60% { 
        transform: scale(1.5) translateY(-10px) rotate(12deg); 
        filter: drop-shadow(0 0 20px rgba(0, 100, 255, 0.8)) brightness(1.6); 
    }
    80% { 
        transform: scale(1.3) translateY(5px) rotate(-8deg); 
        filter: drop-shadow(0 0 12px rgba(0, 150, 255, 0.6)) brightness(1.4); 
    }
}

/* 修改为只在图标悬停时应用动画 */
/* 移除卡片悬停时的图标动画 */
.scenario-card:nth-child(1):hover .scenario-icon {
    background-color: rgba(255, 100, 100, 0.2);
    color: #ff3838;
}

.scenario-card:nth-child(2):hover .scenario-icon {
    background-color: rgba(255, 215, 0, 0.2);
    color: #ffb700;
}

.scenario-card:nth-child(3):hover .scenario-icon {
    background-color: rgba(0, 150, 255, 0.2);
    color: #0096ff;
}

/* 添加只在图标悬停时的动画效果 */
.scenario-card:nth-child(1) .scenario-icon:hover {
    animation: dragonFloat 2s infinite;
    position: relative;
}

.scenario-card:nth-child(2) .scenario-icon:hover {
    animation: boltFlash 1s infinite;
    background-color: rgba(255, 215, 0, 0.15);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: visible;
}

.scenario-card:nth-child(2) .scenario-icon:hover i {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) brightness(1.5);
    animation: iconPulse 0.5s ease-in-out infinite alternate;
}

@keyframes iconPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) brightness(1.5);
    }
    100% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) brightness(2);
    }
}

.scenario-card:nth-child(3) .scenario-icon:hover {
    animation: presentationPulse 1.8s infinite;
}

.scenario-content h3 {
    font-size: 1.6rem; /* 增加标题大小 */
    font-weight: 600;
    margin-bottom: 1.2rem; /* 增加与正文的距离 */
    color: var(--heading-color);
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
    cursor: pointer;
}

.scenario-content h3:hover {
    color: var(--primary-color);
    transform: scale(1.03);
    text-shadow: 0 0 10px rgba(122, 162, 247, 0.3);
    animation: jelly 0.6s ease;
}

.scenario-content p {
    color: var(--text-color);
    line-height: 1.8; /* 增加行高 */
    font-size: 1.05rem; /* 稍微增加字体大小 */
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-radius: 8px;
    z-index: 1;
    overflow: hidden;
}

.scenario-content p::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(122, 162, 247, 0.03), transparent);
    z-index: -1;
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.scenario-content p:hover {
    color: var(--heading-color);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 20px rgba(122, 162, 247, 0.1);
    letter-spacing: 0.3px;
}

.scenario-content p:hover::before {
    transform: translateX(100%);
}

/* 为每个场景卡片添加不同颜色的文字效果 */
.scenario-card:nth-child(1) .scenario-content p:hover {
    text-shadow: 0 0 10px rgba(255, 100, 100, 0.3);
    color: #d03838;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 100, 100, 0.08));
    border-left: 3px solid rgba(255, 100, 100, 0.5);
}

.scenario-card:nth-child(2) .scenario-content p:hover {
    text-shadow: 0 0 10px rgba(255, 183, 0, 0.3);
    color: #f29500;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 183, 0, 0.08));
    border-left: 3px solid rgba(255, 183, 0, 0.5);
}

.scenario-card:nth-child(3) .scenario-content p:hover {
    text-shadow: 0 0 10px rgba(0, 150, 255, 0.3);
    color: #0078d0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(0, 150, 255, 0.08));
    border-left: 3px solid rgba(0, 150, 255, 0.5);
}

/* 流光效果 */
@keyframes textFlowLight {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes textPulse {
    0%, 100% {
        opacity: 0.8;
        transform: scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scaleX(1.05);
    }
}

.scenario-content p::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    opacity: 0;
    transform: scaleX(0.8) translateY(10px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 2px;
}

.scenario-card:nth-child(1) .scenario-content p::after {
    background: linear-gradient(90deg, transparent, rgba(255, 100, 100, 0.7), transparent);
    box-shadow: 0 0 10px rgba(255, 100, 100, 0.4);
}

.scenario-card:nth-child(2) .scenario-content p::after {
    background: linear-gradient(90deg, transparent, rgba(255, 183, 0, 0.7), transparent);
    box-shadow: 0 0 10px rgba(255, 183, 0, 0.4);
}

.scenario-card:nth-child(3) .scenario-content p::after {
    background: linear-gradient(90deg, transparent, rgba(0, 150, 255, 0.7), transparent);
    box-shadow: 0 0 10px rgba(0, 150, 255, 0.4);
}

.scenario-content p:hover::after {
    opacity: 1;
    transform: scaleX(1) translateY(0);
    animation: textPulse 2s ease-in-out infinite;
}

/* 添加文字悬浮时的微妙立体感 */
.scenario-card:nth-child(1) .scenario-content p:hover {
    text-shadow: 
        0 0 5px rgba(255, 100, 100, 0.3),
        1px 1px 2px rgba(255, 100, 100, 0.1),
        -1px -1px 2px rgba(255, 255, 255, 0.8);
}

.scenario-card:nth-child(2) .scenario-content p:hover {
    text-shadow: 
        0 0 5px rgba(255, 183, 0, 0.3),
        1px 1px 2px rgba(255, 183, 0, 0.1),
        -1px -1px 2px rgba(255, 255, 255, 0.8);
}

.scenario-card:nth-child(3) .scenario-content p:hover {
    text-shadow: 
        0 0 5px rgba(0, 150, 255, 0.3),
        1px 1px 2px rgba(0, 150, 255, 0.1),
        -1px -1px 2px rgba(255, 255, 255, 0.8);
}

/* 添加逐字动画效果 */
@keyframes letterWave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.scenario-content p:hover span {
    display: inline-block;
    animation: none;
}

.scenario-content p span:nth-child(2n) {
    animation-delay: 0;
}

.scenario-content p span:nth-child(3n) {
    animation-delay: 0;
}

.scenario-content p span:nth-child(4n) {
    animation-delay: 0;
}

/* 响应式调整 - 使用场景 */
@media (max-width: 992px) {
    .scenario-card,
    .scenario-card.reverse {
        flex-direction: column;
        padding: 1.5rem;
    }
    
    .scenario-visual {
        width: 100%;
        margin-bottom: 1.5rem;
        min-height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .scenario-img {
        max-width: 80%;
        transform: perspective(1000px);
    }
    
    .scenario-content {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .usage-scenarios {
        padding: 4rem 0;
    }
    
    .scenarios-container {
        gap: 2.5rem;
    }
    
    .scenario-icon {
        width: 60px;
        height: 60px;
        font-size: 1.6rem;
    }
    
    .scenario-content h3 {
        font-size: 1.3rem;
    }
    
    .scenario-visual {
        min-height: 180px;
    }
    
    .scenario-img {
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .scenario-icon {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }
}


/* --- CTA 区域 --- */
.cta-section {
    padding: 6.5rem 0; /* 增加垂直空间 */
    background-image: linear-gradient(60deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: white;
    text-align: center;
}
.cta-section h2 {
    font-size: 2.5rem; /* 增加标题大小 */
    color: white;
    margin-bottom: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
    letter-spacing: -0.01em; /* 微调字间距 */
    max-width: 860px; /* 限制宽度，保持居中 */
    margin-left: auto;
    margin-right: auto;
}
.cta-section h2:hover {
    transform: scale(1.02);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    animation: jelly 0.6s ease;
}
.cta-section p {
    font-size: 1.15rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}
.cta-section p:hover {
    opacity: 1;
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
.cta-section .cta-button.primary { /* 深色背景上的按钮样式 */
    background-color: white;
    color: var(--primary-color); /* 白色按钮上的蓝色文本 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}
.cta-section .cta-button.primary:hover {
    background-color: #f5faff; /* 悬停时的浅蓝色调 */
    color: var(--accent-color); /* 悬停时的粉色文本 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.5); /* 增强发光效果 */
    transform: translateY(-3px);
    animation: jelly 0.6s ease;
}
.cta-section .cta-button.primary i {
    color: var(--accent-color); /* 粉色图标 */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cta-section .cta-button.primary:hover i {
    color: var(--primary-color); /* 悬停时的蓝色图标 */
    transform: scale(1.2) rotate(10deg);
}


/* --- 页脚 --- */
.main-footer {
    padding: 3.5rem 0 3rem; /* 增加垂直空间 */
    background-color: #e6e9ff;
    text-align: center;
    color: var(--secondary-color);
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color);
    line-height: 1.8; /* 增加行高 */
}
.main-footer p {
    margin-bottom: 0.5rem;
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}
.main-footer p:hover {
    color: var(--primary-color);
    transform: translateY(-1px);
}
.main-footer a {
    color: var(--primary-color); /* 页脚中的蓝色链接 */
    font-weight: 500;
}
.main-footer a:hover {
    color: var(--accent-color); /* 悬停时为粉色 */
}
.footer-links {
    margin-top: 1rem;
}
.footer-links a {
    margin: 0 0.8rem;
    display: inline-block;
}

/* --- 响应式调整 --- */
@media (max-width: 992px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem; /* 减少间距，更加紧凑 */
    }
    .hero-text {
        margin-bottom: 3rem;
        order: 2; /* 移动端上文本在图像下方 */
    }
    .hero-visual {
        order: 1;
        max-width: 450px; /* 限制图像大小 */
        margin-left: auto;
        margin-right: auto;
    }
    .hero-title {
        font-size: 3rem;
    }
    .hero-subtitle {
        font-size: 1.5rem;
    }
    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    .background-shapes {
        /* 可选择在小屏幕上减少或隐藏形状 */
        opacity: 0.7;
    }
    .shape {
       /* opacity: 0.05; */ /* 使其更加微妙 */
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
    .main-header .container {
        flex-direction: column;
        gap: 1rem;
    }
    .nav-links {
        gap: 0.8rem 1rem; /* 调整行和列间距 */
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 1rem; /* 添加内边距防止触及边缘 */
    }
    .hero {
        padding: 3rem 0 4rem; /* 在移动端进一步减少内边距 */
    }
    .hero-title {
        font-size: 2.6rem;
    }
    .hero-subtitle {
        font-size: 1.4rem;
    }
    .section-title {
        font-size: 2.2rem;
    }
     .features {
        padding: 4rem 0;
    }
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
    .cta-section {
        padding: 4rem 0;
    }
    .cta-section h2 {
        font-size: 2rem;
    }
    .cta-section p {
        font-size: 1.05rem;
    }
}

/* --- 博客页面样式 --- */
.page-header {
    padding: 5rem 0 3rem;
    background-image: linear-gradient(145deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    text-align: center;
    color: var(--heading-color);
}

.page-header h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

.page-header p {
    font-size: 1.2rem;
    color: var(--secondary-color);
    max-width: 600px;
    margin: 0 auto;
}

/* 博客文章列表 */
.blog-section {
    padding: 5rem 0;
    background-color: var(--surface-color);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.blog-card {
    background-color: #f8faff;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--card-hover-shadow);
    border-color: rgba(122, 162, 247, 0.2);
}

.blog-image {
    height: 220px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-content {
    padding: 1.8rem 2rem 2rem;
}

.blog-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--secondary-color);
}

.blog-meta i {
    margin-right: 0.3rem;
    color: var(--accent-color);
}

.blog-content h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.blog-content h2 a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-content h2 a:hover {
    color: var(--primary-color);
}

.blog-content p {
    color: var(--text-color);
    margin-bottom: 1.5rem;
    line-height: 1.65;
}

.read-more {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.read-more i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.read-more:hover {
    color: var(--accent-color);
}

.read-more:hover i {
    transform: translateX(3px);
}

/* 分页 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.8rem;
    border-radius: var(--border-radius-base);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.current-page {
    background-color: var(--primary-color);
    color: white;
}

.page-number {
    background-color: #f0f3ff;
    color: var(--text-color);
}

.page-number:hover {
    background-color: rgba(122, 162, 247, 0.2);
    color: var(--primary-color);
}

.next-page {
    background-color: #f0f3ff;
    color: var(--text-color);
    padding: 0 1.2rem;
    margin-left: 0.5rem;
}

.next-page i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.next-page:hover {
    background-color: rgba(122, 162, 247, 0.2);
    color: var(--primary-color);
}

.next-page:hover i {
    transform: translateX(3px);
}

/* 订阅区域 */
.subscribe-section {
    padding: 4rem 0 5rem;
    background-color: #f4f6ff;
}

.subscribe-box {
    background: white;
    max-width: 650px;
    margin: 0 auto;
    padding: 3rem;
    border-radius: var(--border-radius-large);
    text-align: center;
    box-shadow: 0 10px 30px rgba(122, 162, 247, 0.12);
    border: 1px solid var(--border-color);
}

.subscribe-box h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.subscribe-box p {
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

.subscribe-form {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.subscribe-form input {
    flex: 1;
    padding: 0.8rem 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    font-size: 1rem;
    font-family: var(--font-family);
}

.subscribe-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.2);
}

.subscribe-button {
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-pill);
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    display: inline-flex;
    align-items: center;
}

.subscribe-button i {
    margin-left: 0.5rem;
}

.subscribe-button:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(247, 125, 170, 0.3);
}

.privacy-note {
    font-size: 0.85rem;
    color: var(--secondary-color);
    opacity: 0.8;
}

/* 响应式调整 - 博客页面 */
@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .page-header {
        padding: 4rem 0 2.5rem;
    }
    
    .page-header h1 {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .blog-image {
        height: 180px;
    }
    
    .blog-content {
        padding: 1.5rem;
    }
    
    .blog-content h2 {
        font-size: 1.3rem;
    }
    
    .subscribe-box {
        padding: 2rem 1.5rem;
    }
    
    .subscribe-form {
        flex-direction: column;
    }
    
    .subscribe-button {
        width: 100%;
        justify-content: center;
    }
    
    .page-header h1 {
        font-size: 2rem;
    }
    
    .page-header p {
        font-size: 1.05rem;
    }
}

/* --- 果冻效果动画 --- */
@keyframes jelly {
    0% { transform: scale(1); }
    15% { transform: scale(1.05, 0.95); }
    30% { transform: scale(0.92, 1.08); }
    45% { transform: scale(1.06, 0.94); }
    60% { transform: scale(0.95, 1.03); }
    75% { transform: scale(1.02, 0.98); }
    100% { transform: scale(1); }
}

/* 全局段落悬停效果 */
p {
    transition: color 0.3s ease, transform 0.3s ease;
}

p:hover {
    color: var(--heading-color);
    transform: translateY(-1px);
}

/* 按钮内文本的悬停效果 */
.cta-button span {
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.cta-button:hover span {
    transform: scale(1.05);
    animation: jelly 0.4s ease;
}

/* 按钮文字打字机效果 */
@keyframes typing {
    0%, 100% { border-right-color: transparent; }
    50% { border-right-color: currentColor; }
}

.cta-button:hover span {
    position: relative;
    display: inline-block;
    transform: none;
    animation: typing 1s step-end infinite;
    border-right: 2px solid;
    padding-right: 3px;
}

/* 闪烁光标效果 */
.cta-button.primary:hover span {
    border-right-color: white;
}

.cta-button.secondary:hover span {
    border-right-color: var(--primary-color);
}

/* 修改特性卡片标题光扫过效果的速度 */
.feature-card h3::after {
    transition: left 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 添加文字悬停时的立体效果 */
.hero-subtitle:hover {
    text-shadow: 
        1px 1px 0 rgba(255, 255, 255, 0.8),
        2px 2px 0 rgba(247, 125, 170, 0.6),
        3px 3px 0 rgba(247, 125, 170, 0.4),
        4px 4px 8px rgba(122, 162, 247, 0.3);
    transform: translate(-2px, -2px);
    color: var(--accent-color);
}

/* 可爱的表情符号样式 */
.cute-emoji {
    display: inline-block;
    font-size: 1.1em;
    vertical-align: middle;
    opacity: 0.85;
    transition: all 0.4s ease;
    transform-origin: center;
}

.hero-subtitle:hover .cute-emoji {
    animation: bounce 1s ease infinite;
    opacity: 1;
    color: var(--accent-color);
}

@keyframes bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-8px) scale(1.2) rotate(-5deg); }
    50% { transform: translateY(0) scale(1.1); }
    70% { transform: translateY(-4px) scale(1.15) rotate(5deg); }
}

/* 改进的hero-subtitle动效，让整体更协调 */
.hero-subtitle:hover {
    animation: cuteWiggle 3s ease-in-out infinite;
    text-shadow: 
        0 0 8px rgba(255, 150, 200, 0.7),
        0 0 15px rgba(161, 143, 255, 0.5);
    letter-spacing: 1px;
    transform: none;
}

/* 调整为更二次元风格的动效 */
@keyframes animeWiggle {
    0%, 100% { 
        transform: translateY(0) scale(1); 
        color: #ff85b1; /* 粉色 */
    }
    25% { 
        transform: translateY(-5px) rotate(-2deg) scale(1.03); 
        color: #ffac59; /* 橙色 */
    }
    50% { 
        transform: translateY(0) scale(1.05); 
        color: #a18fff; /* 紫色 */
    }
    75% { 
        transform: translateY(-3px) rotate(2deg) scale(1.03); 
        color: #5ccefa; /* 蓝色 - 二次元经典色 */
    }
}

/* 调整二次元风格副标题 */
.hero-subtitle {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.5s ease;
    position: relative;
    letter-spacing: -0.5px; /* 略微紧凑的字间距，更符合二次元风格 */
}

.hero-subtitle:hover {
    animation: animeWiggle 3s ease-in-out infinite;
    text-shadow: 
        0 0 10px rgba(255, 133, 177, 0.7), /* 粉色辉光 */
        0 0 20px rgba(92, 206, 250, 0.5); /* 蓝色辉光 */
    letter-spacing: 0;
    transform: none;
}

/* 改进二次元表情符号样式 */
.cute-emoji {
    display: inline-block;
    font-size: 1.3em;
    vertical-align: middle;
    opacity: 0.9;
    transition: all 0.4s ease;
    transform-origin: center;
    margin-left: 5px;
}

.hero-subtitle:hover .cute-emoji {
    animation: animeBounce 1.2s ease infinite;
    opacity: 1;
    color: #ff85b1; /* 粉色 */
}

@keyframes animeBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-10px) scale(1.3) rotate(-8deg); }
    40% { transform: translateY(0) scale(1.2); }
    60% { transform: translateY(-5px) scale(1.25) rotate(8deg); }
    70% { transform: translateY(0) scale(1.2); }
    80% { transform: translateY(-3px) scale(1.15); }
}

/* 添加更多二次元风格的装饰元素 */
.hero-subtitle::before,
.hero-subtitle::after {
    content: '★';
    position: absolute;
    opacity: 0;
    transition: all 0.5s ease;
    font-size: 1.3rem;
    color: #ffac59; /* 橙色星星 */
}

.hero-subtitle::before {
    left: -25px;
    top: 40%;
    transform: translateY(-50%);
}

.hero-subtitle::after {
    right: -25px;
    top: 40%;
    transform: translateY(-50%);
}

.hero-subtitle:hover::before,
.hero-subtitle:hover::after {
    opacity: 1;
    animation: starTwinkle 1.5s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
    from { 
        transform: translateY(-50%) scale(1) rotate(0deg); 
        color: #ffac59;
    }
    to { 
        transform: translateY(-50%) scale(1.5) rotate(72deg); 
        color: #ffdd59;
    }
}

/* 描述文字的单词效果 */
.desc-word {
    display: inline-block;
    margin-right: 5px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0.8;
    transform-origin: center bottom;
}

.hero-description:hover .desc-word {
    opacity: 1;
}

/* 描述文字悬停效果 - 波浪动画 */
@keyframes wordFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); 
    }
}

/* 使描述文字在悬停时产生波浪式的动画，每个词有延迟 */
.hero-description:hover .desc-word:nth-child(1) { animation: wordFloat 1s ease-in-out 0.0s infinite; }
.hero-description:hover .desc-word:nth-child(2) { animation: wordFloat 1s ease-in-out 0.1s infinite; }
.hero-description:hover .desc-word:nth-child(3) { animation: wordFloat 1s ease-in-out 0.2s infinite; }
.hero-description:hover .desc-word:nth-child(4) { animation: wordFloat 1s ease-in-out 0.3s infinite; }
.hero-description:hover .desc-word:nth-child(5) { animation: wordFloat 1s ease-in-out 0.4s infinite; }
.hero-description:hover .desc-word:nth-child(6) { animation: wordFloat 1s ease-in-out 0.5s infinite; }
.hero-description:hover .desc-word:nth-child(7) { animation: wordFloat 1s ease-in-out 0.6s infinite; }
.hero-description:hover .desc-word:nth-child(8) { animation: wordFloat 1s ease-in-out 0.7s infinite; }
.hero-description:hover .desc-word:nth-child(9) { animation: wordFloat 1s ease-in-out 0.8s infinite; }

/* 猫咪相关词汇特殊动画 */
@keyframes catMove {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
        color: var(--text-color);
    }
    25% { 
        transform: translateY(-12px) rotate(-5deg); 
        color: #ffac59; /* 橙色 - 猫咪色 */
    }
    75% { 
        transform: translateY(-6px) rotate(5deg); 
        color: #ffac59; 
    }
}

.hero-description:hover .cat-word {
    animation: catMove 1.5s ease-in-out infinite !important;
    text-shadow: 0 0 8px rgba(255, 172, 89, 0.5);
}

/* 突出词汇特殊动画 */
@keyframes empPulse {
    0%, 100% { 
        transform: scale(1); 
        color: var(--text-color);
    }
    50% { 
        transform: scale(1.2); 
        color: var(--accent-color);
        text-shadow: 0 0 10px rgba(247, 125, 170, 0.6);
    }
}

.hero-description:hover .emp-word {
    animation: empPulse 1s ease-in-out infinite !important;
}

/* 修改hero-description的hover样式 */
.hero-description:hover {
    color: var(--text-color);
    transform: none;
    cursor: default;
}

/* 优化的响应式设计 */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 90%;
    }
    
    html {
        font-size: 15px;
    }
    
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-text {
        margin-bottom: 0;
        order: 2;
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    .hero-visual {
        order: 1;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-title {
        font-size: 3.2rem;
    }
    
    .hero-subtitle {
        font-size: 1.6rem;
    }
    
    .hero-description {
        margin-left: auto;
        margin-right: auto;
        max-width: 600px;
        text-align: center;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
    
    .scenario-card,
    .scenario-card.reverse {
        flex-direction: column;
        padding: 2rem;
        gap: 2rem;
    }
    
    .scenario-visual {
    width: 100%;
        margin-bottom: 1rem;
        min-height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .scenario-img {
        max-width: 85%;
    }
    
    .scenario-content {
        padding: 0 1rem;
        text-align: center;
    }
    
    .section-title {
        font-size: 2.4rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
        margin-bottom: 3.5rem;
    }
    
    .cta-section h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    .main-header .container {
        flex-direction: column;
        gap: 1rem;
        padding: 0.8rem 1rem;
    }
    
    .nav-links {
        gap: 1rem 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.5rem 0;
    }
    
    .hero {
        padding: 4rem 0;
    }
    
    .hero-title {
        font-size: 2.8rem;
    }
    
    .hero-subtitle {
        font-size: 1.4rem;
    }
    
    .hero-description {
        font-size: 1.05rem;
        padding: 0.5rem 0;
    }
    
    .desc-word {
        margin-right: 3px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .feature-card {
        padding: 2rem 1.5rem;
    }
    
    .cta-section {
        padding: 4rem 0;
    }
    
    .cta-section h2 {
        font-size: 2rem;
    }
    
    .cta-section p {
        font-size: 1.05rem;
        margin-bottom: 2rem;
    }
    
    .cta-button.large {
        padding: 0.9rem 2rem;
        font-size: 1.1rem;
        width: 80%; /* 在移动设备上扩大按钮宽度 */
        max-width: 300px;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
    
    .section-subtitle {
        font-size: 1.05rem;
        margin-bottom: 2.5rem;
    }
    
    .usage-scenarios {
        padding: 4rem 0;
    }
    
    .scenarios-container {
        gap: 2.5rem;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    .cta-button {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        display: block;
        margin: 1rem auto;
        width: 90%;
        max-width: 280px;
    }
    
    .feature-icon {
        font-size: 2.5rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .cta-section h2 {
        font-size: 1.8rem;
    }
    
    .main-footer {
        padding: 2.5rem 0 2rem;
    }
    
    .hero {
        padding: 2.5rem 0 3.5rem; /* 在更小屏幕上进一步减少内边距 */
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
}

.scenario-content h3 {
    font-size: 1.6rem; /* 增加标题大小 */
    font-weight: 600;
    margin-bottom: 1.2rem; /* 增加与正文的距离 */
    color: var(--heading-color);
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.scenario-content h3::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    transition: width 0.4s ease-in-out;
    z-index: -1;
}

/* 游戏场景标题效果 */
@keyframes gameTitle {
    0% { text-shadow: 0 0 5px rgba(255, 0, 0, 0.3); }
    25% { text-shadow: 0 0 15px rgba(255, 0, 0, 0.5), 0 0 5px rgba(255, 100, 0, 0.3); }
    50% { text-shadow: 0 0 25px rgba(255, 0, 0, 0.7), 0 0 15px rgba(255, 100, 0, 0.5), 0 0 5px rgba(255, 255, 0, 0.3); }
    75% { text-shadow: 0 0 15px rgba(255, 0, 0, 0.5), 0 0 5px rgba(255, 100, 0, 0.3); }
    100% { text-shadow: 0 0 5px rgba(255, 0, 0, 0.3); }
}

.scenario-card:nth-child(1) .scenario-content h3:hover {
    color: #ff3838;
    background-color: rgba(255, 56, 56, 0.08);
    animation: gameTitle 2s infinite;
    transform: perspective(200px) rotateX(10deg);
    text-shadow: 0 2px 4px rgba(255, 56, 56, 0.4);
    box-shadow: 0 5px 15px rgba(255, 56, 56, 0.2);
    letter-spacing: 1px;
}

.scenario-card:nth-child(1) .scenario-content h3::before {
    background: linear-gradient(90deg, transparent, #ff3838, transparent);
}

.scenario-card:nth-child(1) .scenario-content h3:hover::before {
    width: 100%;
}

/* 自动打开软件标题效果 */
@keyframes boltTitle {
    0% { transform: translateY(0); filter: brightness(1); }
    50% { transform: translateY(-2px); filter: brightness(1.1); }
    100% { transform: translateY(0); filter: brightness(1); }
}

.scenario-card:nth-child(2) .scenario-content h3:hover {
    color: #e87200;
    animation: none;
    text-shadow: 0 0 10px rgba(232, 114, 0, 0.2);
    background: linear-gradient(90deg, rgba(232, 114, 0, 0.1), rgba(232, 114, 0, 0.0));
    border-right: 2px solid rgba(232, 114, 0, 0.5);
    border-left: 2px solid rgba(232, 114, 0, 0.5);
    padding-left: 1rem;
    padding-right: 1rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    transform: translateY(-2px);
}

.scenario-card:nth-child(2) .scenario-content h3::after {
    content: '⚡';
    position: absolute;
    right: -20px;
    top: 50%;
    font-size: 1rem;
    opacity: 0;
    transform: translateY(-50%) translateX(10px);
    transition: all 0.4s ease;
    color: #e87200;
}

.scenario-card:nth-child(2) .scenario-content h3:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* PPT演示标题效果 */
@keyframes pptTitle {
    0% { background-position: 0% 50%; transform: perspective(500px) rotateY(0deg) translateZ(0); filter: brightness(1); }
    25% { background-position: 33% 50%; transform: perspective(500px) rotateY(2deg) translateZ(5px); filter: brightness(1.1); }
    50% { background-position: 66% 50%; transform: perspective(500px) rotateY(0deg) translateZ(0); filter: brightness(1); }
    75% { background-position: 100% 50%; transform: perspective(500px) rotateY(-2deg) translateZ(5px); filter: brightness(1.1); }
    100% { background-position: 0% 50%; transform: perspective(500px) rotateY(0deg) translateZ(0); filter: brightness(1); }
}

@keyframes slideIcon {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(3px); }
}

.scenario-card:nth-child(3) .scenario-content h3:hover {
    color: transparent;
    background: linear-gradient(90deg, #1e40af, #3b82f6, #60a5fa, #93c5fd, #60a5fa, #3b82f6, #1e40af);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: pptTitle 4s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.2), 0 0 20px rgba(59, 130, 246, 0.1);
    transform: translateY(-3px);
    letter-spacing: 0.8px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scenario-card:nth-child(3) .scenario-content h3::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3b82f6, #60a5fa, #3b82f6, transparent);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.scenario-card:nth-child(3) .scenario-content h3::after {
    content: '▶';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    color: #3b82f6;
    font-size: 0.7em;
    opacity: 0;
    transition: all 0.3s ease;
    text-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}

.scenario-card:nth-child(3) .scenario-content h3:hover::before {
    transform: scaleX(1);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.scenario-card:nth-child(3) .scenario-content h3:hover::after {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    right: -25px;
    animation: slideIcon 1s ease-in-out infinite;
}

/* 添加龙喷火的伪元素 */
.scenario-card:nth-child(1) .scenario-icon {
    position: relative;
    overflow: visible;
}

.scenario-card:nth-child(1) .scenario-icon::before,
.scenario-card:nth-child(1) .scenario-icon::after,
.scenario-card:nth-child(1) .scenario-icon .fire-element {
    content: "";
    position: absolute;
    transform: scale(0);
        opacity: 0;
    pointer-events: none;
    transform-origin: left center;
}

.scenario-card:nth-child(1) .scenario-icon::before {
    top: 45%;
    left: 60%;
    width: 16px;
    height: 16px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    z-index: -1;
}

.scenario-card:nth-child(1) .scenario-icon::after {
    top: 40%;
    left: 55%;
    width: 12px;
    height: 12px;
    border-radius: 60% 40% 60% 40% / 40% 60% 40% 60%;
    z-index: -2;
}

/* 添加第三个火焰元素 */
.scenario-card:nth-child(1) .scenario-icon .fire-element {
    display: none;
}

.scenario-card:nth-child(1) .scenario-icon:hover .fire-element {
    display: block;
    top: 55%;
    left: 58%;
    width: 14px;
    height: 14px;
    border-radius: 40% 60% 30% 70% / 60% 30% 70% 40%;
    z-index: -3;
    animation: dragonFireBreath3 1.1s ease-out 0.15s infinite, firePulse 0.55s ease-in-out infinite;
}

.scenario-card:nth-child(1) .scenario-icon:hover::before {
    animation: dragonFireBreath 1.2s ease-out infinite, firePulse 0.6s ease-in-out infinite;
}

.scenario-card:nth-child(1) .scenario-icon:hover::after {
    animation: dragonFireBreath2 0.9s ease-out 0.1s infinite, dragonFirePulse 0.5s ease-in-out infinite;
}

.scenario-card:nth-child(2) .scenario-icon:hover {
    animation: boltFlash 1s infinite;
}

/* 添加闪电伪元素效果 */
.scenario-card:nth-child(2) .scenario-icon {
    position: relative;
    overflow: visible;
}

.scenario-card:nth-child(2) .scenario-icon::before,
.scenario-card:nth-child(2) .scenario-icon::after {
    content: "";
    position: absolute;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(60, 200, 255, 0.85));
    clip-path: polygon(30% 0%, 50% 40%, 38% 40%, 60% 100%, 25% 50%, 45% 50%, 30% 0%);
    filter: drop-shadow(0 0 12px rgba(0, 180, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}

/* 第一个闪电伪元素 */
.scenario-card:nth-child(2) .scenario-icon::before {
    width: 24px;
    height: 36px;
    top: -30px;
    right: -5px;
    transform-origin: bottom center;
}

/* 第二个闪电伪元素 */
.scenario-card:nth-child(2) .scenario-icon::after {
    width: 20px;
    height: 28px;
    bottom: -25px;
    left: 0px;
    transform-origin: top center;
    transform: scale(0) rotate(25deg);
}

/* 闪电动画 - 更强的光效和颜色变化 */
@keyframes lightningBolt1 {
    0%, 100% {
        transform: scale(0) rotate(-25deg);
        opacity: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(60, 180, 255, 0.85));
        filter: blur(5px);
    }
    10% {
        transform: scale(0.7) rotate(-5deg);
        opacity: 0.7;
        filter: brightness(1.5) blur(2px);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(0, 200, 255, 0.85));
    }
    15%, 85% {
        transform: scale(1.4) rotate(-10deg) translateX(-3px);
        opacity: 0.95;
        box-shadow: 0 0 15px rgba(0, 170, 255, 0.9), 0 0 25px rgba(255, 255, 255, 0.8), 0 0 40px rgba(0, 170, 255, 0.5);
        filter: brightness(1.8) contrast(1.1) blur(0px);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(0, 170, 255, 0.9));
    }
}

/* 导航样式 */
.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2rem; /* 增加导航项间距 */
}

.nav-links a {
    color: var(--text-color);
    font-weight: 500; /* 增加字重 */
    text-decoration: none;
    position: relative;
    padding-bottom: 0.3rem;
    transition: color 0.3s ease;
    display: inline-block;
    font-size: 1.05rem; /* 增加导航文字大小 */
}

.nav-links a:hover {
    color: var(--primary-color); /* 导航链接悬停时为蓝色 */
    animation: jelly 0.6s ease;
}

.nav-links a::after { /* 下划线动画 */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    background-color: var(--accent-color); /* 粉色下划线 */
    transition: all 0.3s ease-out;
    transform: translateX(-50%);
    border-radius: 1px;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 60%; /* 较小的下划线，更可爱的感觉 */
}

/* 操作按钮容器 */
.action-buttons {
    display: flex;
    gap: 1rem;
    margin-left: 1rem;
}

.nav-button {
    background-color: var(--primary-color);
    color: white !important;
    padding: 0.6rem 1.5rem; /* 增加内边距 */
    border-radius: var(--border-radius-pill);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: var(--button-shadow);
    font-weight: 600;
    font-size: 1rem; /* 增加字体大小 */
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-button i {
    margin-right: 0.7rem; /* 增加图标和文字的间距 */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
    display: inline-block;
    font-size: 1.1em; /* 增加图标大小，相对于按钮文字 */
}

.nav-button:hover {
    background-color: var(--primary-hover);
    color: white !important;
    text-decoration: none;
    box-shadow: var(--button-hover-shadow);
    animation: jelly 0.6s ease;
    transform: translateY(-3px);
}

.nav-button::after {
    display: none;
}

/* 下载按钮样式 */
.download-btn {
    background: linear-gradient(45deg, var(--primary-color), #96b6ff) !important;
}

.download-btn:hover {
    background: linear-gradient(45deg, #96b6ff, var(--primary-color)) !important;
}

/* 支持项目按钮样式 */
.support-btn {
    background: linear-gradient(45deg, var(--accent-color), #f799b8) !important;
    box-shadow: 0 4px 15px rgba(247, 125, 170, 0.3) !important;
}

.support-btn:hover {
    background: linear-gradient(45deg, #f799b8, var(--accent-color)) !important;
    box-shadow: 0 6px 20px rgba(247, 125, 170, 0.4) !important;
}

.support-btn i {
    display: inline-block; /* Needed for transform */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Added transition for smoother hover effect */
    opacity: 0.8; /* Slightly faded when not animating */
    transform-origin: bottom center;
}

/* Add hover state animation */
.support-btn:hover i {
    animation: coffeeSteam 1.5s ease-in-out infinite alternate;
}

@keyframes coffeeSteam {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    50% { transform: translateY(-3px) rotate(-5deg); opacity: 1; }
    100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
}

/* 响应式导航 */
@media (max-width: 768px) {
    .nav-links {
        gap: 1rem;
    }
    
    .action-buttons {
        margin-left: 0;
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .nav-button {
        padding: 0.5rem 1.2rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 600px) {
    .main-header .container {
        flex-direction: column;
        padding: 1rem 0;
    }
    
    .logo {
        margin-bottom: 1rem;
    }
    
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .action-buttons {
        margin-top: 0.5rem;
        flex-direction: row;
        width: 100%;
        justify-content: center;
    }
    
    .nav-button {
        padding: 0.5rem 1rem;
    }
}

/* 添加可爱的装饰元素 */
.hero-subtitle::before,
.hero-subtitle::after {
    content: '♡';
    position: absolute;
    opacity: 0;
    transition: all 0.5s ease;
    font-size: 1.2rem;
    color: var(--accent-color);
}

.hero-subtitle::before {
    left: -20px;
    top: 50%;
    transform: translateY(-50%);
}

.hero-subtitle::after {
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}

.hero-subtitle:hover::before,
.hero-subtitle:hover::after {
    opacity: 1;
    animation: heartbeat 1s ease-in-out infinite alternate;
}

@keyframes heartbeat {
    from { transform: translateY(-50%) scale(1); }
    to { transform: translateY(-50%) scale(1.3); }
}

/* 改进描述文字基本样式 */
.hero-description {
    font-size: 1.15rem;
    color: var(--text-color);
    margin-bottom: 2.8rem;
    max-width: 520px;
    line-height: 1.8;
    transition: all 0.3s ease;
    cursor: pointer;
    padding: 12px 0;
    position: relative;
    text-align: left; /* 改为左对齐而非两端对齐 */
    letter-spacing: 0.01em; /* 微调字间距 */
}

/* 添加鼠标悬停特效底部边框 */
.hero-description::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transition: width 0.6s ease;
}

.hero-description:hover::after {
    width: 100%;
    box-shadow: 0 0 10px rgba(122, 162, 247, 0.5);
}

/* 描述文字的单词效果 - 增强版 */
.desc-word {
    display: inline-block;
    margin-right: 5px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0.85;
    transform-origin: center bottom;
    position: relative;
    padding: 0 2px;
}

.hero-description:hover .desc-word {
    opacity: 1;
}

/* 描述文字悬停效果 - 改进波浪动画 */
@keyframes wordFloat {
    0% { 
        transform: translateY(0) rotate(0deg); 
    }
    50% { 
        transform: translateY(-10px) rotate(2deg); 
    }
    100% { 
        transform: translateY(0) rotate(0deg); 
    }
}

/* 猫咪相关词汇特殊动画 - 加入更多猫咪元素 */
@keyframes catMove {
    0% { 
        transform: translateY(0) rotate(0deg) scale(1); 
        color: var(--text-color);
    }
    30% { 
        transform: translateY(-10px) rotate(-5deg) scale(1.15); 
        color: #ffac59; /* 橙色 - 猫咪色 */
    }
    60% { 
        transform: translateY(-5px) rotate(3deg) scale(1.08); 
        color: #ffac59; 
    }
    100% { 
        transform: translateY(0) rotate(0deg) scale(1); 
        color: var(--text-color);
    }
}

.hero-description:hover .cat-word {
    animation: catMove 1.5s ease-in-out infinite;
    text-shadow: 0 0 8px rgba(255, 172, 89, 0.5);
    font-weight: 500;
}

/* 添加一个小猫爪图标在猫咪词之前 */
.hero-description:hover .cat-word:first-child::before {
    content: '🐾 ';
    font-size: 0.9em;
    opacity: 0;
    animation: fadeIn 0.5s forwards 0.3s;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 突出词汇特殊动画 - 更强调重点 */
@keyframes empPulse {
    0% { 
        transform: scale(1); 
        color: var(--text-color);
    }
    50% { 
        transform: scale(1.25); 
        color: var(--accent-color);
        text-shadow: 0 0 15px rgba(247, 125, 170, 0.7);
    }
    100% { 
        transform: scale(1); 
        color: var(--text-color);
    }
}

.hero-description:hover .emp-word {
    animation: empPulse 1s ease-in-out infinite;
    font-weight: 600;
    position: relative;
}

/* 添加闪光效果到重点词 */
.hero-description:hover .emp-word::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
    opacity: 0;
    animation: sparkle 2s linear infinite;
    pointer-events: none;
}

@keyframes sparkle {
    0% { opacity: 0; transform: scale(0.5); }
    5% { opacity: 0.7; }
    10% { opacity: 0; transform: scale(1.2); }
    100% { opacity: 0; }
}

.hero-visual {
    flex: 1 1 35%; /* 从40%减少到35%，减少图片区域占比 */
    position: relative;
    text-align: center;
    margin-right: -5rem; /* 从-3rem增加到-5rem，使图片向右移动更多 */
}

.hero-screenshot {
    border-radius: var(--border-radius-large); /* 更圆润的边角 */
    box-shadow: 0 15px 35px rgba(122, 162, 247, 0.2); /* 更柔和、更大的阴影 */
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    border: 6px solid rgba(255, 255, 255, 0.85); /* 半透明白色边框 */
    transform: scale(1.5) perspective(1000px); /* 默认1.5倍大小，添加透视效果 */
    transform-origin: center center;
    z-index: 2;
    cursor: pointer; /* 添加指针样式表示可点击 */
    user-select: none; /* 防止拖拽选中 */
}

.hero-screenshot::before,
.hero-screenshot::after {
    content: '';
    position: absolute;
    background: white;
    z-index: 1;
    opacity: 0.4;
    transition: all 0.5s ease;
}

/* 水平丝带 */
.hero-screenshot::before {
    height: 6px;
    width: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.2);
}

/* 垂直丝带 */
.hero-screenshot::after {
    width: 6px;
    height: 120%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.2);
}

/* 添加呼吸动画效果 */
@keyframes breathe {
    0% { transform: scale(1.4) perspective(1000px) rotateY(-10deg) rotateX(3deg); }
    50% { transform: scale(1.45) perspective(1000px) rotateY(-10deg) rotateX(3deg); }
    100% { transform: scale(1.4) perspective(1000px) rotateY(-10deg) rotateX(3deg); }
}

.hero-screenshot:hover {
    transform: scale(1.45) perspective(1000px); /* 悬停时略微放大 */
    box-shadow: 20px 15px 30px rgba(122, 162, 247, 0.25);
    border-color: rgba(255, 255, 255, 1);
    animation: none;
}

.hero-screenshot:hover::before,
.hero-screenshot:hover::after {
    opacity: 0.8; /* 鼠标悬停时丝带变得更明显 */
    box-shadow: 0 0 15px 6px rgba(255, 255, 255, 0.4);
}

/* 响应式调整悬停效果 */
@media (max-width: 992px) {
    @keyframes breathe {
        0% { transform: scale(1.2) perspective(1000px) rotateY(-8deg) rotateX(2deg); }
        50% { transform: scale(1.25) perspective(1000px) rotateY(-8deg) rotateX(2deg); }
        100% { transform: scale(1.2) perspective(1000px) rotateY(-8deg) rotateX(2deg); }
    }
    
    .hero-screenshot:hover {
        transform: scale(1.25) perspective(1000px);
    }

    .hero-screenshot {
        transform: scale(1.2) perspective(1000px); /* 减小平板上的默认缩放 */
    }

    .hero-visual {
        margin-right: -2.5rem; /* 从-1.5rem增加到-2.5rem */
    }
}

@media (max-width: 768px) {
    @keyframes breathe {
        0% { transform: scale(1.0) perspective(1000px) rotateY(-5deg) rotateX(2deg); }
        50% { transform: scale(1.05) perspective(1000px) rotateY(-5deg) rotateX(2deg); }
        100% { transform: scale(1.0) perspective(1000px) rotateY(-5deg) rotateX(2deg); }
    }
    
    .hero-screenshot:hover {
        transform: scale(1.1) perspective(1000px);
        box-shadow: 10px 10px 20px rgba(122, 162, 247, 0.2);
    }

    .hero-screenshot {
        transform: scale(1.0) perspective(1000px); /* 手机上不缩放 */
        max-width: 90%; /* 限制最大宽度 */
        margin: 0 auto; /* 居中显示 */
        animation: breathe 3s infinite ease-in-out; /* 应用动画效果 */
    }

    .hero-visual {
        margin-right: 0; /* 在手机屏幕上取消负边距 */
    }
    
    .hero-screenshot::before,
    .hero-screenshot::after {
        box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.15);
    }
}

@media (max-width: 480px) {
    .hero-screenshot {
        transform: scale(0.85) perspective(1000px); /* 在更小的屏幕上缩小 */
        border-width: 4px; /* 减小边框宽度 */
        animation: breathe 3s infinite ease-in-out; /* 应用动画效果 */
    }
    
    .hero-screenshot:hover {
        transform: scale(0.9) perspective(1000px); /* 悬停时缩小放大比例 */
        max-width: 95%; /* 限制最大宽度，防止溢出 */
    }
    
    @keyframes breathe {
        0% { transform: scale(0.85) perspective(1000px) rotateY(-3deg) rotateX(1deg); }
        50% { transform: scale(0.87) perspective(1000px) rotateY(-3deg) rotateX(1deg); }
        100% { transform: scale(0.85) perspective(1000px) rotateY(-3deg) rotateX(1deg); }
    }
}

/* 号召性按钮 */
.cta-button {
    display: inline-block;
    padding: 0.9rem 2rem; /* 增加内边距 */
    border-radius: var(--border-radius-pill);
    font-size: 1.05rem; /* 增加字体大小 */
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    margin: 0.5rem 0.5rem 0.5rem 0;
    box-shadow: var(--button-shadow);
    position: relative;
    overflow: hidden;
    letter-spacing: 0.02em; /* 增加字间距 */
}

.cta-button i {
    margin-right: 0.7rem; /* 增加图标和文字的间距 */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.3s ease;
    display: inline-block;
    font-size: 1.1em; /* 增加图标大小，相对于按钮文字 */
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease-out, height 0.5s ease-out;
    z-index: 1;
    opacity: 0;
}

.cta-button:hover::before {
    width: 300%;
    height: 300%;
    opacity: 1;
}

.cta-button > * {
    position: relative;
    z-index: 2;
}

.cta-button.primary {
    background-color: var(--accent-color); /* 粉色主要按钮 */
    color: white;
    transition: all 0.4s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cta-button.primary:hover {
    background-color: #ff5d95; /* 更亮更饱和的粉色 */
    color: white;
    box-shadow: 0 6px 20px rgba(247, 125, 170, 0.5), 0 0 15px rgba(255, 93, 149, 0.6); /* 增强的粉色阴影和发光效果 */
    transform: translateY(-3px);
    animation: jelly 0.6s ease;
}

.cta-button.primary:hover i {
    transform: scale(1.2) rotate(10deg);
    color: #fff6f9; /* 更亮的颜色强调图标 */
}

.cta-button.secondary {
    background-color: var(--surface-color); /* 白色 */
    color: var(--primary-color); /* 蓝色文本 */
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: all 0.4s ease, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cta-button.secondary:hover {
    background-color: #eef4ff; /* 更明显的淡蓝色 */
    color: #4f7df9; /* 更亮的蓝色 */
    border-color: #b8c9ff;
    box-shadow: 0 6px 15px rgba(122, 162, 247, 0.3), 0 0 10px rgba(79, 125, 249, 0.4); /* 增强的蓝色阴影和发光效果 */
    transform: translateY(-3px);
    animation: jelly 0.6s ease;
}

.cta-button.secondary:hover i {
    transform: scale(1.2) rotate(10deg);
    color: #3a69f8; /* 更亮的蓝色强调图标 */
}

.cta-button.large {
    padding: 1.1rem 2.7rem; /* 增加大型按钮的内边距 */
    font-size: 1.2rem; /* 增加大型按钮字体大小 */
    letter-spacing: 0.03em; /* 更大的字间距 */
}

/* 可选的背景形状 */
.background-shapes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1; /* 非常微妙 */
    background-color: var(--accent-color); /* 粉色形状 */
    animation: float 15s infinite ease-in-out alternate;
}

.shape1 {
    width: 150px; height: 150px; top: 10%; left: 5%; animation-duration: 18s;
    background-color: rgba(255, 255, 255, 0.5); /* 白色形状 */
}

.shape2 {
    width: 80px; height: 80px; bottom: 15%; right: 10%; animation-duration: 12s; animation-delay: 2s;
}

.shape3 {
    width: 120px; height: 120px; top: 40%; right: 15%; animation-duration: 20s; animation-delay: 1s;
     background-color: rgba(167, 199, 231, 0.3); /* 浅蓝色形状 */
}

@keyframes float {
    0% { transform: translateY(0px) translateX(0px) rotate(0deg); }
    100% { transform: translateY(-20px) translateX(15px) rotate(20deg); }
}

/* --- 特性区域 --- */
.features {
    padding: 7rem 0; /* 增加垂直空间 */
    background-color: var(--surface-color);
    position: relative;
}

.section-title {
    text-align: center;
    font-size: 2.7rem; /* 增加大小 */
    font-weight: 700;
    margin-bottom: 0.8rem;
    color: var(--heading-color);
    cursor: pointer;
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
    letter-spacing: -0.02em; /* 微调字间距 */
}

.section-title:hover {
    color: white;
    text-shadow: none;
    animation: glowing 2s ease-in-out infinite, jelly 0.6s ease;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

.section-subtitle {
    text-align: center;
    font-size: 1.2rem; /* 增加大小 */
    color: var(--secondary-color);
    margin-bottom: 4.8rem; /* 增加与内容的距离 */
    max-width: 650px; /* 增加宽度 */
    margin-left: auto;
    margin-right: auto;
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
    line-height: 1.6; /* 优化行高 */
}

.section-subtitle:hover {
    color: var(--accent-color);
    transform: translateY(-2px);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 稍微增加卡片宽度 */
    gap: 2.8rem; /* 增加卡片间距 */
    margin-top: 2rem; /* 增加与标题的距离 */
}

.feature-card {
    background-color: #f8faff;
    padding: 2.8rem 2.2rem; /* 增加内边距 */
    border-radius: var(--border-radius-large);
    text-align: center;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-10px); /* 更多提升 */
    box-shadow: var(--card-hover-shadow);
    border-color: rgba(122, 162, 247, 0.2);
    animation: jelly 0.7s ease;
}

.feature-icon {
    font-size: 2.8rem; /* 更大的图标 */
    color: var(--primary-color); /* 蓝色图标 */
    margin-bottom: 1.5rem;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    /* 可选的背景圆圈
    background-color: rgba(122, 162, 247, 0.1);
    width: 80px; height: 80px; line-height: 80px; border-radius: 50%;
    */
    transform-origin: center center;
}

.feature-card:hover .feature-icon {
    transform: scale(1.1); 
}

/* 特性图标夸张动画效果 */
@keyframes ghostBounce {
    0%, 100% { transform: translateY(0) scale(1.1); filter: drop-shadow(0 0 5px rgba(146, 129, 236, 0.3)); }
    40% { transform: translateY(-25px) scale(1.5) rotate(15deg); filter: drop-shadow(0 0 15px rgba(146, 129, 236, 0.7)); }
    60% { transform: translateY(-25px) scale(1.5) rotate(-15deg); filter: drop-shadow(0 0 15px rgba(146, 129, 236, 0.7)); }
    80% { transform: translateY(-12px) scale(1.3); filter: drop-shadow(0 0 10px rgba(146, 129, 236, 0.5)); }
}

/* 修改沙漏图标的动画 */
@keyframes hourglassFlip {
    0% { transform: rotate(0deg) scale(1.1); filter: drop-shadow(0 0 5px rgba(247, 175, 62, 0.3)); }
    10% { transform: rotate(0deg) scale(1.5) translateY(-5px); filter: drop-shadow(0 0 12px rgba(247, 175, 62, 0.6)); }
    30% { transform: rotate(180deg) scale(1.8) translateY(10px); filter: drop-shadow(0 0 15px rgba(247, 175, 62, 0.8)); }
    50% { transform: rotate(180deg) scale(1.5) translateY(-5px); filter: drop-shadow(0 0 12px rgba(247, 175, 62, 0.6)); }
    70% { transform: rotate(360deg) scale(1.8) translateY(10px); filter: drop-shadow(0 0 15px rgba(247, 175, 62, 0.8)); }
    90% { transform: rotate(360deg) scale(1.5) translateY(-5px); filter: drop-shadow(0 0 12px rgba(247, 175, 62, 0.6)); }
    100% { transform: rotate(360deg) scale(1.1); filter: drop-shadow(0 0 5px rgba(247, 175, 62, 0.3)); }
}

@keyframes stopwatchSpin {
    0% { transform: rotate(0deg) scale(1.1); filter: drop-shadow(0 0 5px rgba(122, 162, 247, 0.3)); }
    40% { transform: rotate(180deg) scale(1.4); filter: drop-shadow(0 0 15px rgba(122, 162, 247, 0.7)); }
    80% { transform: rotate(320deg) scale(1.2); filter: drop-shadow(0 0 10px rgba(122, 162, 247, 0.5)); }
    100% { transform: rotate(360deg) scale(1.1); filter: drop-shadow(0 0 5px rgba(122, 162, 247, 0.3)); }
}

@keyframes magicSparkle {
    0% { transform: scale(1.1); filter: brightness(1) drop-shadow(0 0 5px rgba(247, 125, 170, 0.3)); }
    25% { transform: scale(1.8) rotate(20deg); filter: brightness(1.5) drop-shadow(0 0 15px rgba(247, 125, 170, 0.8)); }
    50% { transform: scale(1.5) rotate(-20deg); filter: brightness(1.3) drop-shadow(0 0 10px rgba(247, 125, 170, 0.6)); }
    75% { transform: scale(1.7) rotate(15deg); filter: brightness(1.5) drop-shadow(0 0 15px rgba(247, 125, 170, 0.8)); }
    100% { transform: scale(1.1); filter: brightness(1) drop-shadow(0 0 5px rgba(247, 125, 170, 0.3)); }
}

@keyframes bellShake {
    0%, 100% { transform: scale(1.1); filter: drop-shadow(0 0 5px rgba(255, 212, 59, 0.3)); }
    20% { transform: scale(1.6) rotate(35deg) translateY(-10px); filter: drop-shadow(0 0 15px rgba(255, 212, 59, 0.7)); }
    40% { transform: scale(1.4) rotate(-30deg) translateY(5px); filter: drop-shadow(0 0 12px rgba(255, 212, 59, 0.5)); }
    60% { transform: scale(1.6) rotate(25deg) translateY(-10px); filter: drop-shadow(0 0 15px rgba(255, 212, 59, 0.7)); }
    80% { transform: scale(1.4) rotate(-20deg) translateY(5px); filter: drop-shadow(0 0 12px rgba(255, 212, 59, 0.5)); }
}

@keyframes featherFloat {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1.1); filter: drop-shadow(0 0 5px rgba(120, 227, 167, 0.3)); }
    25% { transform: translateY(-25px) rotate(20deg) scale(1.6); filter: drop-shadow(0 0 15px rgba(120, 227, 167, 0.7)); }
    50% { transform: translateY(-35px) rotate(-15deg) scale(1.8); filter: drop-shadow(0 0 18px rgba(120, 227, 167, 0.8)); }
    75% { transform: translateY(-25px) rotate(15deg) scale(1.6); filter: drop-shadow(0 0 15px rgba(120, 227, 167, 0.7)); }
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1.1); color: var(--accent-color); filter: drop-shadow(0 0 5px rgba(255, 51, 102, 0.3)); }
    25% { transform: scale(1.9); color: #ff3366; filter: drop-shadow(0 0 15px rgba(255, 51, 102, 0.7)); }
    50% { transform: scale(1.1); color: var(--primary-color); filter: drop-shadow(0 0 5px rgba(122, 162, 247, 0.3)); }
    75% { transform: scale(1.7); color: #ff3366; filter: drop-shadow(0 0 15px rgba(255, 51, 102, 0.7)); }
}

/* 添加粒子效果和额外视觉效果的新动画 */
@keyframes ghostParticles {
    0%, 100% { box-shadow: 0 0 0 0 rgba(146, 129, 236, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(146, 129, 236, 0.2); }
}

@keyframes hourglassSand {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247, 175, 62, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(247, 175, 62, 0.2); }
}

@keyframes magicStars {
    0%, 100% { box-shadow: 0 0 0 0 rgba(247, 125, 170, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(247, 125, 170, 0.2); }
}

@keyframes bellRing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 212, 59, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(255, 212, 59, 0.2); }
}

@keyframes featherWind {
    0%, 100% { box-shadow: 0 0 0 0 rgba(120, 227, 167, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(120, 227, 167, 0.2); }
}

@keyframes heartGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 51, 102, 0); }
    50% { box-shadow: 0 0 30px 15px rgba(255, 51, 102, 0.2); }
}

/* 为每个特性卡片设置不同的动画和背景效果 */
.feature-card:nth-child(1):hover .feature-icon {
    animation: ghostBounce 1.8s ease infinite;
    color: #9281EC; /* 紫色幽灵色调 */
}

.feature-card:nth-child(1):hover {
    animation: jelly 0.7s ease, ghostParticles 2.5s ease-in-out infinite;
    background: radial-gradient(circle at center, rgba(146, 129, 236, 0.1) 0%, rgba(248, 250, 255, 1) 70%);
}

.feature-card:nth-child(2):hover .feature-icon {
    animation: hourglassFlip 3s ease-in-out infinite;
    color: #F7AF3E; /* 沙漏金色 */
}

.feature-card:nth-child(2):hover {
    animation: jelly 0.7s ease, hourglassSand 2.5s ease-in-out infinite;
    background: radial-gradient(circle at center, rgba(247, 175, 62, 0.1) 0%, rgba(248, 250, 255, 1) 70%);
}

.feature-card:nth-child(3):hover .feature-icon {
    animation: magicSparkle 2s ease-in-out infinite;
    color: #F77DAA; /* 魔法粉色 */
}

.feature-card:nth-child(3):hover {
    animation: jelly 0.7s ease, magicStars 2.5s ease-in-out infinite;
    background: radial-gradient(circle at center, rgba(247, 125, 170, 0.1) 0%, rgba(248, 250, 255, 1) 70%);
}

.feature-card:nth-child(4):hover .feature-icon {
    animation: bellShake 1.5s ease-in-out infinite;
    color: #FFD43B; /* 铃铛金色 */
}

.feature-card:nth-child(4):hover {
    animation: jelly 0.7s ease, bellRing 2.5s ease-in-out infinite;
    background: radial-gradient(circle at center, rgba(255, 212, 59, 0.1) 0%, rgba(248, 250, 255, 1) 70%);
}

.feature-card:nth-child(5):hover .feature-icon {
    animation: featherFloat 2.5s ease-in-out infinite;
    color: #78E3A7; /* 羽毛绿色 */
}

.feature-card:nth-child(5):hover {
    animation: jelly 0.7s ease, featherWind 2.5s ease-in-out infinite;
    background: radial-gradient(circle at center, rgba(120, 227, 167, 0.1) 0%, rgba(248, 250, 255, 1) 70%);
}

.feature-card:nth-child(6):hover .feature-icon {
    animation: heartPulse 1.8s ease-in-out infinite;
}

.feature-card:nth-child(6):hover {
    animation: jelly 0.7s ease, heartGlow 2.5s ease-in-out infinite;
    background: radial-gradient(circle at center, rgba(255, 51, 102, 0.1) 0%, rgba(248, 250, 255, 1) 70%);
}

/* 添加伪元素用于额外的粒子效果 */
.feature-card {
    position: relative;
    z-index: 1;
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--border-radius-large);
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.feature-card:nth-child(1):hover::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(146, 129, 236, 0.15), transparent 70%);
}

.feature-card:nth-child(2):hover::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(247, 175, 62, 0.15), transparent 70%);
}

.feature-card:nth-child(3):hover::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(247, 125, 170, 0.15), transparent 70%);
}

.feature-card:nth-child(4):hover::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(255, 212, 59, 0.15), transparent 70%);
}

.feature-card:nth-child(5):hover::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(120, 227, 167, 0.15), transparent 70%);
}

.feature-card:nth-child(6):hover::before {
    opacity: 1;
    background: radial-gradient(circle at center, rgba(255, 51, 102, 0.15), transparent 70%);
}

.feature-card h3 {
    font-size: 1.4rem; /* 增加标题大小 */
    font-weight: 600;
    margin-bottom: 1rem; /* 增加与正文的距离 */
    color: var(--heading-color);
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.feature-card:hover h3 {
    transform: scale(1.1);
    text-shadow: 0 0 8px rgba(122, 162, 247, 0.2);
    animation: jelly 0.6s ease;
}

.feature-card:nth-child(1):hover h3 { color: #7d6dd8; }
.feature-card:nth-child(2):hover h3 { color: #e9a23b; }
.feature-card:nth-child(3):hover h3 { color: #e96e99; }
.feature-card:nth-child(4):hover h3 { color: #edc537; }
.feature-card:nth-child(5):hover h3 { color: #6ad096; }
.feature-card:nth-child(6):hover h3 { color: #e94f79; }

.feature-card p {
    font-size: 1rem;
    color: var(--text-color);
    line-height: 1.7;
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}

.feature-card:hover p {
    transform: translateY(-3px);
    color: var(--heading-color);
}

/* 文本闪烁效果 */
@keyframes textShimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.section-title:hover {
    color: white;
    text-shadow: none;
    animation: glowing 2s ease-in-out infinite, jelly 0.6s ease;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
}

/* 特殊悬停效果 - 波浪文本 改为跳跃效果 */
@keyframes jump {
    0%, 100% { 
        transform: translateY(0) scale(1); 
    }
    50% { 
        transform: translateY(-10px) scale(1.2); 
        color: var(--accent-color);
        text-shadow: 0 5px 15px rgba(255, 255, 255, 0.8);
    }
}

.cta-section h2:hover {
    animation: none;
    transform: none;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.cta-section h2:hover .wave-letter {
    display: inline-block;
    animation: jump 0.7s ease-in-out infinite;
}

.cta-section h2:hover .wave-letter:nth-child(2) {
    animation-delay: 0.05s;
}
.cta-section h2:hover .wave-letter:nth-child(3) {
    animation-delay: 0.1s;
}
.cta-section h2:hover .wave-letter:nth-child(4) {
    animation-delay: 0.15s;
}
.cta-section h2:hover .wave-letter:nth-child(5) {
    animation-delay: 0.2s;
}
.cta-section h2:hover .wave-letter:nth-child(6) {
    animation-delay: 0.25s;
}
.cta-section h2:hover .wave-letter:nth-child(7) {
    animation-delay: 0.3s;
}
.cta-section h2:hover .wave-letter:nth-child(8) {
    animation-delay: 0.35s;
}
.cta-section h2:hover .wave-letter:nth-child(9) {
    animation-delay: 0.4s;
}
.cta-section h2:hover .wave-letter:nth-child(10) {
    animation-delay: 0.45s;
}
.cta-section h2:hover .wave-letter:nth-child(11) {
    animation-delay: 0.5s;
}
.cta-section h2:hover .wave-letter:nth-child(12) {
    animation-delay: 0.55s;
}
.cta-section h2:hover .wave-letter:nth-child(13) {
    animation-delay: 0.6s;
}
.cta-section h2:hover .wave-letter:nth-child(14) {
    animation-delay: 0.65s;
}
.cta-section h2:hover .wave-letter:nth-child(15) {
    animation-delay: 0.7s;
}
.cta-section h2:hover .wave-letter:nth-child(16) {
    animation-delay: 0.75s;
}
.cta-section h2:hover .wave-letter:nth-child(17) {
    animation-delay: 0.8s;
}
.cta-section h2:hover .wave-letter:nth-child(18) {
    animation-delay: 0.85s;
}
.cta-section h2:hover .wave-letter:nth-child(19) {
    animation-delay: 0.9s;
}
.cta-section h2:hover .wave-letter:nth-child(20) {
    animation-delay: 0.95s;
}
.cta-section h2:hover .wave-letter:nth-child(21) {
    animation-delay: 1.0s;
}

/* 特殊文本悬停效果 */
.feature-card h3::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: -100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transition: left 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.feature-card h3:hover::after {
    left: 100%;
}

/* --- GitHub 星星增长曲线 --- */
.github-stats {
    padding: 6rem 0;
    background: linear-gradient(to bottom, var(--surface-color), var(--background-color));
    position: relative;
}

.github-chart-container {
    max-width: 900px;
    margin: 2rem auto;
    background-color: white;
    border-radius: var(--border-radius-large);
    padding: 1rem;
    box-shadow: var(--card-shadow);
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

/* 星星粒子效果 */
.github-chart-container .star-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.8s ease;
    pointer-events: none;
}

.github-chart-container .star-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: #ffcc33;
    border-radius: 50%;
    opacity: 0;
    box-shadow: 0 0 4px 1px rgba(255, 204, 51, 0.4);
    animation-duration: 3s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

/* 创建多种不同颜色的星星 */
.github-chart-container .star-particle:nth-child(3n) {
    background-color: #7aa2f7;
    box-shadow: 0 0 4px 1px rgba(122, 162, 247, 0.4);
}

.github-chart-container .star-particle:nth-child(3n+1) {
    background-color: #f7a97a;
    box-shadow: 0 0 4px 1px rgba(247, 169, 122, 0.4);
}

.github-chart-container:hover .star-particles {
    opacity: 1;
}

.github-chart-container:hover .star-particle {
    animation-name: floatingStar, twinkleStar;
}

/* 为不同类型的星星设置不同的动画 */
.github-chart-container:hover .star-particle:nth-child(4n) {
    animation-name: floatingStarAlt, twinkleStar;
}

.github-chart-container:hover .star-particle:nth-child(5n) {
    animation-name: floatingStarSlow, twinkleStar;
}

@keyframes floatingStar {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    10% {
        transform: translateY(-15px) translateX(5px) scale(1);
        opacity: 0.9;
    }
    50% {
        opacity: 0.6;
        transform: translateY(-50px) translateX(-5px) scale(0.8);
    }
    100% {
        transform: translateY(-100px) translateX(10px) scale(0);
        opacity: 0;
    }
}

@keyframes floatingStarAlt {
    0%, 100% {
        transform: scale(0) rotate(-25deg);
        opacity: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(60, 180, 255, 0.85));
        filter: blur(5px);
    }
    10% {
        transform: scale(0.7) rotate(-5deg);
        opacity: 0.7;
        filter: brightness(1.5) blur(2px);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(0, 200, 255, 0.85));
    }
    15%, 85% {
        transform: scale(1.4) rotate(-10deg) translateX(-3px);
        opacity: 0.95;
        box-shadow: 0 0 15px rgba(0, 170, 255, 0.9), 0 0 25px rgba(255, 255, 255, 0.8), 0 0 40px rgba(0, 170, 255, 0.5);
        filter: brightness(1.8) contrast(1.1) blur(0px);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(0, 170, 255, 0.9));
    }
}

@keyframes floatingStarSlow {
    0% {
        transform: translateY(0) translateX(0) scale(0);
        opacity: 0;
    }
    15% {
        transform: translateY(-5px) translateX(3px) scale(1);
        opacity: 0.8;
    }
    70% {
        opacity: 0.5;
        transform: translateY(-40px) translateX(-3px) scale(0.9);
    }
    100% {
        transform: translateY(-80px) translateX(5px) scale(0);
        opacity: 0;
    }
}

@keyframes twinkleStar {
    0%, 100% {
        opacity: 0;
    }
    10%, 30%, 50%, 70%, 90% {
        opacity: 0.9;
    }
    20%, 40%, 60%, 80% {
        opacity: 0.5;
    }
}

/* 发光边框效果 */
.github-chart-container .glow-border {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--border-radius-large);
    border: 2px solid transparent;
    box-shadow: 0 0 15px rgba(122, 162, 247, 0);
    transition: all 1s ease;
    z-index: -1;
    pointer-events: none;
}

.github-chart-container:hover .glow-border {
    border-color: rgba(122, 162, 247, 0.3);
    box-shadow: 0 0 15px rgba(122, 162, 247, 0.5);
    animation: borderGlow 3s infinite alternate;
}

@keyframes borderGlow {
    0% {
        box-shadow: 0 0 15px rgba(122, 162, 247, 0.5);
    }
    50% {
        box-shadow: 0 0 25px rgba(122, 162, 247, 0.7);
    }
    100% {
        box-shadow: 0 0 15px rgba(122, 162, 247, 0.5);
    }
}

/* 星系背景效果 */
.github-chart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at center, rgba(122, 162, 247, 0.03) 0%, rgba(122, 162, 247, 0.03) 40%, rgba(225, 190, 231, 0.03) 100%);
    opacity: 0;
    z-index: 0;
    transition: opacity 0.8s ease;
    border-radius: var(--border-radius-large);
    background-size: 200% 200%;
}

.github-chart-container::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0) 50%, rgba(122, 162, 247, 0.03) 80%, rgba(122, 162, 247, 0.08) 100%);
    opacity: 0;
    transform: scale(0.5);
    z-index: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
    pointer-events: none;
}

.github-chart-container:hover::before {
    opacity: 1;
    animation: galaxyBackground 15s infinite alternate;
}

.github-chart-container:hover::after {
    opacity: 0.8;
    transform: scale(1) rotate(0deg);
    animation: galaxyGlow 20s infinite linear;
}

@keyframes galaxyBackground {
    0% {
        background-position: 0% 0%;
        background-size: 150% 150%;
    }
    50% {
        background-position: 100% 100%;
        background-size: 200% 200%;
    }
    100% {
        background-position: 0% 0%;
        background-size: 150% 150%;
    }
}

@keyframes galaxyGlow {
    0% {
        transform: scale(0.8) rotate(0deg);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.2) rotate(180deg);
        opacity: 0.8;
    }
    100% {
        transform: scale(0.8) rotate(360deg);
        opacity: 0.5;
    }
}

.github-chart-container:hover {
    box-shadow: var(--card-hover-shadow), 0 0 30px rgba(122, 162, 247, 0.3);
    transform: translateY(-10px) scale(1.02);
    animation: chartPulse 3s infinite alternate;
}

.github-chart-container:hover::before {
    opacity: 1;
    animation: chartBackground 8s infinite alternate;
}

.github-chart-container:hover::after {
    opacity: 0.5;
    transform: scale(1);
    animation: chartGlow 5s infinite alternate;
}

@keyframes chartPulse {
    0% {
        transform: translateY(-10px) scale(1.02);
    }
    50% {
        transform: translateY(-8px) scale(1.03);
    }
    100% {
        transform: translateY(-10px) scale(1.02);
    }
}

@keyframes chartBackground {
    0% {
        background-position: 0% 0%;
        background: linear-gradient(135deg, rgba(122, 162, 247, 0.05), rgba(225, 190, 231, 0.05));
    }
    50% {
        background-position: 100% 100%;
        background: linear-gradient(135deg, rgba(225, 190, 231, 0.08), rgba(122, 162, 247, 0.08));
    }
    100% {
        background-position: 0% 0%;
        background: linear-gradient(135deg, rgba(122, 162, 247, 0.05), rgba(225, 190, 231, 0.05));
    }
}

@keyframes chartGlow {
    0% {
        opacity: 0.3;
        transform: scale(0.8) rotate(0deg);
    }
    50% {
        opacity: 0.5;
        transform: scale(1) rotate(180deg);
    }
    100% {
        opacity: 0.3;
        transform: scale(0.8) rotate(360deg);
    }
}

.github-chart {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-base);
    transition: all 0.5s ease;
    position: relative;
    z-index: 2;
}

.github-chart-container:hover .github-chart {
    transform: scale(1.01);
    filter: drop-shadow(0 0 8px rgba(122, 162, 247, 0.3));
}

.github-buttons {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
}

.github-button {
    display: inline-flex;
    align-items: center;
    padding: 0.8rem 1.8rem;
    background-color: var(--primary-color);
    color: white;
    border-radius: var(--border-radius-pill);
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: var(--button-shadow);
}

.github-button i {
    margin-right: 0.8rem;
    font-size: 1.2rem;
}

.github-button:hover {
    background-color: var(--primary-hover);
    transform: translateY(-3px);
    box-shadow: var(--button-hover-shadow);
    color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .github-chart-container {
        margin: 1.5rem auto;
        padding: 0.5rem;
    }
    
    .github-buttons {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
    
    .github-button {
        width: 80%;
        justify-content: center;
    }
}


/* --- 使用场景区域 --- */
.usage-scenarios {
    padding: 6rem 0;
    background-color: var(--background-color);
    position: relative;
}

.scenarios-container {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    margin-top: 1rem;
}

.scenario-card {
    display: flex;
    align-items: center;
    gap: 4rem; /* 增加左右内容的间距 */
    background-color: var(--surface-color);
    border-radius: var(--border-radius-large);
    padding: 2.5rem; /* 增加内边距 */
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    position: relative;
    margin-bottom: 1rem; /* 卡片底部间距 */
}

.scenario-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--card-hover-shadow);
}

.scenario-card.reverse {
    flex-direction: row-reverse;
}

.scenario-visual {
    flex: 1;
    min-width: 40%;
    border-radius: var(--border-radius-base);
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(122, 162, 247, 0.15);
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.scenario-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--border-radius-large);
    box-shadow: 0 15px 35px rgba(122, 162, 247, 0.2);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    border: 6px solid rgba(255, 255, 255, 0.85);
    transform: perspective(1000px);
    transform-origin: center center;
    z-index: 2;
    user-select: none;
}

.scenario-img::before,
.scenario-img::after {
    content: '';
    position: absolute;
    background: white;
    z-index: 1;
    opacity: 0.4;
    transition: all 0.5s ease;
}

/* 水平丝带 */
.scenario-img::before {
    height: 6px;
    width: 120%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.2);
}

/* 垂直丝带 */
.scenario-img::after {
    width: 6px;
    height: 120%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px 5px rgba(255, 255, 255, 0.2);
}

.scenario-card:hover .scenario-img {
    transform: perspective(1000px);
    box-shadow: 30px 20px 40px rgba(122, 162, 247, 0.25);
    border-color: rgba(255, 255, 255, 1);
}

.scenario-card:hover .scenario-img::before,
.scenario-card:hover .scenario-img::after {
    opacity: 0.8;
    box-shadow: 0 0 20px 8px rgba(255, 255, 255, 0.4);
}

/* 添加脚本控制悬停和点击效果 */
.scenario-content {
    flex: 1;
    padding: 1rem;
}

.scenario-icon {
    width: 70px;
    height: 70px;
    background-color: rgba(122, 162, 247, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.8rem;
    color: var(--primary-color);
    transition: all 0.3s ease;
    transform-origin: center center;
    box-shadow: 0 0 15px rgba(122, 162, 247, 0.1);
}

/* 卡片悬停时图标背景变色 */
.scenario-card:hover .scenario-icon {
    background-color: var(--primary-color);
    color: white;
    /* 不应用动画 */
}

/* 使用场景图标动画效果 */
@keyframes dragonFloat {
    0%, 100% { 
        transform: scale(1.1) translateY(0) rotate(0deg); 
        filter: drop-shadow(0 0 5px rgba(122, 162, 247, 0.3)); 
    }
    25% { 
        transform: scale(1.4) translateY(-10px) rotate(15deg); 
        filter: drop-shadow(0 0 15px rgba(255, 50, 50, 0.7)) brightness(1.5); 
    }
    50% { 
        transform: scale(1.5) translateY(-5px) rotate(-10deg); 
        filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.8)) brightness(1.6); 
    }
    75% { 
        transform: scale(1.4) translateY(-10px) rotate(10deg); 
        filter: drop-shadow(0 0 15px rgba(255, 50, 50, 0.7)) brightness(1.5); 
    }
}

/* 添加新的喷火效果动画 */
@keyframes dragonFireBreath {
    0%, 100% {
        transform: scale(0) translateX(0);
        opacity: 0;
    }
    15% {
        transform: scale(0.3) translateX(15px) translateY(-5px);
        opacity: 0.5;
    }
    40% {
        transform: scale(1.2) translateX(30px) translateY(-10px);
        opacity: 0.9;
    }
    70% {
        transform: scale(0.8) translateX(40px) translateY(-5px);
        opacity: 0.6;
    }
    90% {
        transform: scale(0.3) translateX(50px) translateY(0);
        opacity: 0.2;
    }
}

/* 稍微不同的第二个火焰动画 */
@keyframes dragonFireBreath2 {
    0%, 100% {
        transform: scale(0) translateX(0) translateY(0);
        opacity: 0;
    }
    10% {
        transform: scale(0.4) translateX(10px) translateY(-8px);
        opacity: 0.6;
    }
    35% {
        transform: scale(1.4) translateX(25px) translateY(-15px);
        opacity: 0.95;
    }
    65% {
        transform: scale(1.0) translateX(35px) translateY(-10px);
        opacity: 0.7;
    }
    85% {
        transform: scale(0.5) translateX(45px) translateY(-5px);
        opacity: 0.3;
    }
}

/* 第三个火焰动画变体 */
@keyframes dragonFireBreath3 {
    0%, 100% {
        transform: scale(0) translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }
    20% {
        transform: scale(0.6) translateX(15px) translateY(-3px) rotate(5deg);
        opacity: 0.7;
    }
    45% {
        transform: scale(1.3) translateX(28px) translateY(-8px) rotate(-5deg);
        opacity: 0.9;
    }
    75% {
        transform: scale(0.9) translateX(38px) translateY(-2px) rotate(10deg);
        opacity: 0.5;
    }
    95% {
        transform: scale(0.4) translateX(48px) translateY(5px) rotate(0deg);
        opacity: 0.1;
    }
}

@keyframes firePulse {
    0%, 100% {
        box-shadow: 0 0 10px 2px rgba(255, 50, 0, 0.7), 
                   0 0 20px 5px rgba(255, 120, 0, 0.5),
                   0 0 30px 7px rgba(255, 180, 0, 0.3);
        background: radial-gradient(circle, rgba(255, 50, 0, 0.9) 10%, rgba(255, 120, 0, 0.8) 50%, rgba(255, 180, 0, 0.4) 90%);
    }
    50% {
        box-shadow: 0 0 15px 4px rgba(255, 50, 0, 0.9), 
                   0 0 30px 8px rgba(255, 120, 0, 0.7),
                   0 0 40px 10px rgba(255, 180, 0, 0.5);
        background: radial-gradient(circle, rgba(255, 50, 0, 1) 20%, rgba(255, 120, 0, 0.9) 60%, rgba(255, 180, 0, 0.6) 90%);
    }
}

/* 添加第二种火焰颜色 - 蓝色核心的龙火 */
@keyframes dragonFirePulse {
    0%, 100% {
        box-shadow: 0 0 10px 2px rgba(0, 150, 255, 0.7), 
                   0 0 20px 5px rgba(100, 200, 255, 0.5),
                   0 0 30px 7px rgba(180, 220, 255, 0.3);
        background: radial-gradient(circle, rgba(0, 200, 255, 0.9) 10%, rgba(100, 150, 255, 0.8) 50%, rgba(150, 100, 255, 0.4) 90%);
    }
    50% {
        box-shadow: 0 0 15px 4px rgba(0, 150, 255, 0.9), 
                   0 0 30px 8px rgba(80, 180, 255, 0.7),
                   0 0 40px 10px rgba(160, 200, 255, 0.5);
        background: radial-gradient(circle, rgba(50, 220, 255, 1) 20%, rgba(80, 180, 255, 0.9) 60%, rgba(130, 120, 255, 0.6) 90%);
    }
}

@keyframes boltFlash {
    0%, 100% { 
        transform: scale(1.1); 
        filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5)); 
    }
    10% { 
        transform: scale(1.5) rotate(10deg); 
        filter: drop-shadow(0 0 25px rgba(255, 255, 0, 0.9)) brightness(1.8); 
    }
    20% { 
        transform: scale(1.3) rotate(-5deg); 
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7)) brightness(1.5); 
    }
    30% { 
        transform: scale(1.5) rotate(8deg); 
        filter: drop-shadow(0 0 25px rgba(255, 255, 0, 0.9)) brightness(1.8); 
    }
    40% { 
        transform: scale(1.25) rotate(-5deg); 
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7)) brightness(1.5); 
    }
    50% { 
        transform: scale(1.6) rotate(12deg); 
        filter: drop-shadow(0 0 30px rgba(255, 255, 0, 1)) brightness(2); 
    }
    60% { 
        transform: scale(1.25) rotate(-7deg); 
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7)) brightness(1.5); 
    }
    70% { 
        transform: scale(1.5) rotate(8deg); 
        filter: drop-shadow(0 0 25px rgba(255, 255, 0, 0.9)) brightness(1.8); 
    }
    80% { 
        transform: scale(1.25) rotate(-5deg); 
        filter: drop-shadow(0 0 15px rgba(255, 215, 0, 0.7)) brightness(1.5); 
    }
    90% { 
        transform: scale(1.35) rotate(6deg); 
        filter: drop-shadow(0 0 20px rgba(255, 255, 0, 0.8)) brightness(1.6); 
    }
}

@keyframes presentationPulse {
    0%, 100% { 
        transform: scale(1.1) rotate(0deg); 
        filter: drop-shadow(0 0 5px rgba(122, 162, 247, 0.3)); 
    }
    20% { 
        transform: scale(1.4) translateY(-8px) rotate(10deg); 
        filter: drop-shadow(0 0 18px rgba(0, 150, 255, 0.7)) brightness(1.5); 
    }
    40% { 
        transform: scale(1.3) translateY(5px) rotate(-8deg); 
        filter: drop-shadow(0 0 12px rgba(0, 150, 255, 0.6)) brightness(1.4); 
    }
    60% { 
        transform: scale(1.5) translateY(-10px) rotate(12deg); 
        filter: drop-shadow(0 0 20px rgba(0, 100, 255, 0.8)) brightness(1.6); 
    }
    80% { 
        transform: scale(1.3) translateY(5px) rotate(-8deg); 
        filter: drop-shadow(0 0 12px rgba(0, 150, 255, 0.6)) brightness(1.4); 
    }
}

/* 修改为只在图标悬停时应用动画 */
/* 移除卡片悬停时的图标动画 */
.scenario-card:nth-child(1):hover .scenario-icon {
    background-color: rgba(255, 100, 100, 0.2);
    color: #ff3838;
}

.scenario-card:nth-child(2):hover .scenario-icon {
    background-color: rgba(255, 215, 0, 0.2);
    color: #ffb700;
}

.scenario-card:nth-child(3):hover .scenario-icon {
    background-color: rgba(0, 150, 255, 0.2);
    color: #0096ff;
}

/* 添加只在图标悬停时的动画效果 */
.scenario-card:nth-child(1) .scenario-icon:hover {
    animation: dragonFloat 2s infinite;
    position: relative;
}

.scenario-card:nth-child(2) .scenario-icon:hover {
    animation: boltFlash 1s infinite;
    background-color: rgba(255, 215, 0, 0.15);
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: visible;
}

.scenario-card:nth-child(2) .scenario-icon:hover i {
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) brightness(1.5);
    animation: iconPulse 0.5s ease-in-out infinite alternate;
}

@keyframes iconPulse {
    0% {
        transform: scale(1);
        filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)) brightness(1.5);
    }
    100% {
        transform: scale(1.2);
        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 1)) brightness(2);
    }
}

.scenario-card:nth-child(3) .scenario-icon:hover {
    animation: presentationPulse 1.8s infinite;
}

.scenario-content h3 {
    font-size: 1.6rem; /* 增加标题大小 */
    font-weight: 600;
    margin-bottom: 1.2rem; /* 增加与正文的距离 */
    color: var(--heading-color);
    transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
    cursor: pointer;
}

.scenario-content h3:hover {
    color: var(--primary-color);
    transform: scale(1.03);
    text-shadow: 0 0 10px rgba(122, 162, 247, 0.3);
    animation: jelly 0.6s ease;
}

.scenario-content p {
    color: var(--text-color);
    line-height: 1.8; /* 增加行高 */
    font-size: 1.05rem; /* 稍微增加字体大小 */
    transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    padding: 0.6rem 1rem;
    cursor: pointer;
    border-radius: 8px;
    z-index: 1;
    overflow: hidden;
}

.scenario-content p::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(122, 162, 247, 0.03), transparent);
    z-index: -1;
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.scenario-content p:hover {
    color: var(--heading-color);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 20px rgba(122, 162, 247, 0.1);
    letter-spacing: 0.3px;
}

.scenario-content p:hover::before {
    transform: translateX(100%);
}

/* 为每个场景卡片添加不同颜色的文字效果 */
.scenario-card:nth-child(1) .scenario-content p:hover {
    text-shadow: 0 0 10px rgba(255, 100, 100, 0.3);
    color: #d03838;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 100, 100, 0.08));
    border-left: 3px solid rgba(255, 100, 100, 0.5);
}

.scenario-card:nth-child(2) .scenario-content p:hover {
    text-shadow: 0 0 10px rgba(255, 183, 0, 0.3);
    color: #f29500;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 183, 0, 0.08));
    border-left: 3px solid rgba(255, 183, 0, 0.5);
}

.scenario-card:nth-child(3) .scenario-content p:hover {
    text-shadow: 0 0 10px rgba(0, 150, 255, 0.3);
    color: #0078d0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(0, 150, 255, 0.08));
    border-left: 3px solid rgba(0, 150, 255, 0.5);
}

/* 流光效果 */
@keyframes textFlowLight {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

@keyframes textPulse {
    0%, 100% {
        opacity: 0.8;
        transform: scaleX(1);
    }
    50% {
        opacity: 1;
        transform: scaleX(1.05);
    }
}

.scenario-content p::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    opacity: 0;
    transform: scaleX(0.8) translateY(10px);
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    border-radius: 2px;
}

.scenario-card:nth-child(1) .scenario-content p::after {
    background: linear-gradient(90deg, transparent, rgba(255, 100, 100, 0.7), transparent);
    box-shadow: 0 0 10px rgba(255, 100, 100, 0.4);
}

.scenario-card:nth-child(2) .scenario-content p::after {
    background: linear-gradient(90deg, transparent, rgba(255, 183, 0, 0.7), transparent);
    box-shadow: 0 0 10px rgba(255, 183, 0, 0.4);
}

.scenario-card:nth-child(3) .scenario-content p::after {
    background: linear-gradient(90deg, transparent, rgba(0, 150, 255, 0.7), transparent);
    box-shadow: 0 0 10px rgba(0, 150, 255, 0.4);
}

.scenario-content p:hover::after {
    opacity: 1;
    transform: scaleX(1) translateY(0);
    animation: textPulse 2s ease-in-out infinite;
}

/* 添加文字悬浮时的微妙立体感 */
.scenario-card:nth-child(1) .scenario-content p:hover {
    text-shadow: 
        0 0 5px rgba(255, 100, 100, 0.3),
        1px 1px 2px rgba(255, 100, 100, 0.1),
        -1px -1px 2px rgba(255, 255, 255, 0.8);
}

.scenario-card:nth-child(2) .scenario-content p:hover {
    text-shadow: 
        0 0 5px rgba(255, 183, 0, 0.3),
        1px 1px 2px rgba(255, 183, 0, 0.1),
        -1px -1px 2px rgba(255, 255, 255, 0.8);
}

.scenario-card:nth-child(3) .scenario-content p:hover {
    text-shadow: 
        0 0 5px rgba(0, 150, 255, 0.3),
        1px 1px 2px rgba(0, 150, 255, 0.1),
        -1px -1px 2px rgba(255, 255, 255, 0.8);
}

/* 添加逐字动画效果 */
@keyframes letterWave {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3px);
    }
}

.scenario-content p:hover span {
    display: inline-block;
    animation: none;
}

.scenario-content p span:nth-child(2n) {
    animation-delay: 0;
}

.scenario-content p span:nth-child(3n) {
    animation-delay: 0;
}

.scenario-content p span:nth-child(4n) {
    animation-delay: 0;
}

/* 响应式调整 - 使用场景 */
@media (max-width: 992px) {
    .scenario-card,
    .scenario-card.reverse {
        flex-direction: column;
        padding: 1.5rem;
    }
    
    .scenario-visual {
        width: 100%;
        margin-bottom: 1.5rem;
        min-height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .scenario-img {
        max-width: 80%;
        transform: perspective(1000px);
    }
    
    .scenario-content {
        padding: 0;
    }
}

@media (max-width: 768px) {
    .usage-scenarios {
        padding: 4rem 0;
    }
    
    .scenarios-container {
        gap: 2.5rem;
    }
    
    .scenario-icon {
        width: 60px;
        height: 60px;
        font-size: 1.6rem;
    }
    
    .scenario-content h3 {
        font-size: 1.3rem;
    }
    
    .scenario-visual {
        min-height: 180px;
    }
    
    .scenario-img {
        max-width: 90%;
    }
}

@media (max-width: 480px) {
    .scenario-icon {
        width: 50px;
        height: 50px;
        font-size: 1.4rem;
    }
}


/* --- CTA 区域 --- */
.cta-section {
    padding: 6.5rem 0; /* 增加垂直空间 */
    background-image: linear-gradient(60deg, var(--primary-color) 0%, var(--accent-color) 100%);
    color: white;
    text-align: center;
}
.cta-section h2 {
    font-size: 2.5rem; /* 增加标题大小 */
    color: white;
    margin-bottom: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.3s ease, text-shadow 0.3s ease;
    letter-spacing: -0.01em; /* 微调字间距 */
    max-width: 860px; /* 限制宽度，保持居中 */
    margin-left: auto;
    margin-right: auto;
}
.cta-section h2:hover {
    transform: scale(1.02);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
    animation: jelly 0.6s ease;
}
.cta-section p {
    font-size: 1.15rem;
    margin-bottom: 2.5rem;
    opacity: 0.95;
    cursor: pointer;
    transition: opacity 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}
.cta-section p:hover {
    opacity: 1;
    transform: translateY(-2px);
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
}
.cta-section .cta-button.primary { /* 深色背景上的按钮样式 */
    background-color: white;
    color: var(--primary-color); /* 白色按钮上的蓝色文本 */
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}
.cta-section .cta-button.primary:hover {
    background-color: #f5faff; /* 悬停时的浅蓝色调 */
    color: var(--accent-color); /* 悬停时的粉色文本 */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2), 0 0 15px rgba(255, 255, 255, 0.5); /* 增强发光效果 */
    transform: translateY(-3px);
    animation: jelly 0.6s ease;
}
.cta-section .cta-button.primary i {
    color: var(--accent-color); /* 粉色图标 */
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.cta-section .cta-button.primary:hover i {
    color: var(--primary-color); /* 悬停时的蓝色图标 */
    transform: scale(1.2) rotate(10deg);
}


/* --- 页脚 --- */
.main-footer {
    padding: 3.5rem 0 3rem; /* 增加垂直空间 */
    background-color: #e6e9ff;
    text-align: center;
    color: var(--secondary-color);
    font-size: 0.9rem;
    border-top: 1px solid var(--border-color);
    line-height: 1.8; /* 增加行高 */
}
.main-footer p {
    margin-bottom: 0.5rem;
    transition: color 0.3s ease, transform 0.3s ease;
    cursor: pointer;
}
.main-footer p:hover {
    color: var(--primary-color);
    transform: translateY(-1px);
}
.main-footer a {
    color: var(--primary-color); /* 页脚中的蓝色链接 */
    font-weight: 500;
}
.main-footer a:hover {
    color: var(--accent-color); /* 悬停时为粉色 */
}
.footer-links {
    margin-top: 1rem;
}
.footer-links a {
    margin: 0 0.8rem;
    display: inline-block;
}

/* --- 响应式调整 --- */
@media (max-width: 992px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 1.5rem; /* 减少间距，更加紧凑 */
    }
    .hero-text {
        margin-bottom: 3rem;
        order: 2; /* 移动端上文本在图像下方 */
    }
    .hero-visual {
        order: 1;
        max-width: 450px; /* 限制图像大小 */
        margin-left: auto;
        margin-right: auto;
    }
    .hero-title {
        font-size: 3rem;
    }
    .hero-subtitle {
        font-size: 1.5rem;
    }
    .hero-description {
        margin-left: auto;
        margin-right: auto;
    }
    .background-shapes {
        /* 可选择在小屏幕上减少或隐藏形状 */
        opacity: 0.7;
    }
    .shape {
       /* opacity: 0.05; */ /* 使其更加微妙 */
    }
}

@media (max-width: 768px) {
    html {
        font-size: 15px;
    }
    .main-header .container {
        flex-direction: column;
        gap: 1rem;
    }
    .nav-links {
        gap: 0.8rem 1rem; /* 调整行和列间距 */
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 1rem; /* 添加内边距防止触及边缘 */
    }
    .hero {
        padding: 3rem 0 4rem; /* 在移动端进一步减少内边距 */
    }
    .hero-title {
        font-size: 2.6rem;
    }
    .hero-subtitle {
        font-size: 1.4rem;
    }
    .section-title {
        font-size: 2.2rem;
    }
     .features {
        padding: 4rem 0;
    }
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
    }
    .cta-section {
        padding: 4rem 0;
    }
    .cta-section h2 {
        font-size: 2rem;
    }
    .cta-section p {
        font-size: 1.05rem;
    }
}

/* --- 博客页面样式 --- */
.page-header {
    padding: 5rem 0 3rem;
    background-image: linear-gradient(145deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
    text-align: center;
    color: var(--heading-color);
}

.page-header h1 {
    font-size: 2.8rem;
    margin-bottom: 1rem;
}

.page-header p {
    font-size: 1.2rem;
    color: var(--secondary-color);
    max-width: 600px;
    margin: 0 auto;
}

/* 博客文章列表 */
.blog-section {
    padding: 5rem 0;
    background-color: var(--surface-color);
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    margin-bottom: 3rem;
}

.blog-card {
    background-color: #f8faff;
    border-radius: var(--border-radius-large);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid transparent;
}

.blog-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--card-hover-shadow);
    border-color: rgba(122, 162, 247, 0.2);
}

.blog-image {
    height: 220px;
    overflow: hidden;
}

.blog-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .blog-image img {
    transform: scale(1.05);
}

.blog-content {
    padding: 1.8rem 2rem 2rem;
}

.blog-meta {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    font-size: 0.85rem;
    color: var(--secondary-color);
}

.blog-meta i {
    margin-right: 0.3rem;
    color: var(--accent-color);
}

.blog-content h2 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.blog-content h2 a {
    color: var(--heading-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.blog-content h2 a:hover {
    color: var(--primary-color);
}

.blog-content p {
    color: var(--text-color);
    margin-bottom: 1.5rem;
    line-height: 1.65;
}

.read-more {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.read-more i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.read-more:hover {
    color: var(--accent-color);
}

.read-more:hover i {
    transform: translateX(3px);
}

/* 分页 */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.pagination a, .pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 0.8rem;
    border-radius: var(--border-radius-base);
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.current-page {
    background-color: var(--primary-color);
    color: white;
}

.page-number {
    background-color: #f0f3ff;
    color: var(--text-color);
}

.page-number:hover {
    background-color: rgba(122, 162, 247, 0.2);
    color: var(--primary-color);
}

.next-page {
    background-color: #f0f3ff;
    color: var(--text-color);
    padding: 0 1.2rem;
    margin-left: 0.5rem;
}

.next-page i {
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
}

.next-page:hover {
    background-color: rgba(122, 162, 247, 0.2);
    color: var(--primary-color);
}

.next-page:hover i {
    transform: translateX(3px);
}

/* 订阅区域 */
.subscribe-section {
    padding: 4rem 0 5rem;
    background-color: #f4f6ff;
}

.subscribe-box {
    background: white;
    max-width: 650px;
    margin: 0 auto;
    padding: 3rem;
    border-radius: var(--border-radius-large);
    text-align: center;
    box-shadow: 0 10px 30px rgba(122, 162, 247, 0.12);
    border: 1px solid var(--border-color);
}

.subscribe-box h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.subscribe-box p {
    color: var(--secondary-color);
    margin-bottom: 2rem;
}

.subscribe-form {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
}

.subscribe-form input {
    flex: 1;
    padding: 0.8rem 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
    font-size: 1rem;
    font-family: var(--font-family);
}

.subscribe-form input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(122, 162, 247, 0.2);
}

.subscribe-button {
    background-color: var(--accent-color);
    color: white;
    border: none;
    border-radius: var(--border-radius-pill);
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-family);
    display: inline-flex;
    align-items: center;
}

.subscribe-button i {
    margin-left: 0.5rem;
}

.subscribe-button:hover {
    background-color: var(--accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(247, 125, 170, 0.3);
}

.privacy-note {
    font-size: 0.85rem;
    color: var(--secondary-color);
    opacity: 0.8;
}

/* 响应式调整 - 博客页面 */
@media (max-width: 992px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .page-header {
        padding: 4rem 0 2.5rem;
    }
    
    .page-header h1 {
        font-size: 2.4rem;
    }
}

@media (max-width: 768px) {
    .blog-image {
        height: 180px;
    }
    
    .blog-content {
        padding: 1.5rem;
    }
    
    .blog-content h2 {
        font-size: 1.3rem;
    }
    
    .subscribe-box {
        padding: 2rem 1.5rem;
    }
    
    .subscribe-form {
        flex-direction: column;
    }
    
    .subscribe-button {
        width: 100%;
        justify-content: center;
    }
    
    .page-header h1 {
        font-size: 2rem;
    }
    
    .page-header p {
        font-size: 1.05rem;
    }
}

/* --- 果冻效果动画 --- */
@keyframes jelly {
    0% { transform: scale(1); }
    15% { transform: scale(1.05, 0.95); }
    30% { transform: scale(0.92, 1.08); }
    45% { transform: scale(1.06, 0.94); }
    60% { transform: scale(0.95, 1.03); }
    75% { transform: scale(1.02, 0.98); }
    100% { transform: scale(1); }
}

/* 全局段落悬停效果 */
p {
    transition: color 0.3s ease, transform 0.3s ease;
}

p:hover {
    color: var(--heading-color);
    transform: translateY(-1px);
}

/* 按钮内文本的悬停效果 */
.cta-button span {
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

.cta-button:hover span {
    transform: scale(1.05);
    animation: jelly 0.4s ease;
}

/* 按钮文字打字机效果 */
@keyframes typing {
    0%, 100% { border-right-color: transparent; }
    50% { border-right-color: currentColor; }
}

.cta-button:hover span {
    position: relative;
    display: inline-block;
    transform: none;
    animation: typing 1s step-end infinite;
    border-right: 2px solid;
    padding-right: 3px;
}

/* 闪烁光标效果 */
.cta-button.primary:hover span {
    border-right-color: white;
}

.cta-button.secondary:hover span {
    border-right-color: var(--primary-color);
}

/* 修改特性卡片标题光扫过效果的速度 */
.feature-card h3::after {
    transition: left 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 添加文字悬停时的立体效果 */
.hero-subtitle:hover {
    text-shadow: 
        1px 1px 0 rgba(255, 255, 255, 0.8),
        2px 2px 0 rgba(247, 125, 170, 0.6),
        3px 3px 0 rgba(247, 125, 170, 0.4),
        4px 4px 8px rgba(122, 162, 247, 0.3);
    transform: translate(-2px, -2px);
    color: var(--accent-color);
}

/* 可爱的表情符号样式 */
.cute-emoji {
    display: inline-block;
    font-size: 1.1em;
    vertical-align: middle;
    opacity: 0.85;
    transition: all 0.4s ease;
    transform-origin: center;
}

.hero-subtitle:hover .cute-emoji {
    animation: bounce 1s ease infinite;
    opacity: 1;
    color: var(--accent-color);
}

@keyframes bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-8px) scale(1.2) rotate(-5deg); }
    50% { transform: translateY(0) scale(1.1); }
    70% { transform: translateY(-4px) scale(1.15) rotate(5deg); }
}

/* 改进的hero-subtitle动效，让整体更协调 */
.hero-subtitle:hover {
    animation: cuteWiggle 3s ease-in-out infinite;
    text-shadow: 
        0 0 8px rgba(255, 150, 200, 0.7),
        0 0 15px rgba(161, 143, 255, 0.5);
    letter-spacing: 1px;
    transform: none;
}

/* 调整为更二次元风格的动效 */
@keyframes animeWiggle {
    0%, 100% { 
        transform: translateY(0) scale(1); 
        color: #ff85b1; /* 粉色 */
    }
    25% { 
        transform: translateY(-5px) rotate(-2deg) scale(1.03); 
        color: #ffac59; /* 橙色 */
    }
    50% { 
        transform: translateY(0) scale(1.05); 
        color: #a18fff; /* 紫色 */
    }
    75% { 
        transform: translateY(-3px) rotate(2deg) scale(1.03); 
        color: #5ccefa; /* 蓝色 - 二次元经典色 */
    }
}

/* 调整二次元风格副标题 */
.hero-subtitle {
    font-size: 1.8rem;
    color: var(--primary-color);
    margin-bottom: 1.5rem;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.5s ease;
    position: relative;
    letter-spacing: -0.5px; /* 略微紧凑的字间距，更符合二次元风格 */
}

.hero-subtitle:hover {
    animation: animeWiggle 3s ease-in-out infinite;
    text-shadow: 
        0 0 10px rgba(255, 133, 177, 0.7), /* 粉色辉光 */
        0 0 20px rgba(92, 206, 250, 0.5); /* 蓝色辉光 */
    letter-spacing: 0;
    transform: none;
}

/* 改进二次元表情符号样式 */
.cute-emoji {
    display: inline-block;
    font-size: 1.3em;
    vertical-align: middle;
    opacity: 0.9;
    transition: all 0.4s ease;
    transform-origin: center;
    margin-left: 5px;
}

.hero-subtitle:hover .cute-emoji {
    animation: animeBounce 1.2s ease infinite;
    opacity: 1;
    color: #ff85b1; /* 粉色 */
}

@keyframes animeBounce {
    0%, 100% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-10px) scale(1.3) rotate(-8deg); }
    40% { transform: translateY(0) scale(1.2); }
    60% { transform: translateY(-5px) scale(1.25) rotate(8deg); }
    70% { transform: translateY(0) scale(1.2); }
    80% { transform: translateY(-3px) scale(1.15); }
}

/* 添加更多二次元风格的装饰元素 */
.hero-subtitle::before,
.hero-subtitle::after {
    content: '★';
    position: absolute;
    opacity: 0;
    transition: all 0.5s ease;
    font-size: 1.3rem;
    color: #ffac59; /* 橙色星星 */
}

.hero-subtitle::before {
    left: -25px;
    top: 40%;
    transform: translateY(-50%);
}

.hero-subtitle::after {
    right: -25px;
    top: 40%;
    transform: translateY(-50%);
}

.hero-subtitle:hover::before,
.hero-subtitle:hover::after {
    opacity: 1;
    animation: starTwinkle 1.5s ease-in-out infinite alternate;
}

@keyframes starTwinkle {
    from { 
        transform: translateY(-50%) scale(1) rotate(0deg); 
        color: #ffac59;
    }
    to { 
        transform: translateY(-50%) scale(1.5) rotate(72deg); 
        color: #ffdd59;
    }
}

/* 描述文字的单词效果 */
.desc-word {
    display: inline-block;
    margin-right: 5px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    opacity: 0.8;
    transform-origin: center bottom;
}

.hero-description:hover .desc-word {
    opacity: 1;
}

/* 描述文字悬停效果 - 波浪动画 */
@keyframes wordFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); 
    }
}

/* 使描述文字在悬停时产生波浪式的动画，每个词有延迟 */
.hero-description:hover .desc-word:nth-child(1) { animation: wordFloat 1s ease-in-out 0.0s infinite; }
.hero-description:hover .desc-word:nth-child(2) { animation: wordFloat 1s ease-in-out 0.1s infinite; }
.hero-description:hover .desc-word:nth-child(3) { animation: wordFloat 1s ease-in-out 0.2s infinite; }
.hero-description:hover .desc-word:nth-child(4) { animation: wordFloat 1s ease-in-out 0.3s infinite; }
.hero-description:hover .desc-word:nth-child(5) { animation: wordFloat 1s ease-in-out 0.4s infinite; }
.hero-description:hover .desc-word:nth-child(6) { animation: wordFloat 1s ease-in-out 0.5s infinite; }
.hero-description:hover .desc-word:nth-child(7) { animation: wordFloat 1s ease-in-out 0.6s infinite; }
.hero-description:hover .desc-word:nth-child(8) { animation: wordFloat 1s ease-in-out 0.7s infinite; }
.hero-description:hover .desc-word:nth-child(9) { animation: wordFloat 1s ease-in-out 0.8s infinite; }

/* 猫咪相关词汇特殊动画 */
@keyframes catMove {
    0%, 100% { 
        transform: translateY(0) rotate(0deg); 
        color: var(--text-color);
    }
    25% { 
        transform: translateY(-12px) rotate(-5deg); 
        color: #ffac59; /* 橙色 - 猫咪色 */
    }
    75% { 
        transform: translateY(-6px) rotate(5deg); 
        color: #ffac59; 
    }
}

.hero-description:hover .cat-word {
    animation: catMove 1.5s ease-in-out infinite !important;
    text-shadow: 0 0 8px rgba(255, 172, 89, 0.5);
}

/* 突出词汇特殊动画 */
@keyframes empPulse {
    0%, 100% { 
        transform: scale(1); 
        color: var(--text-color);
    }
    50% { 
        transform: scale(1.2); 
        color: var(--accent-color);
        text-shadow: 0 0 10px rgba(247, 125, 170, 0.6);
    }
}

.hero-description:hover .emp-word {
    animation: empPulse 1s ease-in-out infinite !important;
}

/* 修改hero-description的hover样式 */
.hero-description:hover {
    color: var(--text-color);
    transform: none;
    cursor: default;
}

/* 优化的响应式设计 */
@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 90%;
    }
    
    html {
        font-size: 15px;
    }
    
    .hero-content {
        flex-direction: column;
        text-align: center;
        gap: 2rem;
    }
    
    .hero-text {
        margin-bottom: 0;
        order: 2;
        flex: 1 1 100%;
        max-width: 100%;
    }
    
    .hero-visual {
        order: 1;
        max-width: 480px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .hero-title {
        font-size: 3.2rem;
    }
    
    .hero-subtitle {
        font-size: 1.6rem;
    }
    
    .hero-description {
        margin-left: auto;
        margin-right: auto;
        max-width: 600px;
        text-align: center;
    }
    
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2.5rem;
    }
    
    .scenario-card,
    .scenario-card.reverse {
        flex-direction: column;
        padding: 2rem;
        gap: 2rem;
    }
    
    .scenario-visual {
    width: 100%;
        margin-bottom: 1rem;
        min-height: 250px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    .scenario-img {
        max-width: 85%;
    }
    
    .scenario-content {
        padding: 0 1rem;
        text-align: center;
    }
    
    .section-title {
        font-size: 2.4rem;
    }
    
    .section-subtitle {
        font-size: 1.1rem;
        margin-bottom: 3.5rem;
    }
    
    .cta-section h2 {
        font-size: 2.2rem;
    }
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }
    
    .main-header .container {
        flex-direction: column;
        gap: 1rem;
        padding: 0.8rem 1rem;
    }
    
    .nav-links {
        gap: 1rem 1.5rem;
        flex-wrap: wrap;
        justify-content: center;
        padding: 0.5rem 0;
    }
    
    .hero {
        padding: 4rem 0;
    }
    
    .hero-title {
        font-size: 2.8rem;
    }
    
    .hero-subtitle {
        font-size: 1.4rem;
    }
    
    .hero-description {
        font-size: 1.05rem;
        padding: 0.5rem 0;
    }
    
    .desc-word {
        margin-right: 3px;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .feature-card {
        padding: 2rem 1.5rem;
    }
    
    .cta-section {
        padding: 4rem 0;
    }
    
    .cta-section h2 {
        font-size: 2rem;
    }
    
    .cta-section p {
        font-size: 1.05rem;
        margin-bottom: 2rem;
    }
    
    .cta-button.large {
        padding: 0.9rem 2rem;
        font-size: 1.1rem;
        width: 80%; /* 在移动设备上扩大按钮宽度 */
        max-width: 300px;
    }
    
    .section-title {
        font-size: 2.2rem;
    }
    
    .section-subtitle {
        font-size: 1.05rem;
        margin-bottom: 2.5rem;
    }
    
    .usage-scenarios {
        padding: 4rem 0;
    }
    
    .scenarios-container {
        gap: 2.5rem;
    }
}

@media (max-width: 480px) {
    html {
        font-size: 13px;
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
    
    .hero-subtitle {
        font-size: 1.3rem;
    }
    
    .cta-button {
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        display: block;
        margin: 1rem auto;
        width: 90%;
        max-width: 280px;
    }
    
    .feature-icon {
        font-size: 2.5rem;
    }
    
    .section-title {
        font-size: 2rem;
    }
    
    .cta-section h2 {
        font-size: 1.8rem;
    }
    
    .main-footer {
        padding: 2.5rem 0 2rem;
    }
    
    .hero {
        padding: 2.5rem 0 3.5rem; /* 在更小屏幕上进一步减少内边距 */
    }
    
    .hero-title {
        font-size: 2.5rem;
    }
}

.scenario-content h3 {
    font-size: 1.6rem; /* 增加标题大小 */
    font-weight: 600;
    margin-bottom: 1.2rem; /* 增加与正文的距离 */
    color: var(--heading-color);
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 4px;
}

.scenario-content h3::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    transition: width 0.4s ease-in-out;
    z-index: -1;
}

/* 游戏场景标题效果 */
@keyframes gameTitle {
    0% { text-shadow: 0 0 5px rgba(255, 0, 0, 0.3); }
    25% { text-shadow: 0 0 15px rgba(255, 0, 0, 0.5), 0 0 5px rgba(255, 100, 0, 0.3); }
    50% { text-shadow: 0 0 25px rgba(255, 0, 0, 0.7), 0 0 15px rgba(255, 100, 0, 0.5), 0 0 5px rgba(255, 255, 0, 0.3); }
    75% { text-shadow: 0 0 15px rgba(255, 0, 0, 0.5), 0 0 5px rgba(255, 100, 0, 0.3); }
    100% { text-shadow: 0 0 5px rgba(255, 0, 0, 0.3); }
}

.scenario-card:nth-child(1) .scenario-content h3:hover {
    color: #ff3838;
    background-color: rgba(255, 56, 56, 0.08);
    animation: gameTitle 2s infinite;
    transform: perspective(200px) rotateX(10deg);
    text-shadow: 0 2px 4px rgba(255, 56, 56, 0.4);
    box-shadow: 0 5px 15px rgba(255, 56, 56, 0.2);
    letter-spacing: 1px;
}

.scenario-card:nth-child(1) .scenario-content h3::before {
    background: linear-gradient(90deg, transparent, #ff3838, transparent);
}

.scenario-card:nth-child(1) .scenario-content h3:hover::before {
    width: 100%;
}

/* 自动打开软件标题效果 */
@keyframes boltTitle {
    0% { transform: translateY(0); filter: brightness(1); }
    50% { transform: translateY(-2px); filter: brightness(1.1); }
    100% { transform: translateY(0); filter: brightness(1); }
}

.scenario-card:nth-child(2) .scenario-content h3:hover {
    color: #e87200;
    animation: none;
    text-shadow: 0 0 10px rgba(232, 114, 0, 0.2);
    background: linear-gradient(90deg, rgba(232, 114, 0, 0.1), rgba(232, 114, 0, 0.0));
    border-right: 2px solid rgba(232, 114, 0, 0.5);
    border-left: 2px solid rgba(232, 114, 0, 0.5);
    padding-left: 1rem;
    padding-right: 1rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    transform: translateY(-2px);
}

.scenario-card:nth-child(2) .scenario-content h3:hover::after {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}

/* PPT演示标题效果 */
@keyframes pptTitle {
    0% { background-position: 0% 50%; transform: perspective(500px) rotateY(0deg) translateZ(0); filter: brightness(1); }
    25% { background-position: 33% 50%; transform: perspective(500px) rotateY(2deg) translateZ(5px); filter: brightness(1.1); }
    50% { background-position: 66% 50%; transform: perspective(500px) rotateY(0deg) translateZ(0); filter: brightness(1); }
    75% { background-position: 100% 50%; transform: perspective(500px) rotateY(-2deg) translateZ(5px); filter: brightness(1.1); }
    100% { background-position: 0% 50%; transform: perspective(500px) rotateY(0deg) translateZ(0); filter: brightness(1); }
}

@keyframes slideIcon {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50% { transform: translateY(-50%) translateX(3px); }
}

.scenario-card:nth-child(3) .scenario-content h3:hover {
    color: transparent;
    background: linear-gradient(90deg, #1e40af, #3b82f6, #60a5fa, #93c5fd, #60a5fa, #3b82f6, #1e40af);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    animation: pptTitle 4s ease-in-out infinite;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.2), 0 0 20px rgba(59, 130, 246, 0.1);
    transform: translateY(-3px);
    letter-spacing: 0.8px;
    position: relative;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.scenario-card:nth-child(3) .scenario-content h3::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, #3b82f6, #60a5fa, #3b82f6, transparent);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.scenario-card:nth-child(3) .scenario-content h3::after {
    content: '▶';
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    color: #3b82f6;
    font-size: 0.7em;
    opacity: 0;
    transition: all 0.3s ease;
    text-shadow: 0 0 5px rgba(59, 130, 246, 0.5);
}

.scenario-card:nth-child(3) .scenario-content h3:hover::before {
    transform: scaleX(1);
    box-shadow: 0 2px 10px rgba(59, 130, 246, 0.3);
}

.scenario-card:nth-child(3) .scenario-content h3:hover::after {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    right: -25px;
    animation: slideIcon 1s ease-in-out infinite;
}

/* 添加龙喷火的伪元素 */
.scenario-card:nth-child(1) .scenario-icon {
    position: relative;
    overflow: visible;
}

.scenario-card:nth-child(1) .scenario-icon::before,
.scenario-card:nth-child(1) .scenario-icon::after,
.scenario-card:nth-child(1) .scenario-icon .fire-element {
    content: "";
    position: absolute;
    transform: scale(0);
        opacity: 0;
    pointer-events: none;
    transform-origin: left center;
}

.scenario-card:nth-child(1) .scenario-icon::before {
    top: 45%;
    left: 60%;
    width: 16px;
    height: 16px;
    border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
    z-index: -1;
}

.scenario-card:nth-child(1) .scenario-icon::after {
    top: 40%;
    left: 55%;
    width: 12px;
    height: 12px;
    border-radius: 60% 40% 60% 40% / 40% 60% 40% 60%;
    z-index: -2;
}

/* 添加第三个火焰元素 */
.scenario-card:nth-child(1) .scenario-icon .fire-element {
    display: none;
}

.scenario-card:nth-child(1) .scenario-icon:hover .fire-element {
    display: block;
    top: 55%;
    left: 58%;
    width: 14px;
    height: 14px;
    border-radius: 40% 60% 30% 70% / 60% 30% 70% 40%;
    z-index: -3;
    animation: dragonFireBreath3 1.1s ease-out 0.15s infinite, firePulse 0.55s ease-in-out infinite;
}

.scenario-card:nth-child(1) .scenario-icon:hover::before {
    animation: dragonFireBreath 1.2s ease-out infinite, firePulse 0.6s ease-in-out infinite;
}

.scenario-card:nth-child(1) .scenario-icon:hover::after {
    animation: dragonFireBreath2 0.9s ease-out 0.1s infinite, dragonFirePulse 0.5s ease-in-out infinite;
}

.scenario-card:nth-child(2) .scenario-icon:hover {
    animation: boltFlash 1s infinite;
}

/* 添加闪电伪元素效果 */
.scenario-card:nth-child(2) .scenario-icon {
    position: relative;
    overflow: visible;
}

.scenario-card:nth-child(2) .scenario-icon::before,
.scenario-card:nth-child(2) .scenario-icon::after {
    content: "";
    position: absolute;
    transform: scale(0);
    opacity: 0;
    pointer-events: none;
    z-index: -1;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(60, 200, 255, 0.85));
    clip-path: polygon(30% 0%, 50% 40%, 38% 40%, 60% 100%, 25% 50%, 45% 50%, 30% 0%);
    filter: drop-shadow(0 0 12px rgba(0, 180, 255, 0.9)) drop-shadow(0 0 20px rgba(255, 255, 255, 0.8));
}

/* 第一个闪电伪元素 */
.scenario-card:nth-child(2) .scenario-icon::before {
    width: 24px;
    height: 36px;
    top: -30px;
    right: -5px;
    transform-origin: bottom center;
}

/* 第二个闪电伪元素 */
.scenario-card:nth-child(2) .scenario-icon::after {
    width: 20px;
    height: 28px;
    bottom: -25px;
    left: 0px;
    transform-origin: top center;
    transform: scale(0) rotate(25deg);
}

/* 闪电动画 - 更强的光效和颜色变化 */
@keyframes lightningBolt1 {
    0%, 100% {
        transform: scale(0) rotate(-25deg);
        opacity: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(60, 180, 255, 0.85));
        filter: blur(5px);
    }
    10% {
        transform: scale(0.7) rotate(-5deg);
        opacity: 0.7;
        filter: brightness(1.5) blur(2px);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(0, 200, 255, 0.85));
    }
    15%, 85% {
        transform: scale(1.4) rotate(-10deg) translateX(-3px);
        opacity: 0.95;
        box-shadow: 0 0 15px rgba(0, 170, 255, 0.9), 0 0 25px rgba(255, 255, 255, 0.8), 0 0 40px rgba(0, 170, 255, 0.5);
        filter: brightness(1.8) contrast(1.1) blur(0px);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.95), rgba(0, 170, 255, 0.9));
    }
    20% {
        transform: scale(1.3) rotate(-8deg) translateX(2px);
        opacity: 0.9;
        filter: brightness(1.7) contrast(1.05);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(0, 190, 255, 0.87));
    }
    50% {
        transform: scale(1.7) rotate(5deg) translateY(-2px);
        opacity: 1;
        box-shadow: 0 0 20px rgba(0, 170, 255, 1), 0 0 35px rgba(255, 255, 255, 0.9), 0 0 50px rgba(0, 170, 255, 0.7);
        filter: brightness(2.5) contrast(1.3);
        background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(60, 210, 255, 0.95));
    }
    90% {
        transform: scale(0.6) rotate(0deg);
        opacity: 0.6;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(60, 200, 255, 0.85));
        filter: blur(3px);
    }
}

@keyframes lightningBolt2 {
    0%, 100% {
        transform: scale(0) rotate(25deg);
        opacity: 0;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(60, 200, 255, 0.85));
        filter: blur(5px);
    }
    5% {
        transform: scale(0.6) rotate(30deg);
        opacity: 0.6;
        filter: brightness(1.3) blur(2px);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(60, 200, 255, 0.85));
    }
    15%, 75% {
        transform: scale(1.3) rotate(35deg) translateX(3px);
        opacity: 0.95;
        box-shadow: 0 0 12px rgba(0, 191, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.7), 0 0 35px rgba(0, 191, 255, 0.5);
        filter: brightness(1.8) contrast(1.1) blur(0px);
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(0, 170, 255, 0.87));
    }
    50% {
        transform: scale(1.8) rotate(45deg) translateY(2px);
        opacity: 1;
        box-shadow: 0 0 18px rgba(0, 170, 255, 1), 0 0 30px rgba(255, 255, 255, 0.9), 0 0 45px rgba(0, 170, 255, 0.7);
        filter: brightness(2.2) contrast(1.25);
        background: linear-gradient(90deg, rgba(255, 255, 255, 1), rgba(60, 210, 255, 0.95));
    }
    85% {
        transform: scale(0.8) rotate(30deg);
        opacity: 0.7;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.9), rgba(60, 200, 255, 0.85));
        filter: blur(3px);
    }
}

.scenario-card:nth-child(2) .scenario-icon:hover::before {
    animation: lightningBolt1 0.8s ease-out infinite;
}

.scenario-card:nth-child(2) .scenario-icon:hover::after {
    animation: lightningBolt2 0.7s ease-out 0.2s infinite;
}

/* 新增 - 第三个闪电元素与增强效果 */
.scenario-card:nth-child(2) .scenario-icon .lightning-element {
    display: none;
}

.scenario-card:nth-child(2) .scenario-icon:hover .lightning-element {
    display: block;
    position: absolute;
    width: 24px;
    height: 36px;
    top: 65%;
    right: -18px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(0, 210, 255, 0.9), rgba(120, 220, 255, 0.8));
    clip-path: polygon(25% 0%, 45% 0%, 65% 30%, 50% 30%, 75% 60%, 65% 60%, 100% 100%, 40% 70%, 55% 70%, 25% 40%, 40% 40%, 25% 0%);
    transform-origin: center;
    z-index: -1;
    filter: drop-shadow(0 0 15px rgba(0, 180, 255, 0.9)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.7));
    animation: lightningBolt3 0.65s ease-out 0.1s infinite;
}

@keyframes lightningBolt3 {
    0%, 100% {
        transform: scale(0) rotate(-30deg);
        opacity: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(0, 210, 255, 0.9), rgba(120, 220, 255, 0.8));
        filter: blur(5px);
    }
    15% {
        transform: scale(0.9) rotate(-25deg) translateX(-2px);
        opacity: 0.8;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(0, 210, 255, 0.9), rgba(120, 220, 255, 0.8));
        filter: brightness(1.5) drop-shadow(0 0 8px rgba(0, 210, 255, 0.8)) blur(1px);
    }
    30%, 70% {
        transform: scale(1.6) rotate(-15deg) translateX(2px);
        opacity: 0.95;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(0, 210, 255, 0.95), rgba(60, 180, 255, 0.9));
        box-shadow: 0 0 15px rgba(0, 170, 255, 0.9), 0 0 25px rgba(255, 255, 255, 0.8), 0 0 40px rgba(0, 170, 255, 0.6);
        filter: brightness(2) drop-shadow(0 0 12px rgba(0, 170, 255, 0.9)) contrast(1.2);
    }
    50% {
        transform: scale(1.8) rotate(-10deg) translateY(-3px);
        opacity: 1;
        background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(80, 210, 255, 0.95), rgba(0, 160, 255, 0.9));
        filter: brightness(2.5) drop-shadow(0 0 18px rgba(0, 200, 255, 1)) contrast(1.3);
        box-shadow: 0 0 20px rgba(0, 170, 255, 1), 0 0 30px rgba(255, 255, 255, 0.9), 0 0 50px rgba(0, 170, 255, 0.6);
    }
    85% {
        transform: scale(0.7) rotate(-20deg);
        opacity: 0.7;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(0, 210, 255, 0.9), rgba(120, 220, 255, 0.8));
        filter: brightness(1.3) drop-shadow(0 0 6px rgba(0, 210, 255, 0.7)) blur(2px);
    }
}

/* 添加多个闪电元素效果与强化 */
.scenario-card:nth-child(2) .scenario-icon:hover::before,
.scenario-card:nth-child(2) .scenario-icon:hover::after,
.scenario-card:nth-child(2) .scenario-icon:hover .lightning-element {
    filter: drop-shadow(0 0 15px rgba(0, 180, 255, 0.9)) drop-shadow(0 0 25px rgba(255, 255, 255, 0.8));
}

/* 增加额外的两个闪电 - 更强的形状变化 */
.scenario-card:nth-child(2) .scenario-icon:hover .lightning-element::before,
.scenario-card:nth-child(2) .scenario-icon:hover .lightning-element::after {
    content: "";
    position: absolute;
    transform: scale(0);
    opacity: 0;
    z-index: -1;
    filter: drop-shadow(0 0 15px rgba(0, 180, 255, 0.9));
}

.scenario-card:nth-child(2) .scenario-icon:hover .lightning-element::before {
    width: 22px;
    height: 30px;
    top: -45px;
    left: -35px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(0, 210, 255, 0.9), rgba(120, 220, 255, 0.8));
    clip-path: polygon(40% 0%, 60% 0%, 50% 30%, 70% 30%, 35% 100%, 45% 60%, 30% 60%, 40% 0%);
    animation: lightningBolt4 0.6s ease-out 0.3s infinite;
}

.scenario-card:nth-child(2) .scenario-icon:hover .lightning-element::after {
    width: 20px;
    height: 28px;
    bottom: -40px;
    right: -40px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(0, 210, 255, 0.9), rgba(120, 220, 255, 0.8));
    clip-path: polygon(50% 0%, 65% 30%, 50% 30%, 100% 55%, 50% 100%, 35% 70%, 50% 70%, 0% 45%, 50% 0%);
    animation: lightningBolt5 0.55s ease-out 0.45s infinite;
}

/* 新增 - 电流波动效果与增强 */
.scenario-card:nth-child(2) .scenario-icon:hover i {
    position: relative;
    z-index: 2;
    animation: electricPulse 0.6s ease-in-out infinite alternate;
    text-shadow: 0 0 10px rgba(0, 170, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.8), 0 0 30px rgba(0, 170, 255, 0.5);
}

@keyframes electricPulse {
    0% {
        color: #00B7FF;
        transform: scale(1) rotate(-2deg);
        text-shadow: 0 0 10px rgba(0, 180, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.8);
    }
    50% {
        color: #FFFFFF;
        transform: scale(1.3) rotate(2deg);
        text-shadow: 0 0 18px rgba(0, 210, 255, 1), 0 0 30px rgba(255, 255, 255, 0.9), 
                     0 0 40px rgba(0, 170, 255, 0.7), 0 0 60px rgba(0, 170, 255, 0.4);
    }
    100% {
        color: #60C7FF;
        transform: scale(1) rotate(-1deg);
        text-shadow: 0 0 10px rgba(0, 180, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.8);
    }
}

/* 改进闪电形状变化动画 */
@keyframes lightningBolt4 {
    0%, 100% {
        transform: scale(0) rotate(15deg);
        opacity: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(0, 210, 255, 0.9), rgba(120, 220, 255, 0.8));
    }
    20% {
        transform: scale(1) rotate(20deg);
        opacity: 0.85;
        filter: brightness(1.8) drop-shadow(0 0 12px rgba(0, 210, 255, 0.8));
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(0, 210, 255, 0.9), rgba(120, 220, 255, 0.8));
    }
    40%, 60% {
        transform: scale(1.5) rotate(30deg);
        opacity: 0.95;
        box-shadow: 0 0 15px rgba(0, 170, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.7);
        filter: brightness(2.1) drop-shadow(0 0 18px rgba(0, 170, 255, 0.9));
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(0, 210, 255, 0.95), rgba(60, 180, 255, 0.9));
    }
    50% {
        transform: scale(1.7) rotate(35deg);
        opacity: 1;
        filter: brightness(2.3) drop-shadow(0 0 22px rgba(0, 170, 255, 1));
        box-shadow: 0 0 20px rgba(0, 170, 255, 1), 0 0 30px rgba(255, 255, 255, 0.9);
        background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(80, 210, 255, 0.95), rgba(0, 160, 255, 0.9));
    }
    80% {
        transform: scale(0.8) rotate(25deg);
        opacity: 0.7;
        filter: brightness(1.6) drop-shadow(0 0 10px rgba(0, 210, 255, 0.7));
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(0, 210, 255, 0.9), rgba(120, 220, 255, 0.8));
    }
}

@keyframes lightningBolt5 {
    0%, 100% {
        transform: scale(0) rotate(-15deg);
        opacity: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(0, 210, 255, 0.9), rgba(120, 220, 255, 0.8));
    }
    25% {
        transform: scale(0.9) rotate(-25deg);
        opacity: 0.8;
        filter: brightness(1.7) drop-shadow(0 0 10px rgba(0, 210, 255, 0.8));
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(0, 210, 255, 0.9), rgba(120, 220, 255, 0.8));
    }
    45%, 55% {
        transform: scale(1.4) rotate(-35deg);
        opacity: 0.95;
        box-shadow: 0 0 14px rgba(0, 170, 255, 0.9), 0 0 20px rgba(255, 255, 255, 0.7);
        filter: brightness(2) drop-shadow(0 0 15px rgba(0, 170, 255, 0.9));
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(0, 210, 255, 0.95), rgba(60, 180, 255, 0.9));
    }
    50% {
        transform: scale(1.6) rotate(-40deg);
        opacity: 1;
        filter: brightness(2.2) drop-shadow(0 0 22px rgba(0, 170, 255, 1));
        box-shadow: 0 0 18px rgba(0, 170, 255, 1), 0 0 25px rgba(255, 255, 255, 0.8);
        background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(80, 210, 255, 0.95), rgba(0, 160, 255, 0.9));
    }
    75% {
        transform: scale(0.8) rotate(-20deg);
        opacity: 0.65;
        filter: brightness(1.5) drop-shadow(0 0 8px rgba(0, 210, 255, 0.7));
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(0, 210, 255, 0.9), rgba(120, 220, 255, 0.8));
    }
}

/* 新增 - 电流圆形波动效果 */
.scenario-card:nth-child(2) .scenario-icon:hover::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    top: 0;
    left: 0;
    box-shadow: 0 0 0 0 rgba(0, 170, 255, 0.5);
    animation: lightningBolt1 0.8s ease-out infinite, electricCircle 1.5s ease-out infinite;
}

@keyframes electricCircle {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 190, 255, 0.8);
    }
    50% {
        box-shadow: 0 0 0 18px rgba(0, 170, 255, 0.3), 0 0 0 8px rgba(255, 255, 255, 0.5),
                    0 0 25px rgba(0, 210, 255, 0.6), 0 0 40px rgba(120, 220, 255, 0.4);
    }
    100% {
        box-shadow: 0 0 0 25px rgba(0, 170, 255, 0), 0 0 0 12px rgba(255, 255, 255, 0),
                    0 0 35px rgba(0, 210, 255, 0), 0 0 50px rgba(120, 220, 255, 0);
    }
}

/* 新增 - 增强电流连接效果和光影 */
.scenario-card:nth-child(2) .scenario-icon:hover .lightning-element::before,
.scenario-card:nth-child(2) .scenario-icon:hover .lightning-element::after {
    filter: drop-shadow(0 0 18px rgba(0, 190, 255, 1)) drop-shadow(0 0 28px rgba(255, 255, 255, 0.8));
}

/* 改进 - 电流震荡效果与发光 */
.scenario-card:nth-child(2):hover .scenario-icon {
    animation: shockwave 1.2s ease-out infinite;
    filter: drop-shadow(0 0 25px rgba(0, 190, 255, 0.6));
}

@keyframes shockwave {
    0%, 100% {
        transform: scale(1);
    }
    10% {
        transform: scale(1.1) rotate(3deg);
    }
    20% {
        transform: scale(0.95) rotate(-3deg);
    }
    30% {
        transform: scale(1.05) rotate(2deg);
    }
    40% {
        transform: scale(0.98) rotate(-2deg);
    }
    50% {
        transform: scale(1.03) translateY(-3px);
    }
    60% {
        transform: scale(0.97) translateY(2px);
    }
    70% {
        transform: scale(1.01) translateY(-1px);
    }
    80% {
        transform: scale(0.99) translateY(0);
    }
}

/* 新增 - 电流离子云效果 */
.scenario-card:nth-child(2) .scenario-icon:hover::after {
    content: "";
    position: absolute;
    width: 180%;
    height: 180%;
    top: -40%;
    left: -40%;
    background: radial-gradient(ellipse at center, 
                rgba(0, 210, 255, 0), 
                rgba(0, 190, 255, 0.15) 30%, 
                rgba(80, 210, 255, 0.1) 50%, 
                rgba(0, 160, 255, 0) 70%);
    animation: lightningBolt2 0.7s ease-out 0.2s infinite, particleEffect 2.5s linear infinite;
}

@keyframes particleEffect {
    0% {
        transform: rotate(0deg) scale(0.95);
        opacity: 0.3;
        filter: blur(8px);
    }
    25% {
        transform: rotate(90deg) scale(1);
        opacity: 0.6;
        filter: blur(6px);
    }
    50% {
        transform: rotate(180deg) scale(1.05);
        opacity: 0.8;
        filter: blur(4px);
    }
    75% {
        transform: rotate(270deg) scale(1);
        opacity: 0.6;
        filter: blur(6px);
    }
    100% {
        transform: rotate(360deg) scale(0.95);
        opacity: 0.3;
        filter: blur(8px);
    }
}

/* 新增 - 闪电分支效果 */
.scenario-card:nth-child(2) .scenario-icon:hover::before {
    content: "";
    position: absolute;
}

/* 新增 - 闪电能量脉冲环 */
.scenario-card:nth-child(2) .scenario-icon:hover::after {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    border-radius: 50%;
    background: radial-gradient(circle, 
                rgba(255, 255, 255, 0.1) 0%, 
                rgba(0, 210, 255, 0.08) 40%, 
                rgba(0, 160, 255, 0.05) 65%, 
                transparent 80%);
    opacity: 0;
    animation: energyPulse 2s ease-out infinite;
}

@keyframes energyPulse {
    0% {
        transform: scale(0.2);
        opacity: 0.8;
    }
    50% {
        opacity: 0.4;
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.scenario-card:nth-child(3) .scenario-icon {
    position: relative;
    overflow: visible;
}

/* 添加PPT演示相关的伪元素 */
.scenario-card:nth-child(3) .scenario-icon::before,
.scenario-card:nth-child(3) .scenario-icon::after {
    content: "";
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transform: scale(0);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 添加幻灯片框架效果 */
.scenario-card:nth-child(3) .scenario-icon::before {
    width: 20px;
    height: 15px;
    top: -20px;
    right: -25px;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
    transform-origin: bottom left;
    z-index: -1;
}

/* 添加幻灯片切换效果 */
.scenario-card:nth-child(3) .scenario-icon::after {
    width: 18px;
    height: 12px;
    bottom: -18px;
    left: -20px;
    background: linear-gradient(135deg, #60a5fa, #93c5fd);
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(96, 165, 250, 0.5);
    transform-origin: top right;
    z-index: -1;
}

/* 鼠标悬停时激活伪元素 */
.scenario-card:nth-child(3) .scenario-icon:hover::before {
    opacity: 1;
    transform: scale(1) rotate(-15deg);
    animation: slideChange1 3s ease-in-out infinite;
}

.scenario-card:nth-child(3) .scenario-icon:hover::after {
    opacity: 1;
    transform: scale(1) rotate(15deg);
    animation: slideChange2 3s ease-in-out infinite 0.5s;
}

/* 幻灯片动画 */
@keyframes slideChange1 {
    0%, 100% {
        transform: scale(1) rotate(-15deg) translateY(0);
        opacity: 0.7;
        background: linear-gradient(135deg, #3b82f6, #60a5fa);
    }
    25% {
        transform: scale(1.2) rotate(-5deg) translateY(-5px);
        opacity: 0.9;
        background: linear-gradient(135deg, #2563eb, #60a5fa);
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.7), 0 0 25px rgba(59, 130, 246, 0.4);
    }
    50% {
        transform: scale(1.4) rotate(5deg) translateY(-10px);
        opacity: 1;
        background: linear-gradient(135deg, #1d4ed8, #3b82f6);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.5);
    }
    75% {
        transform: scale(1.2) rotate(-5deg) translateY(-5px);
        opacity: 0.9;
        background: linear-gradient(135deg, #2563eb, #60a5fa);
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.7), 0 0 25px rgba(59, 130, 246, 0.4);
    }
}

@keyframes slideChange2 {
    0%, 100% {
        transform: scale(1) rotate(15deg) translateY(0);
        opacity: 0.7;
        background: linear-gradient(135deg, #60a5fa, #93c5fd);
    }
    25% {
        transform: scale(1.2) rotate(5deg) translateY(5px);
        opacity: 0.9;
        background: linear-gradient(135deg, #3b82f6, #93c5fd);
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.7), 0 0 25px rgba(59, 130, 246, 0.4);
    }
    50% {
        transform: scale(1.4) rotate(-5deg) translateY(10px);
        opacity: 1;
        background: linear-gradient(135deg, #2563eb, #60a5fa);
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.5);
    }
    75% {
        transform: scale(1.2) rotate(5deg) translateY(5px);
        opacity: 0.9;
        background: linear-gradient(135deg, #3b82f6, #93c5fd);
        box-shadow: 0 0 15px rgba(59, 130, 246, 0.7), 0 0 25px rgba(59, 130, 246, 0.4);
    }
}

/* 添加幻灯片内容动效 */
.scenario-card:nth-child(3) .scenario-icon i {
    position: relative;
    z-index: 2;
}

.scenario-card:nth-child(3) .scenario-icon:hover i {
    animation: presentationIcon 1.5s ease-in-out infinite;
    color: #2563eb;
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.7), 0 0 20px rgba(255, 255, 255, 0.5);
}

@keyframes presentationIcon {
    0%, 100% {
        transform: scale(1);
        color: #3b82f6;
        text-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 0 15px rgba(255, 255, 255, 0.3);
    }
    50% {
        transform: scale(1.3);
        color: #1d4ed8;
        text-shadow: 0 0 15px rgba(29, 78, 216, 0.8), 0 0 25px rgba(255, 255, 255, 0.6), 0 0 35px rgba(29, 78, 216, 0.4);
    }
}

/* 添加光线效果 */
.scenario-card:nth-child(3) .scenario-icon:hover {
    animation: presentationPulse 1.8s infinite;
    position: relative;
}

.scenario-card:nth-child(3) .scenario-icon:hover::before,
.scenario-card:nth-child(3) .scenario-icon:hover::after {
    content: "";
    position: absolute;
    opacity: 1;
}

/* 添加幻灯片切换光效 */
.scenario-card:nth-child(3) .scenario-icon:hover::before {
    animation: slideChange1 3s ease-in-out infinite, slideGlow1 2s ease-in-out infinite;
}

.scenario-card:nth-child(3) .scenario-icon:hover::after {
    animation: slideChange2 3s ease-in-out infinite 0.5s, slideGlow2 2s ease-in-out infinite 0.3s;
}

@keyframes slideGlow1 {
    0%, 100% {
        box-shadow: 0 0 10px rgba(59, 130, 246, 0.5), 0 0 15px rgba(59, 130, 246, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.5), 0 0 45px rgba(59, 130, 246, 0.3);
    }
}

@keyframes slideGlow2 {
    0%, 100% {
        box-shadow: 0 0 10px rgba(96, 165, 250, 0.5), 0 0 15px rgba(96, 165, 250, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(96, 165, 250, 0.8), 0 0 30px rgba(96, 165, 250, 0.5), 0 0 45px rgba(96, 165, 250, 0.3);
    }
}

@keyframes presentationPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
        background-color: rgba(59, 130, 246, 0.1);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0), 0 0 20px 5px rgba(96, 165, 250, 0);
        background-color: rgba(59, 130, 246, 0.2);
    }
}

/* 彗星粒子特殊效果 */
.github-chart-container .star-particle.comet {
    background: radial-gradient(circle at 30% 30%, #7aa2f7 5%, rgba(122, 162, 247, 0.6) 20%, rgba(122, 162, 247, 0.3) 50%, transparent 70%);
    width: 8px !important;
    height: 8px !important;
    box-shadow: 0 0 15px 5px rgba(122, 162, 247, 0.4);
    z-index: 3;
    position: absolute;
    animation: none !important;
    transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 1.5s ease-out !important;
}

.github-chart-container .star-particle.comet::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 20px;
    height: 1px;
    background: linear-gradient(to left, rgba(122, 162, 247, 0.8), transparent);
    transform: translateY(-50%);
}

/* Wiki 样式 */
.wiki-container {
    display: flex;
    max-width: 1200px;
    margin: 40px auto;
    min-height: 600px;
    position: relative;
}

.wiki-sidebar {
    width: 280px;
    background: #f7f9fc;
    border-radius: var(--border-radius-base);
    padding: 25px;
    margin-right: 40px;
    box-shadow: 0 4px 10px rgba(122, 162, 247, 0.1);
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.wiki-sidebar h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-size: 1.3rem;
    border-bottom: 2px solid rgba(122, 162, 247, 0.2);
    padding-bottom: 10px;
}

.wiki-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wiki-list li {
    margin-bottom: 5px;
}

.wiki-list a {
    display: block;
    padding: 10px 15px;
    color: var(--text-color);
    text-decoration: none;
    border-radius: var(--border-radius-base);
    transition: all 0.3s ease;
    font-weight: 500;
    position: relative;
}

.wiki-list a:hover, .wiki-list a.active {
    background: rgba(122, 162, 247, 0.1);
    color: var(--primary-color);
    transform: translateX(5px);
    box-shadow: 0 2px 8px rgba(122, 162, 247, 0.15);
}

.wiki-list a.active {
    background: linear-gradient(to right, rgba(122, 162, 247, 0.2), rgba(122, 162, 247, 0.05));
    font-weight: 600;
}

.wiki-list .category {
    font-weight: 600;
    font-size: 1.05rem;
    margin-top: 25px;
    margin-bottom: 10px;
    color: var(--heading-color);
    padding-left: 15px;
}

.wiki-list .sub-item {
    padding-left: 20px;
}

.wiki-list .sub-item a {
    padding-left: 25px;
    font-size: 0.95rem;
}

.wiki-list .sub-item a:before {
    content: "→";
    position: absolute;
    left: 10px;
    color: var(--accent-color);
    opacity: 0.7;
}

.wiki-content {
    flex: 1;
    background: #fff;
    border-radius: var(--border-radius-large);
    padding: 35px 40px;
    box-shadow: 0 4px 15px rgba(122, 162, 247, 0.1);
}

.wiki-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.wiki-content h1 {
    font-size: 2.2rem;
    margin-bottom: 25px;
    padding-bottom: 15px;
    color: var(--primary-color);
    border-bottom: 2px solid rgba(122, 162, 247, 0.2);
    position: relative;
}

.wiki-content h1:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100px;
    height: 2px;
    background: var(--primary-color);
}

.wiki-content h2 {
    font-size: 1.6rem;
    margin-top: 35px;
    margin-bottom: 20px;
    color: var(--heading-color);
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(122, 162, 247, 0.15);
}

.wiki-content h3 {
    font-size: 1.3rem;
    margin-top: 25px;
    margin-bottom: 15px;
    color: var(--heading-color);
}

.wiki-content p {
    line-height: 1.8;
    margin-bottom: 20px;
}

.wiki-content a {
    color: var(--primary-color);
    text-decoration: none;
    border-bottom: 1px dashed rgba(122, 162, 247, 0.4);
    transition: all 0.2s ease;
}

.wiki-content a:hover {
    color: var(--accent-color);
    border-bottom: 1px solid var(--accent-color);
}

.wiki-content code {
    background: #f5f7fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.9em;
    color: #e96e99;
}

.wiki-content pre {
    background: #f7f9fc;
    padding: 15px;
    border-radius: var(--border-radius-base);
    overflow-x: auto;
    margin: 20px 0;
    border-left: 3px solid var(--primary-color);
}

.wiki-content pre code {
    background: transparent;
    padding: 0;
    color: var(--text-color);
}

.wiki-content ul, .wiki-content ol {
    padding-left: 25px;
    margin-bottom: 20px;
}

.wiki-content li {
    margin-bottom: 8px;
}

.wiki-content blockquote {
    border-left: 4px solid var(--primary-color);
    padding: 10px 20px;
    margin: 20px 0;
    background: rgba(122, 162, 247, 0.05);
    border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
}

/* 子章节导航样式，类似图片中的样式 */
.wiki-content .section-heading {
    color: var(--primary-color);
    font-size: 1.8rem;
    margin-top: 40px;
    padding-bottom: 10px;
    position: relative;
}

.wiki-content .section-heading:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(to right, var(--primary-color), rgba(122, 162, 247, 0.1));
    border-radius: 3px;
}

#content-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
}

#content-loading i {
    color: var(--primary-color);
}

/* 响应式调整 */
@media (max-width: 992px) {
    .wiki-container {
        flex-direction: column;
    }
    
    .wiki-sidebar {
        width: 100%;
        margin-right: 0;
        margin-bottom: 30px;
        position: relative;
        top: 0;
        max-height: none;
    }
    
    .wiki-content {
        padding: 25px;
    }
    
    .wiki-content h1 {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .wiki-container {
        flex-direction: column;
    }
    
    .wiki-sidebar {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        padding: 15px;
    }
    
    .wiki-content {
        padding: 20px;
    }
    
    .wiki-content h1 {
        font-size: 1.6rem;
    }
    
    .wiki-content h2 {
        font-size: 1.4rem;
    }
}

/* 修改Wiki区域的顶部间距 */
.wiki-section {
    padding-top: 40px;
}

/* 删除page-header相关样式 */
.page-header {
    display: none;
}

/* 滚动进度指示器样式 */
.scroll-progress-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 70px;
    height: 70px;
    z-index: 1000;
    cursor: pointer;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
    box-shadow: 0 4px 20px rgba(122, 162, 247, 0.25),
                inset 0 2px 10px rgba(255, 255, 255, 0.8),
                inset 0 -2px 5px rgba(122, 162, 247, 0.1);
    transition: all 0.5s ease-in-out;
    opacity: 1;
    transform: scale(1) rotate(0deg);
    pointer-events: auto;
    overflow: visible;
    border: 2px solid rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.scroll-progress-container:hover {
    transform: scale(1.15) rotate(5deg);
    box-shadow: 0 8px 30px rgba(122, 162, 247, 0.4), 
                0 0 20px rgba(247, 125, 170, 0.35),
                inset 0 2px 10px rgba(255, 255, 255, 0.9),
                inset 0 -2px 5px rgba(122, 162, 247, 0.15);
    border-color: rgba(255, 255, 255, 0.95);
}

.scroll-progress-container:active {
    transform: scale(0.92);
    transition: all 0.2s ease;
}

.scroll-progress-container.clicked {
    animation: clickPulse 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes clickPulse {
    0% { transform: scale(0.92); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

/* 发光效果 */
.scroll-progress-glow {
    position: absolute;
    top: -8px;
    left: -8px;
    right: -8px;
    bottom: -8px;
    border-radius: 50%;
    background: radial-gradient(circle at center, 
                rgba(247, 125, 170, 0.6) 0%, 
                rgba(122, 162, 247, 0.6) 35%, 
                rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.5s ease;
    animation: glowPulse 4s infinite alternate;
    filter: blur(5px);
}

.scroll-progress-container:hover .scroll-progress-glow {
    opacity: 0.85;
}

@keyframes glowPulse {
    0% { transform: scale(1); opacity: 0.4; filter: blur(5px); }
    50% { filter: blur(10px); }
    100% { transform: scale(1.2); opacity: 0.8; filter: blur(7px); }
}

/* 粒子效果 */
.scroll-progress-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 5;
}

.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: 0 0 10px rgba(122, 162, 247, 0.7);
    opacity: 0;
    transform: scale(0);
}

.scroll-progress-container:hover .particle {
    animation: particleBurst 1.5s ease-out forwards;
}

.p1 { top: 20%; left: 0; animation-delay: 0.1s; background: #f77daa; }
.p2 { top: 10%; right: 20%; animation-delay: 0.2s; }
.p3 { top: 80%; right: 30%; animation-delay: 0.3s; background: #f77daa; }
.p4 { top: 60%; left: 10%; animation-delay: 0.4s; }
.p5 { top: 30%; right: 0; animation-delay: 0.5s; background: #f77daa; }
.p6 { top: 70%; left: 30%; animation-delay: 0.6s; }
.p7 { top: 40%; left: 50%; animation-delay: 0.7s; background: #f77daa; }
.p8 { top: 50%; right: 40%; animation-delay: 0.8s; }

@keyframes particleBurst {
    0% { transform: scale(0) translate(0, 0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: scale(1) translate(var(--tx, 20px), var(--ty, 20px)); opacity: 0; }
}

.p1 { --tx: -30px; --ty: -20px; }
.p2 { --tx: 25px; --ty: -30px; }
.p3 { --tx: 25px; --ty: 20px; }
.p4 { --tx: -25px; --ty: 15px; }
.p5 { --tx: 30px; --ty: -5px; }
.p6 { --tx: -20px; --ty: 30px; }
.p7 { --tx: 15px; --ty: 25px; }
.p8 { --tx: -30px; --ty: -15px; }

/* 进度圆环 */
.scroll-progress-circle {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    filter: drop-shadow(0 0 5px rgba(122, 162, 247, 0.4));
    position: relative;
    z-index: 2;
}

.scroll-progress-circle-bg {
    fill: none;
    stroke: rgba(122, 162, 247, 0.15);
    stroke-width: 6;
    stroke-linecap: round;
    filter: blur(0.5px);
}

.scroll-progress-circle-fill {
    fill: none;
    stroke: url(style.css);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-dasharray: 283; /* 2πr ≈ 2 * 3.14 * 45 ≈ 283 */
    stroke-dashoffset: 283;
    transition: stroke-dashoffset 0.2s ease;
    filter: drop-shadow(0 0 3px rgba(122, 162, 247, 0.7)) url(style.css);
}

.scroll-progress-container:hover .scroll-progress-circle-fill {
    filter: drop-shadow(0 0 5px rgba(247, 125, 170, 0.8)) url(style.css);
    animation: glowStroke 2s infinite alternate;
}

@keyframes glowStroke {
    0% { filter: drop-shadow(0 0 3px rgba(122, 162, 247, 0.7)) url(style.css); }
    100% { filter: drop-shadow(0 0 8px rgba(247, 125, 170, 0.8)) url(style.css); }
}

.scroll-progress-circle-inner {
    fill: rgba(255, 255, 255, 0.9);
    stroke: none;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

.scroll-progress-circle-deco {
    fill: none;
    stroke: rgba(122, 162, 247, 0.1);
    stroke-width: 1;
    stroke-dasharray: 4 2;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.scroll-progress-container:hover .scroll-progress-circle-deco {
    opacity: 1;
    animation: rotateCircle 15s linear infinite;
}

@keyframes rotateCircle {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 箭头图标 */
.scroll-progress-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--primary-color);
    font-size: 1.4rem;
    transition: all 0.3s ease;
    z-index: 3;
    text-shadow: 0 2px 5px rgba(122, 162, 247, 0.2);
}

.scroll-progress-container:hover .scroll-progress-icon {
    transform: translate(-50%, -65%);
    color: var(--accent-color);
    animation: bounce 0.8s ease infinite alternate;
    text-shadow: 0 2px 8px rgba(247, 125, 170, 0.4);
}

@keyframes bounce {
    0% { transform: translate(-50%, -50%); }
    50% { transform: translate(-50%, -60%); }
    100% { transform: translate(-50%, -65%); }
}

/* 星星装饰 */
.scroll-progress-stars {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 1;
}

.star {
    position: absolute;
    color: var(--primary-color);
    opacity: 0;
    transition: all 0.4s ease;
    font-size: 1.2rem;
    filter: drop-shadow(0 0 3px rgba(122, 162, 247, 0.4));
}

.scroll-progress-container:hover .star {
    opacity: 0.9;
    animation: twinkle 2.5s infinite alternate;
}

.star-1 { top: -15px; left: 50%; transform: translateX(-50%); animation-delay: 0.1s; }
.star-2 { top: 30%; right: -20px; animation-delay: 0.3s; }
.star-3 { bottom: -10px; left: 50%; transform: translateX(-50%); animation-delay: 0.5s; }
.star-4 { top: 30%; left: -20px; animation-delay: 0.7s; }
.star-5 { top: -10px; left: 20%; animation-delay: 0.9s; }
.star-6 { bottom: -5px; right: 20%; animation-delay: 0.6s; }

.scroll-progress-container:hover .star-1 { top: -25px; }
.scroll-progress-container:hover .star-2 { right: -25px; }
.scroll-progress-container:hover .star-3 { bottom: -20px; }
.scroll-progress-container:hover .star-4 { left: -25px; }
.scroll-progress-container:hover .star-5 { top: -20px; left: 15%; }
.scroll-progress-container:hover .star-6 { bottom: -15px; right: 15%; }

@keyframes twinkle {
    0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(122, 162, 247, 0.4)); }
    50% { transform: scale(1.4); filter: drop-shadow(0 0 8px rgba(247, 125, 170, 0.6)); }
}

/* 表情装饰 */
.scroll-progress-emoji-container {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 4;
}

.emoji {
    position: absolute;
    font-size: 1.5rem;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transform-origin: center;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

.emoji-rocket {
    bottom: -25px;
    right: -20px;
    transform: rotate(-15deg) scale(0);
}

.emoji-star {
    top: -22px;
    left: -15px;
    transform: rotate(15deg) scale(0);
}

.emoji-heart {
    top: -5px;
    right: -25px;
    transform: rotate(25deg) scale(0);
}

.emoji-sparkles {
    bottom: -20px;
    left: -15px;
    transform: rotate(-20deg) scale(0);
}

.scroll-progress-container:hover .emoji-rocket {
    opacity: 1;
    transform: rotate(15deg) scale(1);
    animation: rocketWiggle 1.2s ease infinite;
}

.scroll-progress-container:hover .emoji-star {
    opacity: 1;
    transform: rotate(-15deg) scale(1);
    animation: starPulse 1.5s ease infinite alternate;
}

.scroll-progress-container:hover .emoji-heart {
    opacity: 1;
    transform: rotate(15deg) scale(1);
    animation: heartBeat 1s ease infinite;
}

.scroll-progress-container:hover .emoji-sparkles {
    opacity: 1;
    transform: rotate(-10deg) scale(1);
    animation: sparkleFlash 2s ease infinite;
}

@keyframes rocketWiggle {
    0%, 100% { transform: rotate(15deg) translateY(0); }
    50% { transform: rotate(20deg) translateY(-5px); }
}

@keyframes starPulse {
    0% { transform: rotate(-15deg) scale(1); }
    100% { transform: rotate(-5deg) scale(1.2); }
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    10%, 30% { transform: scale(1.2); }
    20%, 40% { transform: scale(0.95); }
    50%, 70% { transform: scale(1.1); }
    60%, 80% { transform: scale(0.98); }
}

@keyframes sparkleFlash {
    0%, 100% { opacity: 1; transform: rotate(-10deg) scale(1); }
    25% { opacity: 0.5; transform: rotate(-5deg) scale(0.9); }
    50% { opacity: 1; transform: rotate(-15deg) scale(1.1); }
    75% { opacity: 0.7; transform: rotate(-8deg) scale(0.95); }
}

/* 百分比显示 */
.scroll-progress-percentage {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 600;
    opacity: 0;
    transition: all 0.3s ease;
    background-color: white;
    padding: 2px 8px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(122, 162, 247, 0.2);
}

.scroll-progress-container:hover .scroll-progress-percentage {
    opacity: 1;
    transform: translateX(-50%) translateY(-5px);
}

/* 提示工具提示 */
.scroll-progress-tooltip {
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    background-color: white;
    color: var(--primary-color);
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 10px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(122, 162, 247, 0.2);
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none;
    z-index: 6;
}

.scroll-progress-tooltip:after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: white transparent transparent transparent;
}

.scroll-progress-container:hover .scroll-progress-tooltip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* 点击效果 */
.scroll-progress-container.clicked .scroll-progress-icon {
    animation: clickSpin 0.5s ease;
}

@keyframes clickSpin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 媒体查询 - 移动设备优化 */
@media (max-width: 768px) {
    .scroll-progress-container {
        width: 60px;
        height: 60px;
        bottom: 20px;
        right: 20px;
    }
    
    .scroll-progress-icon {
        font-size: 1.2rem;
    }
    
    .emoji {
        font-size: 1.2rem;
    }
    
    .scroll-progress-percentage {
        font-size: 0.7rem;
        bottom: -25px;
    }
    
    .scroll-progress-tooltip {
        font-size: 0.7rem;
        top: -35px;
        padding: 4px 8px;
    }
}

.guide-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.guide-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.guide-content h1 {
    font-size: 2.5em;
    color: var(--primary-color);
    margin-bottom: 30px;
    text-align: center;
}

.guide-content h2 {
    font-size: 1.8em;
    color: var(--accent-color);
    margin: 40px 0 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}

.guide-content p {
    font-size: 1.1em;
    line-height: 1.8;
    color: #333;
    margin-bottom: 20px;
}

.guide-content ul {
    list-style-type: none;
    padding-left: 20px;
}

.guide-content li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 1.1em;
    line-height: 1.6;
}

.guide-content li::before {
    content: "✨";
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2em;
}

.guide-image {
    margin: 30px 0;
    text-align: center;
}

.guide-image img {
    max-width: 100%;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.guide-image img:hover {
    transform: scale(1.02);
}

@media (max-width: 768px) {
    .guide-content {
        padding: 20px;
    }
    
    .guide-content h1 {
        font-size: 2em;
    }
    
    .guide-content h2 {
        font-size: 1.5em;
    }
    
    .guide-content p {
        font-size: 1em;
    }
}

/* 指南页面增强样式 */
.guide-hero {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    padding: 4rem 0 2rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(122, 162, 247, 0.3);
}

.guide-hero-title {
    font-size: 3rem;
    color: var(--heading-color);
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-shadow: 0 2px 10px rgba(122, 162, 247, 0.3);
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
}

.guide-hero-title:hover {
    transform: translateY(-5px);
    text-shadow: 0 8px 20px rgba(122, 162, 247, 0.5);
}

.guide-accent {
    color: var(--accent-color);
    margin-left: 10px;
    position: relative;
}

.guide-accent::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
}

.guide-hero-title:hover .guide-accent::after {
    transform: scaleX(1);
}

.guide-hero-decoration {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.5;
}

.floating-icon {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0;
    color: var(--primary-color);
    filter: drop-shadow(0 2px 5px rgba(122, 162, 247, 0.5));
    animation: floatIcon 6s ease-in-out infinite;
}

.icon1 {
    top: 20%;
    left: 15%;
    animation-duration: 8s;
}

.icon2 {
    top: 30%;
    right: 20%;
    animation-delay: 1s;
    animation-duration: 9s;
    color: var(--accent-color);
}

.icon3 {
    bottom: 25%;
    right: 15%;
    animation-delay: 2s;
    color: var(--accent-color);
}

.icon4 {
    bottom: 15%;
    left: 25%;
    animation-delay: 3s;
    animation-duration: 7s;
}

@keyframes floatIcon {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(5deg);
    }
    50% {
        transform: translateY(5px) rotate(-5deg);
    }
    75% {
        transform: translateY(-10px) rotate(3deg);
    }
}

.guide-section {
    padding: 2rem 0 4rem;
}

.guide-content {
    max-width: 850px;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--surface-color);
    border-radius: var(--border-radius-large);
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
}

.guide-content:hover {
    box-shadow: var(--card-hover-shadow);
}

.guide-section-content {
    margin-bottom: 3.5rem;
    position: relative;
}

.guide-section-content:last-child {
    margin-bottom: 0;
}

.animated-title {
    position: relative;
    display: inline-block;
    margin-bottom: 1.5rem;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.animated-title:hover {
    transform: translateX(10px);
    color: var(--accent-color);
}

.animated-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary-color), var(--accent-color));
    transform: scaleX(0.3);
    transform-origin: left;
    transition: all 0.4s ease;
}

.animated-title:hover::after {
    transform: scaleX(1);
}

.animated-title i {
    margin-right: 10px;
    transition: all 0.3s ease;
}

.animated-title:hover i {
    transform: scale(1.2) rotate(10deg);
    color: var(--accent-color);
}

.author-card {
    display: flex;
    align-items: center;
    background-color: rgba(122, 162, 247, 0.05);
    border-radius: var(--border-radius-base);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px solid rgba(122, 162, 247, 0.1);
    transition: all 0.3s ease;
}

.author-card:hover {
    background-color: rgba(122, 162, 247, 0.1);
    transform: translateY(-5px);
    box-shadow: var(--card-hover-shadow);
}

.author-avatar {
    position: relative; /* Ensure this is the positioning context */
    width: 80px; /* Explicitly define size if needed */
    height: 80px;
    display: inline-block; /* Or adjust as needed for layout */
}

.author-avatar img {
    width: 100%; /* Make image fill the container */
    height: 100%;
    border-radius: 50%;
    border: 3px solid var(--primary-color);
    transition: all 0.5s ease;
    object-fit: cover;
    display: block; /* Remove potential space below image */
}

/* Optional: Style the link directly if needed */
.author-avatar a {
    display: block;
    border-radius: 50%;
    /* z-index: 1; might not be needed if pointer-events: none is used on glow */
}


.author-card:hover .author-avatar img {
    transform: rotate(10deg);
    border-color: var(--accent-color);
}

.avatar-glow {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: none; /* 移除背景渐变 */
    filter: blur(8px);
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.5s ease, transform 0.5s ease;
    animation: none; /* 移除旋转动画 */
    pointer-events: none; /* Add this to allow clicks to pass through */
}

@keyframes rotateGlow {
    0% { transform: scale(1.1) rotate(0deg); }
    100% { transform: scale(1.1) rotate(360deg); }
}

.contributors-grid td:hover .contributor-avatar-glow {
    opacity: 0; /* 设置为透明，不显示粉色圈 */
    transform: scale(1.15);
}

.author-info {
    flex: 1;
}

.author-info p {
    margin-bottom: 0.5rem;
}

.author-info p:last-child {
    margin-bottom: 0;
}

.highlight {
    color: var(--primary-color);
    font-weight: 600;
    display: inline-block;
    position: relative;
    transition: all 0.3s ease;
}

.highlight:hover {
    color: var(--accent-color);
    transform: scale(1.05);
}

/* 文本强调样式 */
.text-primary {
    color: var(--primary-color);
    font-weight: 600;
    transition: all 0.3s ease;
}

.text-primary:hover {
    color: var(--primary-color);
    text-shadow: 0 0 5px rgba(122, 162, 247, 0.5);
}

.text-accent {
    color: var(--accent-color);
    font-weight: 600;
    transition: all 0.3s ease;
}

.text-accent:hover {
    color: var(--accent-color);
    text-shadow: 0 0 5px rgba(247, 125, 170, 0.5);
}

.text-success {
    color: #52c41a;
    font-weight: 600;
    transition: all 0.3s ease;
}

.text-success:hover {
    color: #52c41a;
    text-shadow: 0 0 5px rgba(82, 196, 26, 0.5);
}

.text-warning {
    color: #e9a23b;
    font-weight: 600;
    transition: all 0.3s ease;
}

.text-warning:hover {
    color: #e9a23b;
    text-shadow: 0 0 5px rgba(233, 162, 59, 0.5);
}

/* 图标动画效果 */
.icon-animate-rotate {
    transition: transform 0.3s ease;
    display: inline-block;
}

.text-accent:hover .icon-animate-rotate {
    animation: iconRotate 1s ease infinite;
}

@keyframes iconRotate {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(0); }
    75% { transform: rotate(-15deg); }
    100% { transform: rotate(0); }
}

.icon-animate-bounce {
    transition: transform 0.3s ease;
    display: inline-block;
}

.text-primary:hover .icon-animate-bounce {
    animation: iconBounce 0.8s ease infinite;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.icon-animate-jump {
    transition: transform 0.3s ease;
    display: inline-block;
}

.text-success:hover .icon-animate-jump {
    animation: iconJump 0.8s ease infinite;
}

@keyframes iconJump {
    0%, 100% { transform: scale(1) translateY(0); }
    10% { transform: scale(1.1) translateY(0); }
    30% { transform: scale(0.9) translateY(0); }
    50% { transform: scale(1.05) translateY(-5px); }
    57% { transform: scale(1) translateY(-3px); }
    64% { transform: scale(1) translateY(0); }
    100% { transform: scale(1) translateY(0); }
}

.icon-animate-pulse {
    transition: transform 0.3s ease;
    display: inline-block;
}

.text-warning:hover .icon-animate-pulse {
    animation: iconPulse 1.5s ease infinite;
}

@keyframes iconPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.info-card {
    background-color: rgba(247, 125, 170, 0.05);
    border-radius: var(--border-radius-base);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border: 1px dashed rgba(247, 125, 170, 0.3);
    position: relative;
    transition: all 0.3s ease;
}

.info-card:hover {
    background-color: rgba(247, 125, 170, 0.1);
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(247, 125, 170, 0.1);
}

.info-card h3 {
    color: var(--accent-color);
    margin-bottom: 1rem;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
}

.info-card h3 i {
    margin-right: 10px;
    font-size: 1.1em;
}

.info-card p {
    margin-bottom: 0.7rem;
}

.anime-icons {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

.anime-icon {
    background-color: var(--primary-color);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.anime-icon:last-child {
    background-color: var(--accent-color);
}

.anime-icon:hover {
    transform: translateY(-3px) rotate(3deg);
    box-shadow: 0 5px 15px rgba(122, 162, 247, 0.3);
}

.anime-icon:last-child:hover {
    box-shadow: 0 5px 15px rgba(247, 125, 170, 0.3);
}

.guide-divider {
    text-align: center;
    margin: 2rem 0;
    position: relative;
}

.guide-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color) 20%, var(--border-color) 80%, transparent);
}

.divider-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: white;
    border-radius: 50%;
    position: relative;
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.divider-icon:hover {
    transform: rotate(180deg);
    color: var(--accent-color);
}

.divider-icon i {
    font-size: 1.2rem;
}

.guide-intro {
    font-size: 1.2rem;
    color: var(--accent-color);
    font-weight: 500;
    text-align: center;
    max-width: 90%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 0.5rem;
    transition: color 0.4s ease, transform 0.4s ease;
    text-shadow: 0 0 0 transparent;
}

.guide-intro:hover {
    color: var(--accent-color);
    transform: translateY(-3px) scale(1.02);
    text-shadow: 0 2px 8px rgba(247, 125, 170, 0.2);
}

.guide-intro::after {
    content: "";
    position: absolute;
    right: -15px;
    bottom: -5px;
    font-size: 1.3rem;
    opacity: 0;
    transform: scale(0.5) rotate(-15deg);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
    pointer-events: none;
    filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.5));
}

.guide-intro:hover::after {
    opacity: 1;
    transform: scale(1);
    animation: starTwinkle 2s ease-in-out infinite;
    filter: drop-shadow(0 0 4px rgba(255, 215, 0, 0.6));
}

@keyframes starTwinkle {
    0%, 100% { transform: scale(1) rotate(5deg); filter: brightness(1); }
    30% { transform: scale(1.1) rotate(8deg); filter: brightness(1.2); }
    50% { transform: scale(1.15) rotate(10deg); filter: brightness(1.3); }
    70% { transform: scale(1.1) rotate(8deg); filter: brightness(1.2); }
}

.feature-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgba(122, 162, 247, 0.05);
    border-radius: var(--border-radius-base);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(122, 162, 247, 0.1);
    transition: all 0.3s ease;
}

.feature-box:hover {
    background-color: rgba(122, 162, 247, 0.1);
    transform: translateY(-3px);
}

.feature-content {
    flex: 1;
}

.feature-content p {
    margin: 0;
}

.feature-actions {
    display: flex;
    gap: 0.5rem;
}

.feature-tag {
    background-color: var(--primary-color);
    color: white;
    padding: 0.3rem 0.8rem;
    border-radius: var(--border-radius-pill);
    font-size: 0.8rem;
    font-weight: 600;
    transition: all 0.3s ease;
}

.feature-tag:nth-child(2) {
    background-color: var(--accent-color);
}

.feature-tag:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 10px rgba(122, 162, 247, 0.3);
}

.feature-tag:nth-child(2):hover {
    box-shadow: 0 3px 10px rgba(247, 125, 170, 0.3);
}

.guide-image {
    margin-bottom: 2rem;
    border-radius: var(--border-radius-base);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    position: relative;
}

.guide-image:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-5px);
}

.animated-image img {
    display: block;
    width: 100%;
    transition: all 0.5s ease;
    transform-origin: center;
    cursor: pointer;
    user-select: none;
    border-radius: var(--border-radius-base);
    box-shadow: 0 10px 30px rgba(122, 162, 247, 0.15);
}

.animated-image img.hover-effect {
    transform: scale(1.03);
}

.small-image {
    max-width: 90%;
    margin-top: 1rem;
}

.tip-box {
    display: flex;
    align-items: flex-start;
    background-color: rgba(247, 212, 125, 0.1);
    border-radius: var(--border-radius-base);
    padding: 1.5rem;
    margin-bottom: 2rem;
    border-left: 3px solid #f7d47d;
    transition: all 0.3s ease;
}

.tip-box:hover {
    background-color: rgba(247, 212, 125, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(247, 212, 125, 0.2);
}

.tip-icon {
    margin-right: 1rem;
    color: #f7d47d;
    font-size: 1.5rem;
}

.tip-content {
    flex: 1;
}

.tip-content h4 {
    color: #d4a63a;
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
}

.tip-content p {
    margin: 0;
}

.section-intro {
    font-size: 1.1rem;
    color: var(--secondary-color);
    margin-bottom: 1.5rem;
}

.operation-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.operation-card {
    background-color: white;
    border-radius: var(--border-radius-base);
    padding: 1.5rem;
    box-shadow: var(--card-shadow);
    transition: all 0.3s ease;
    border: 1px solid var(--border-color);
}

.operation-card:hover {
    box-shadow: var(--card-hover-shadow);
    transform: translateY(-5px);
}

.operation-icon {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(122, 162, 247, 0.1);
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}

.operation-card:nth-child(2) .operation-icon {
    background-color: rgba(247, 125, 170, 0.1);
    color: var(--accent-color);
}

.operation-card:hover .operation-icon {
    transform: scale(1.1) rotate(10deg);
    background-color: var(--primary-color);
    color: white;
}

.operation-card:nth-child(2):hover .operation-icon {
    background-color: var(--accent-color);
}

.operation-details h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    color: var(--heading-color);
    transition: all 0.3s ease;
}

.operation-card:hover .operation-details h3 {
    color: var(--primary-color);
}

.operation-card:nth-child(2):hover .operation-details h3 {
    color: var(--accent-color);
}

.feature-highlight {
    background-color: rgba(122, 162, 247, 0.05);
    border-radius: var(--border-radius-base);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(122, 162, 247, 0.1);
    position: relative;
    transition: all 0.3s ease;
}

.feature-highlight::before {
    content: "";
    position: absolute;
    top: -10px;
    left: 20px;
    background-color: white;
    padding: 0 10px;
    font-size: 1.2rem;
}

.feature-highlight:hover {
    background-color: rgba(122, 162, 247, 0.1);
    transform: translateX(5px);
}

.feature-highlight p {
    margin: 0;
}

.conclusion-box {
    display: flex;
    align-items: center;
    background-color: rgba(122, 210, 122, 0.1);
    border-radius: var(--border-radius-base);
    padding: 1.5rem;
    margin-top: 2rem;
    border: 1px solid rgba(122, 210, 122, 0.3);
    transition: all 0.3s ease;
}

.conclusion-box:hover {
    background-color: rgba(122, 210, 122, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(122, 210, 122, 0.2);
}

.conclusion-icon {
    margin-right: 1.5rem;
    color: #52c41a;
    font-size: 2rem;
}

.conclusion-content {
    flex: 1;
}

.conclusion-content h3 {
    color: #52c41a;
    margin-bottom: 0.5rem;
    font-size: 1.3rem;
}

.conclusion-content p {
    margin: 0;
}

@media (max-width: 768px) {
    .guide-hero-title {
        font-size: 2.3rem;
    }
    
    .guide-content {
        padding: 1.5rem;
    }
    
    .author-card {
        flex-direction: column;
        text-align: center;
    }
    
    .author-avatar {
        margin-right: 0;
        margin-bottom: 1.5rem;
}

.author-avatar img {
        width: 70px;
        height: 70px;
    }
    
    .operation-cards {
        grid-template-columns: 1fr;
    }
    
    .feature-box {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .feature-actions {
        margin-top: 1rem;
    }
    
    .animated-title {
        font-size: 1.7rem;
    }
}

@media (max-width: 480px) {
    .guide-hero-title {
        font-size: 1.8rem;
    }
    
    .guide-content {
        padding: 1rem;
    }
    
    .animated-title {
        font-size: 1.5rem;
    }
    
    .info-card,
    .tip-box,
    .conclusion-box,
    .feature-highlight,
    .feature-box {
        padding: 1rem;
    }
}

.animated-image img {
    display: block;
    width: 100%;
    transition: all 0.5s ease;
    transform-origin: center;
    cursor: pointer;
    user-select: none;
    border-radius: var(--border-radius-base);
    box-shadow: 0 10px 30px rgba(122, 162, 247, 0.15);
}

.small-image {
    max-width: 90%;
    margin-top: 1rem;
}

.tip-box {
    position: relative;
    overflow: visible !important;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tip-box:hover {
    transform: translateY(-5px);
}

.tip-box::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 20px;
    width: 20px;
    height: 20px;
    background-color: rgba(122, 162, 247, 0.1);
    border: 1px solid rgba(122, 162, 247, 0.3);
    transform: rotate(45deg);
    border-bottom: none;
    border-right: none;
    z-index: 0;
    transition: all 0.3s ease;
    display: none; /* 隐藏这个蓝色正方形 */
}

.tip-box:hover::before {
    background-color: rgba(122, 162, 247, 0.2);
    transform: rotate(45deg) scale(1.2);
    display: none; /* 悬停时也隐藏 */
}

.tip-icon {
    position: relative;
    z-index: 2;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.tip-box:hover .tip-icon {
    transform: scale(1.2) rotate(15deg);
}

.click-ripple {
    pointer-events: none;
    z-index: 9999;
}

.anime-particle {
    position: absolute;
    pointer-events: none;
    border-radius: 50%;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.8));
}

.guide-divider {
    position: relative;
    overflow: visible;
}

.divider-icon {
    position: relative;
    z-index: 2;
    transition: all 0.5s ease;
    animation: pulse 3s infinite ease-in-out;
}

.divider-icon:hover {
    transform: rotate(180deg) scale(1.2);
    animation: none;
}

.divider-icon i {
    transition: all 0.3s ease;
}

.guide-divider::before,
.guide-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    height: 1px;
    width: 40%;
    background: linear-gradient(90deg, 
        rgba(122, 162, 247, 0.1), 
        rgba(122, 162, 247, 0.5)
    );
    z-index: 1;
    transition: all 0.5s ease;
}

.guide-divider::before {
    left: 0;
}

.guide-divider::after {
    right: 0;
    background: linear-gradient(90deg, 
        rgba(122, 162, 247, 0.5), 
        rgba(122, 162, 247, 0.1)
    );
}

.guide-divider:hover::before,
.guide-divider:hover::after {
    width: 45%;
    background: linear-gradient(90deg, 
        rgba(247, 125, 170, 0.1), 
        rgba(247, 125, 170, 0.7)
    );
}

.guide-divider:hover::after {
    background: linear-gradient(90deg, 
        rgba(247, 125, 170, 0.7), 
        rgba(247, 125, 170, 0.1)
    );
}

.conclusion-icon i {
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.conclusion-box:hover .conclusion-icon i {
    transform: scale(1.3) rotate(360deg);
}

.conclusion-content h3 {
    position: relative;
    display: inline-block;
}

.conclusion-content h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #52c41a, rgba(82, 196, 26, 0.2));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.conclusion-box:hover .conclusion-content h3::after {
    transform: scaleX(1);
}

@keyframes sparkle {
    0%, 100% { 
        opacity: 0.2;
        filter: blur(1px);
    }
    50% { 
        opacity: 1;
        filter: blur(0);
    }
}

.conclusion-box:hover {
    background-image: 
        radial-gradient(
            circle at 20% 70%, 
            rgba(122, 210, 122, 0.3) 0%, 
            rgba(122, 210, 122, 0.1) 20%, 
            transparent 50%
        ),
        radial-gradient(
            circle at 80% 30%, 
            rgba(122, 210, 122, 0.3) 0%, 
            rgba(122, 210, 122, 0.1) 20%, 
            transparent 50%
        );
}

.bilibili-link {
    color: #00a1d6;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

.bilibili-link:hover {
    color: #fb7299;
    transform: translateY(-2px);
}

.bilibili-link i {
    font-size: 1.2em;
    pointer-events: none;
}

.bilibili-link span {
    pointer-events: none;
}

.bilibili-link:hover i {
    animation: bilibiliBounce 0.5s ease;
}

@keyframes bilibiliBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* 为Catime文字添加特殊动画 */
.catime-text {
    color: var(--primary-color);
    position: relative;
    display: inline-block;
    font-weight: 700;
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: center;
    margin-right: 5px;
    z-index: 2;
}

.catime-text::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(122, 162, 247, 0.1);
    left: 0;
    top: 0;
    border-radius: 10px;
    transform: scale(0);
    z-index: -1;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.guide-hero-title:hover .catime-text {
    color: var(--primary-hover);
    text-shadow: 0 0 15px rgba(122, 162, 247, 0.8);
    transform: scale(1.1) rotate(-2deg);
    animation: catimeBounce 2s infinite alternate;
}

.guide-hero-title:hover .catime-text::before {
    transform: scale(1.2);
    animation: catimeBgPulse 2s infinite alternate;
}

@keyframes catimeBounce {
    0% {
        transform: scale(1.1) rotate(-2deg) translateY(0);
        color: var(--primary-color);
    }
    50% {
        transform: scale(1.2) rotate(0deg) translateY(-5px);
        color: #5b7fd9;
        text-shadow: 0 0 20px rgba(122, 162, 247, 0.9), 0 0 30px rgba(122, 162, 247, 0.5);
    }
    100% {
        transform: scale(1.15) rotate(2deg) translateY(-3px);
        color: #68a5ff;
        text-shadow: 0 0 15px rgba(122, 162, 247, 0.7), 0 0 25px rgba(122, 162, 247, 0.4);
    }
}

@keyframes catimeBgPulse {
    0% {
        transform: scale(1.2);
        background-color: rgba(122, 162, 247, 0.1);
    }
    100% {
        transform: scale(1.3);
        background-color: rgba(122, 162, 247, 0.2);
    }
}

/* 为guide-hero添加魔法粒子效果 */
.guide-hero {
    background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
    padding: 4rem 0 2rem;
    position: relative;
    overflow: hidden;
    text-align: center;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(122, 162, 247, 0.3);
}

.guide-hero::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-image: 
        radial-gradient(circle at 20% 30%, rgba(122, 162, 247, 0.3) 0%, rgba(122, 162, 247, 0) 20%),
        radial-gradient(circle at 80% 20%, rgba(247, 125, 170, 0.3) 0%, rgba(247, 125, 170, 0) 20%),
        radial-gradient(circle at 10% 80%, rgba(122, 162, 247, 0.2) 0%, rgba(122, 162, 247, 0) 15%),
        radial-gradient(circle at 90% 70%, rgba(247, 125, 170, 0.2) 0%, rgba(247, 125, 170, 0) 15%);
    opacity: 0.7;
    z-index: 0;
    animation: heroGlow 10s ease-in-out infinite alternate;
}

@keyframes heroGlow {
    0% {
        opacity: 0.5;
        background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%;
    }
    100% {
        opacity: 0.8;
        background-position: 5% 5%, 95% 5%, 5% 95%, 95% 95%;
    }
}

/* 让漂浮图标更加突出 */
.floating-icon {
    position: absolute;
    font-size: 2.5rem;
    opacity: 0;
    color: var(--primary-color);
    filter: drop-shadow(0 2px 5px rgba(122, 162, 247, 0.5));
    animation: iconAppear 0.5s ease forwards, floatIcon 6s ease-in-out infinite;
    transition: all 0.3s ease;
    z-index: 1;
}

.floating-icon::after {
    content: "";
    position: absolute;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(122, 162, 247, 0.4) 0%, rgba(122, 162, 247, 0) 70%);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    z-index: -1;
    transition: all 0.5s ease;
}

.guide-hero:hover .floating-icon::after {
    animation: iconGlow 4s infinite alternate;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.7;
}

@keyframes iconGlow {
    0% {
        transform: translate(-50%, -50%) scale(0.8);
        opacity: 0.3;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 0.6;
    }
}

@keyframes rocketLaunch {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
    filter: drop-shadow(0 0 2px #ff9e64);
  }
  20% {
    transform: translateY(-8px) rotate(-5deg) scale(1.1);
    filter: drop-shadow(0 0 5px #ff9e64);
  }
  40% {
    transform: translateY(-12px) rotate(5deg) scale(1.15);
    opacity: 0.8;
  }
  60% {
    transform: translateY(-18px) rotate(-8deg) scale(1.25);
    filter: drop-shadow(0 0 10px #f7768e) drop-shadow(0 0 5px #ff9e64);
  }
  80% {
    transform: translateY(-25px) rotate(10deg) scale(1.3);
    opacity: 0.5;
  }
  100% {
    transform: translateY(-40px) rotate(0deg) scale(1.5);
    opacity: 0;
    filter: drop-shadow(0 0 15px #f7768e) drop-shadow(0 0 8px #ff9e64);
  }
}

/* ... existing code ... */

.animated-title:hover i {
  /* 保持原有的动画，如果需要 */
  transform: translateY(-3px) rotate(-5deg);
  color: var(--accent-color); /* 保持或修改悬停颜色 */
}

/* 为"开始使用"标题中的火箭图标添加特定的悬停动画 */
.animated-title:hover i.fa-rocket {
  animation: rocketLaunch 0.8s ease-in-out forwards; /* 应用新的动画 */
  /* 可能需要移除或调整原有的 transform，避免冲突 */
  /* transform: none; */ /* 如果原 transform 干扰动画，取消注释此行 */
  color: #f7768e; /* 给火箭一个更亮的颜色 */
}

/* ... existing code ... */

/* 贡献者区域 */
.contributors {
    padding: 80px 0;
    background-color: var(--bg-secondary); /* 使用次要背景色 */
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* 添加背景动效 */
.contributors::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 120%, rgba(122, 162, 247, 0.08), transparent 70%);
    opacity: 0.6;
    z-index: 0;
    transition: opacity 0.5s ease;
}

.contributors:hover::before {
    opacity: 1;
    animation: softGlow 5s infinite alternate;
}

@keyframes softGlow {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(1.2); opacity: 1; }
}

.contributors .section-title,
.contributors .section-subtitle {
    margin-bottom: 40px; /* 调整标题和副标题的间距 */
    position: relative;
    z-index: 1;
}

.contributors-grid table {
    width: 100%;
    border-collapse: separate; /* 使用 separate 以便应用 border-radius */
    border-spacing: 15px; /* 控制单元格之间的间距 */
    margin-top: 20px;
    position: relative;
    z-index: 1;
}

.contributors-grid td {
    background-color: var(--bg-color); /* 卡片背景色 */
    padding: 20px 10px;
    border-radius: 12px; /* 圆角 */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    vertical-align: top; /* 确保内容顶部对齐 */
    position: relative;
    overflow: hidden;
}

.contributors-grid td::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(122, 162, 247, 0.1), rgba(247, 125, 170, 0.1));
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease, transform 0.5s ease;
    transform: scale(0.9);
    border-radius: 12px;
}

.contributors-grid td:hover {
    transform: translateY(-8px) scale(1.03); /* 悬停时轻微上移放大 */
    box-shadow: 0 8px 25px rgba(122, 162, 247, 0.2); /* 添加蓝色辉光效果 */
}

.contributors-grid td:hover::before {
    opacity: 1;
    transform: scale(1);
}

.contributor-avatar-container {
    position: relative;
    width: 86px;
    height: 86px;
    margin: 0 auto 10px;
    perspective: 800px;
}

.contributor-avatar-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 50%;
    background: none; /* 移除背景渐变 */
    filter: blur(8px);
    opacity: 0;
    transform: scale(1.1);
    transition: opacity 0.5s ease, transform 0.5s ease;
    animation: none; /* 移除旋转动画 */
}

@keyframes rotateGlow {
    0% { transform: scale(1.1) rotate(0deg); }
    100% { transform: scale(1.1) rotate(360deg); }
}

.contributors-grid td:hover .contributor-avatar-glow {
    opacity: 0; /* 设置为透明，不显示粉色圈 */
    transform: scale(1.15);
}

.contributors-grid img {
    width: 80px; /* 调整头像大小 */
    height: 80px;
    border-radius: 50%; /* 圆形头像 */
    object-fit: cover; /* 确保图片不变形 */
    border: 3px solid transparent;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: block; /* 确保图片居中 */
    margin: 0 auto;
    position: relative;
    z-index: 1;
    transform-style: preserve-3d;
}

.contributors-grid td:hover img {
    border-color: var(--primary-color); /* 悬停时显示边框 */
    transform: scale(1.1) rotateY(10deg) rotateX(-10deg); /* 添加3D旋转效果 */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.contributors-grid a {
    text-decoration: none;
    color: inherit; /* 继承父元素颜色 */
    display: block; /* 使整个单元格可点击 */
    position: relative;
}

.contributors-grid sub {
    font-size: 0.9em;
    color: var(--text-secondary);
    display: block; /* 换行显示 */
    margin-top: 8px;
    transition: transform 0.3s ease;
}

.contributors-grid sub b {
    color: var(--text-color);
    font-weight: 600;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
}

.contributors-grid sub b::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(to right, var(--primary-color), var(--accent-color));
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.contributors-grid td:hover sub {
    transform: translateY(3px);
}

.contributors-grid td:hover sub b {
    color: var(--primary-color); /* 悬停时名字变色 */
}

.contributors-grid td:hover sub b::after {
    width: 100%;
}

/* 贡献者区域的移动端适配 */
@media (max-width: 992px) {
    .contributors-grid table {
        border-spacing: 10px; /* 减小单元格间距 */
    }
    
    .contributors-grid td {
        padding: 15px 8px; /* 减小内边距 */
    }
    
    .contributors-grid img {
        width: 70px; /* 缩小头像尺寸 */
        height: 70px;
    }
    
    .contributor-avatar-container {
        width: 76px;
        height: 76px;
    }
}

@media (max-width: 768px) {
    .contributors {
        padding: 60px 0; /* 减小顶部和底部内边距 */
    }
    
    .contributors-grid table {
        border-spacing: 8px; /* 进一步减小单元格间距 */
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .contributors-grid tbody {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    
    .contributors-grid tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }
    
    .contributors-grid td {
        padding: 12px 5px; /* 减小内边距 */
        display: inline-block;
        width: calc(33.33% - 16px); /* 一行显示3个 */
        margin: 8px;
        float: none;
    }
    
    .contributors-grid img {
        width: 60px; /* 进一步缩小头像尺寸 */
        height: 60px;
        border-width: 2px; /* 减小边框宽度 */
    }
    
    .contributor-avatar-container {
        width: 66px;
        height: 66px;
        margin-bottom: 6px; /* 减小下边距 */
    }
    
    .contributors-grid sub {
        font-size: 0.75em; /* 缩小字体大小 */
        margin-top: 5px; /* 减小上边距 */
    }
}

@media (max-width: 480px) {
    .contributors-grid table {
        border-spacing: 5px; /* 最小化单元格间距 */
    }
    
    .contributors-grid td {
        padding: 10px 3px; /* 最小化内边距 */
        width: calc(50% - 10px); /* 一行显示2个 */
        margin: 5px;
    }
    
    .contributors-grid img {
        width: 50px; /* 进一步缩小头像尺寸 */
        height: 50px;
    }
    
    .contributor-avatar-container {
        width: 56px;
        height: 56px;
    }
    
    .contributors-grid sub {
        font-size: 0.7em; /* 进一步缩小字体大小 */
    }
    
    .contributors .section-title {
        font-size: 1.8rem; /* 缩小标题尺寸 */
    }
    
    .contributors .section-subtitle {
        font-size: 0.9rem; /* 缩小副标题尺寸 */
    }
}

/* 支持项目区域 */
.support-project {
    padding: 6rem 0;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(240, 245, 255, 0.8) 100%);
    position: relative;
    border-top: 1px solid rgba(122, 162, 247, 0.15);
    overflow: hidden;
}

.support-project::before {
    content: '';
    position: absolute;
    top: -10%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(122, 162, 247, 0.1) 0%, rgba(122, 162, 247, 0) 70%);
    border-radius: 50%;
    z-index: 1;
    animation: supportBgPulse 8s infinite alternate ease-in-out;
}

.support-project::after {
    content: '';
    position: absolute;
    bottom: -5%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(247, 125, 170, 0.1) 0%, rgba(247, 125, 170, 0) 70%);
    border-radius: 50%;
    z-index: 1;
    animation: supportBgPulse 8s infinite alternate-reverse ease-in-out;
}

@keyframes supportBgPulse {
    0% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(1.1); opacity: 0.7; }
    100% { transform: scale(1); opacity: 0.4; }
}

.support-methods {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 4rem;
    margin-top: 3rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.support-method {
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding: 2rem;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(122, 162, 247, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
    transform: translateY(0);
}

.support-method::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(122, 162, 247, 0.2) 0%, rgba(122, 162, 247, 0) 70%);
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.4s ease;
    z-index: 1;
}

.support-method:hover::before {
    opacity: 1;
    transform: scale(1);
}

.support-method:hover {
    transform: translateY(-15px);
    box-shadow: 0 20px 40px rgba(122, 162, 247, 0.25), 0 0 20px rgba(122, 162, 247, 0.1);
    border-color: rgba(122, 162, 247, 0.3);
}

.support-qr {
    width: 180px;
    height: 180px;
    object-fit: contain;
    margin-bottom: 1.5rem;
    border-radius: 15px;
    border: 2px solid rgba(255, 255, 255, 0.9);
    background-color: #fff;
    padding: 10px;
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.support-method:hover .support-qr {
    transform: scale(1.05) rotate(1deg);
    border-color: var(--accent-color);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.support-method:hover .alipay-qr {
    border-color: #1677ff;
}

.support-method:hover .wechat-qr {
    border-color: #07c160;
}

.support-label {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-light-color);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
}

.support-method:hover .support-label {
    color: var(--primary-color);
    transform: translateY(-2px) scale(1.05);
    text-shadow: 0 2px 10px rgba(122, 162, 247, 0.3);
}

.support-label i {
    font-size: 1.4rem;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.support-method:hover .support-label i {
    transform: scale(1.3) rotate(-10deg);
    animation: iconWiggle 1s infinite alternate ease-in-out;
}

@keyframes iconWiggle {
    0% { transform: scale(1.3) rotate(-10deg); }
    100% { transform: scale(1.3) rotate(5deg); }
}

.support-label.alipay i {
    color: #1677ff;
}

.support-method:hover .support-label.alipay {
    color: #1677ff;
}

.support-label.wechat i {
    color: #07c160;
}

.support-method:hover .support-label.wechat {
    color: #07c160;
}

/* Coffee Icon Animation */
.support-project .section-title i.fa-mug-hot {
    display: inline-block; /* Needed for transform */
    transition: transform 0.3s ease, opacity 0.3s ease; /* Added transition for smoother hover effect */
    opacity: 0.8; /* Slightly faded when not animating */
    transform-origin: bottom center;
}

/* Add hover state animation */
.support-project .section-title:hover i.fa-mug-hot {
    animation: coffeeSteam 1.5s ease-in-out infinite alternate;
}

@keyframes coffeeSteam {
    0% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
    50% { transform: translateY(-3px) rotate(-5deg); opacity: 1; }
    100% { transform: translateY(0) rotate(0deg); opacity: 0.6; }
}

.support-project .section-subtitle {
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.support-project .section-subtitle:hover {
    transform: translateY(-3px);
    color: var(--primary-color);
}

@media (max-width: 768px) {
    .support-methods {
        gap: 3rem;
        flex-direction: column;
        align-items: center;
    }
    .support-method {
        width: 85%;
        max-width: 300px;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .support-qr {
        width: 160px;
        height: 160px;
        margin: 0 auto 1rem auto;
    }
    .support-label {
        font-size: 1.1rem;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .support-project {
        padding: 4rem 0;
    }
    .support-method {
        width: 90%;
        max-width: 280px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .support-qr {
        width: 140px;
        height: 140px;
        margin: 0 auto 1rem auto;
    }
    .support-label {
        font-size: 1rem;
        margin: 0 auto;
    }
}

/* 添加咖啡图标飘动粒子效果 */
.support-project .coffee-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.coffee-particle {
    position: absolute;
    width: 30px;
    height: 30px;
    background: transparent;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    animation: coffeeFloat 8s linear infinite;
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coffee-particle i {
    transform: translateZ(0);
    filter: drop-shadow(0 0 5px rgba(255, 172, 51, 0.3));
    animation: rotateCoffee 4s linear infinite;
}

@keyframes rotateCoffee {
    0% { transform: rotate(0deg) scale(1); }
    50% { transform: rotate(180deg) scale(1.2); }
    100% { transform: rotate(360deg) scale(1); }
}

@keyframes coffeeFloat {
    0% {
        transform: translateY(100%) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
    }
}