: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: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 100%;
    z-index: 1000;
    
    background-color: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid transparent;
    box-shadow: none;
    
    padding: 1.2rem 3rem;
    border-radius: 0;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-header.scrolled {
    top: 20px;
    width: 90%;
    max-width: 1100px;
    padding: 0.6rem 1.5rem;
    
    background-color: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 50px;
    
    box-shadow: 
        0 10px 30px -10px rgba(122, 162, 247, 0.15),
        0 4px 10px rgba(0, 0, 0, 0.02),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.main-header .container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0;
    width: 100%;
    max-width: 100%;
}

@media (max-width: 768px) {
    .main-header .container {
        display: flex;
        justify-content: space-between;
    }

    .main-header {
        padding: 1rem 1.5rem;
    }
    
    .main-header.scrolled {
        width: 94%;
        padding: 0.6rem 1rem;
        border-radius: 20px;
    }
}

.logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--heading-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    justify-self: start;
}

.logo-img {
    height: 2.5rem;
    width: auto;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 0;
    padding: 0;
    justify-self: center;
}

.nav-links a {
    color: var(--text-color);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    opacity: 0.7;
    position: relative;
}

.nav-links a:hover {
    color: var(--primary-color);
    opacity: 1;
}

.nav-links a::after {
    display: none;
}

.nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: end;
}

.action-buttons {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.support-btn {
    background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%) !important;
    background-image: linear-gradient(135deg, #ffb7b2 0%, #ff9a9e 100%) !important;
    color: white !important;
    border: none;
    padding: 0.5rem 1.4rem !important;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    white-space: nowrap;
    
    box-shadow: 
        0 4px 15px rgba(255, 154, 158, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0);
    overflow: hidden;
    position: relative;
}

.support-btn:hover {
    transform: translateY(-2px);
    box-shadow: 
        0 8px 25px rgba(255, 154, 158, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.4);
    background-image: linear-gradient(135deg, #ffc3be 0%, #ff9a9e 100%) !important;
}

.support-btn i {
    font-size: 1.1rem;
    color: white !important; /* Ensure icon is white */
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
    transition: all 0.3s ease;
}

.support-btn:hover i {
    transform: rotate(-10deg) scale(1.1);
    animation: none;
}

.download-btn {
    background: linear-gradient(135deg, #66a6ff 0%, #89f7fe 100%) !important;
    background-image: linear-gradient(120deg, #89f7fe 0%, #66a6ff 100%) !important;
    color: white !important;
    border: none;
    padding: 0.6rem 1.6rem !important;
    font-weight: 700;
    font-size: 0.95rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
    
    box-shadow: 
        inset 0 2px 0 rgba(255, 255, 255, 0.4),
        inset 0 -2px 0 rgba(0, 0, 0, 0.05),
        0 4px 10px rgba(102, 166, 255, 0.3);
        
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.download-btn::before { display: none; }

.download-btn:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 
        inset 0 2px 0 rgba(255, 255, 255, 0.6),
        inset 0 -2px 0 rgba(0, 0, 0, 0.05),
        0 8px 20px rgba(102, 166, 255, 0.5);
    background-image: linear-gradient(120deg, #a1f9ff 0%, #66a6ff 100%) !important;
}

.download-btn i {
    margin-right: 0.4rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}


@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 {
    position: relative;
    padding: 8rem 0 6rem;
    background-color: #f8faff;
    overflow: hidden;
    perspective: 1000px;
}

.hero-spotlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        800px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), 
        rgba(255, 255, 255, 0.8), 
        transparent 40%
    );
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: soft-light;
}

.hero-bg-text {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%) translateZ(-50px);
    font-size: 25vw;
    font-weight: 900;
    line-height: 1;
    color: rgba(122, 162, 247, 0.08);
    white-space: nowrap;
    pointer-events: none;
    z-index: 0;
    font-family: var(--font-family);
    letter-spacing: -0.05em;
    user-select: none;
    transition: transform 0.1s linear;
    mix-blend-mode: multiply;
}

.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-slogan {
    font-size: 4.5rem;
    font-weight: 800;
    color: #2e3a59;
    margin-bottom: 2rem;
    letter-spacing: -0.03em;
    line-height: 1.1;
    position: relative;
}

.highlight-text {
    background: linear-gradient(135deg, #7aa2f7 0%, #f77daa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    position: relative;
}

.ciallo-container {
    display: block;
    margin-top: 0.8rem;
    position: relative;
    perspective: 500px;
}

.ciallo-text {
    font-family: 'Comic Sans MS', 'Chalkboard SE', sans-serif;
    font-size: 0.65em;
    font-weight: 700;
    background: linear-gradient(90deg, #7aa2f7 0%, #f77daa 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    cursor: pointer;
    filter: drop-shadow(0 2px 4px rgba(122, 162, 247, 0.2));
}

.ciallo-text:hover {
transform: scale(1.1) rotate(2deg);
filter: drop-shadow(0 5px 15px rgba(247, 125, 170, 0.3));
}

.magazine-layout {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
position: relative;
margin-bottom: 3rem;
}

.magazine-layout::before {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    width: 1px;
    background: linear-gradient(180deg, 
        rgba(122, 162, 247, 0) 0%, 
        rgba(122, 162, 247, 0.3) 20%, 
        rgba(122, 162, 247, 0.3) 80%, 
        rgba(122, 162, 247, 0) 100%
    );
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
}

.editorial-meta {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    max-width: 95%;
    min-width: 800px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 0; 
}

.meta-group {
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.meta-group:hover {
    opacity: 1;
}

.meta-group.left {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    text-align: right;
    border-right: 1px solid rgba(122, 162, 247, 0.3);
    padding-right: 1rem;
}

.meta-group.right {
    writing-mode: vertical-rl;
    text-align: left;
    border-left: 1px solid rgba(247, 125, 170, 0.3);
    padding-left: 1rem;
}

.meta-label {
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 0.75rem;
    color: #9aa5ce;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.meta-value {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.65rem;
    color: #b4c6ef;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.meta-value i {
    transform: rotate(90deg);
}

.blink-dot {
    color: #f77daa;
    animation: blink 1.5s infinite;
    font-size: 0.8em;
    margin-top: 5px;
}

.stat-block {
    position: relative;
    line-height: 0.8;
    margin: 0.5rem 0;
    animation: fadeInUp 1s ease-out;
    z-index: 1;
}

.stat-number {
    font-family: 'Playfair Display', 'Didot', 'Bodoni MT', 'Noto Serif SC', serif;
    font-size: 8rem;
    font-style: italic;
    font-weight: 700;
    background: linear-gradient(135deg, #7aa2f7 0%, #b4c6ef 50%, rgba(255,255,255,0.2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 0.9;
    letter-spacing: -0.02em;
    filter: drop-shadow(0 10px 20px rgba(122, 162, 247, 0.15));
    padding-right: 1rem;
}

.stat-unit {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #414868;
    position: absolute;
    top: 50%;
    right: -1.5rem;
    transform: translateY(-50%) rotate(90deg);
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.tech-spec-line {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    color: #414868;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(5px);
    padding: 0.5rem 1.5rem;
    border-radius: 1px;
    z-index: 2;
    animation: fadeInUp 1s ease-out 0.2s backwards;
    position: relative;
}

.tech-spec-line .divider {
    color: #f77daa;
    margin: 0 1.5rem;
    opacity: 0.6;
    font-weight: 300;
    font-style: italic;
}


.narrative-line {
    font-size: 1rem;
    color: #626a87;
    font-weight: 400;
    letter-spacing: 0.05em;
    margin-top: 0.5rem;
    animation: fadeInUp 1s ease-out 0.4s backwards;
    position: relative;
    background: var(--surface-color);
    padding: 0 1rem;
}

.barcode-strip {
    height: 20px;
    width: 100%;
    max-width: 200px;
    background-image: linear-gradient(90deg, #2e3a59 0%, #2e3a59 2%, transparent 2%, transparent 4%, #2e3a59 4%, #2e3a59 5%, transparent 5%, transparent 8%, #2e3a59 8%, #2e3a59 12%, transparent 12%, transparent 14%, #2e3a59 14%, #2e3a59 20%, transparent 20%, transparent 25%, #2e3a59 25%, #2e3a59 26%, transparent 26%, transparent 30%);
    opacity: 0.1;
    margin-top: 1rem;
    background-size: 100% 100%;
}

@media (max-width: 1024px) {
    .editorial-meta { display: none; }
    .magazine-layout::before { display: none; }
}

@media (max-width: 768px) {
    .stat-number { font-size: 5rem; }
    .stat-unit { right: 0; top: 0; transform: none; font-size: 0.8rem; }
}

.hero-sub-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2rem;
    position: relative;
    gap: 1rem;
}

.hero-feature-badges {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    padding: 0.6rem 1.2rem;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 4px 20px rgba(122, 162, 247, 0.1);
    animation: fadeInUp 0.8s ease-out backwards;
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.8rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.feature-badge:hover {
    transform: translateY(-2px);
}

.feature-badge.tech {
    background: linear-gradient(135deg, #00599C, #007acc);
}

.feature-badge.size {
    background: linear-gradient(135deg, #10b981, #34d399);
}

.feature-separator {
    color: rgba(46, 58, 89, 0.2);
    font-size: 1.2rem;
    font-weight: 300;
}

.feature-text {
    font-size: 1.05rem;
    font-weight: 600;
    color: #2e3a59;
    letter-spacing: 0.02em;
}

.hero-feature-line {
    font-size: 1.1rem;
    color: #626a87;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.feature-highlight {
    background: linear-gradient(90deg, #7aa2f7, #f77daa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

.tech-tag {
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(122, 162, 247, 0.3);
    color: #414868;
    padding: 0.1rem 0.5rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: 'Consolas', monospace;
    box-shadow: 0 2px 4px rgba(122, 162, 247, 0.05);
}

.feature-dot {
    color: #f77daa;
    font-size: 0.8rem;
    opacity: 0.6;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.signature-decoration {
    font-family: 'Dancing Script', cursive;
    font-size: 1rem;
    color: #f77daa;
    margin-top: 1rem;
    transform: rotate(-5deg);
    opacity: 0.8;
    transition: transform 0.3s ease;
}

.signature-decoration:hover {
    transform: rotate(0deg) scale(1.1);
}

.hero-actions {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.btn-magnetic {
    position: relative;
    padding: 1rem 2.5rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 1.1rem;
    text-decoration: none;
    transition: transform 0.1s linear;
    transform-style: preserve-3d;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.btn-content {
    position: relative;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-magnetic.primary {
    background: linear-gradient(135deg, #ff9eb5 0%, #f77daa 100%);
    color: white !important;
    box-shadow: 0 10px 25px rgba(247, 125, 170, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.btn-glow {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0) 60%);
    z-index: 1;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.btn-magnetic.primary:hover .btn-glow {
    opacity: 0.3;
    transform: scale(1);
    animation: rotateShimmer 3s linear infinite;
}

@keyframes rotateShimmer {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.btn-magnetic.primary:hover {
    box-shadow: 0 15px 35px rgba(247, 125, 170, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.6);
}

.btn-magnetic.secondary {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(240, 245, 255, 0.8) 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #5c6b8f;
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 10px 25px rgba(122, 162, 247, 0.15), inset 0 2px 0 rgba(255, 255, 255, 1);
}

.btn-magnetic.secondary:hover {
    background: white;
    color: #2e3a59;
    border-color: white;
    box-shadow: 0 15px 35px rgba(122, 162, 247, 0.2), inset 0 2px 0 rgba(255, 255, 255, 1);
    transform: translateY(-2px);
}

.btn-magnetic.secondary i {
    color: #2e3a59;
    transition: transform 0.3s ease;
}

.btn-magnetic.secondary:hover i {
    transform: rotate(360deg);
}

.hero-visual-container {
    position: relative;
    width: 100%;
    max-width: 960px;
    margin: 0 auto;
    perspective: 2000px;
}

.ambient-light {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    background: radial-gradient(circle, rgba(122, 162, 247, 0.4) 0%, rgba(247, 125, 170, 0.2) 50%, transparent 80%);
    filter: blur(60px);
    z-index: -1;
    animation: breatheLight 6s ease-in-out infinite alternate;
}

@keyframes breatheLight {
    from { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
    to { opacity: 0.8; transform: translate(-50%, -50%) scale(1.1); }
}

/* --- Atmospheric Environment System --- */

/* 1. Micro-Texture (Film Grain) */
.bg-noise {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");
    opacity: 0.04;
    pointer-events: none;
    z-index: -5;
    animation: noiseMove 0.2s infinite;
}

@keyframes noiseMove {
    0% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -5%); }
    20% { transform: translate(-10%, 5%); }
    30% { transform: translate(5%, -10%); }
    40% { transform: translate(-5%, 15%); }
    50% { transform: translate(-10%, 5%); }
    60% { transform: translate(15%, 0); }
    70% { transform: translate(0, 10%); }
    80% { transform: translate(-15%, 0); }
    90% { transform: translate(10%, 5%); }
    100% { transform: translate(5%, 0); }
}

/* 2. Orbital System (Invisible Order) */
.orbital-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed rgba(161, 140, 209, 0.15);
    box-shadow: 0 0 40px rgba(161, 140, 209, 0.05);
}

.ring-1 {
    width: 140%;
    height: 140%;
    animation: rotateRing 60s linear infinite;
}

.ring-2 {
    width: 190%;
    height: 190%;
    border-style: solid;
    border-color: rgba(255, 154, 158, 0.08);
    animation: rotateRing 80s linear infinite reverse;
}

@keyframes rotateRing {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* 3. Foreground Depth (Bokeh) */
.foreground-bokeh {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 30; /* Above everything but clickable through */
    overflow: hidden;
}

.bokeh-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(50px);
    opacity: 0.4;
}

.orb-1 {
    width: 300px;
    height: 300px;
    bottom: -100px;
    left: -100px;
    background: radial-gradient(circle, rgba(122, 162, 247, 0.3), transparent 70%);
    animation: floatBokeh 10s ease-in-out infinite;
}

.orb-2 {
    width: 200px;
    height: 200px;
    top: -50px;
    right: -50px;
    background: radial-gradient(circle, rgba(255, 154, 158, 0.3), transparent 70%);
    animation: floatBokeh 12s ease-in-out infinite reverse;
}

@keyframes floatBokeh {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, -20px); }
}

.hero-visual-container {
    position: relative;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    perspective: 1500px; /* Moved perspective here to prevent AOS conflict */
}

.hero-visual-wrapper {
    /* Layer 1: Entrance Context */
    transform-style: preserve-3d;
    /* Custom Entrance Animation (Position Only) */
    animation: slideUpEntrance 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards 0.2s;
    opacity: 1; /* Always opaque to preserve 3D context */
    transform: translateY(100px); /* Start position */
}

.hero-3d-stage {
    /* Layer 2: Static Posture (The "Easel" Tilt) */
    transform-style: preserve-3d;
    transform: rotateX(15deg); /* Permanent 15deg tilt */
    width: 100%;
    height: 100%;
    /* Custom Entrance Animation (Opacity Only) */
    animation: fadeInEntrance 1s ease-out forwards 0.2s;
    opacity: 0; /* Start invisible */
}

@keyframes slideUpEntrance {
    from { transform: translateY(100px); }
    to { transform: translateY(0); }
}

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

.hero-video-frame {
    /* Layer 3: Floating Motion & Visuals */
    position: relative;
    border-radius: 24px;
    overflow: hidden; 
    transform: translateZ(0); 
    box-shadow: 
        0 30px 60px -15px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(255, 255, 255, 0.15) inset, 
        0 0 20px rgba(122, 162, 247, 0.1) inset; 
    animation: floatWindow 6s ease-in-out infinite;
    background: #000;
    z-index: 10;
}

@keyframes floatWindow {
    0%, 100% { 
        /* Pure Vertical Float (Tilt is handled by parent) */
        transform: translateY(0); 
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    }
    50% { 
        transform: translateY(-20px); 
        box-shadow: 0 45px 80px -20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.15) inset;
    }
}

.frame-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%; /* Larger than parent to bleed out */
    height: 120%;
    background: linear-gradient(135deg, rgba(161, 140, 209, 0.4), rgba(251, 194, 235, 0.4)); /* Brand gradient */
    filter: blur(80px); /* Extreme diffuse */
    z-index: -1; /* Behind video */
    opacity: 0.6;
    animation: pulseGlow 6s ease-in-out infinite alternate;
    border-radius: 40%;
}

.hero-video {
    width: 100%;
    display: block;
    border-radius: 24px;
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Fix border radius clipping in some browsers */
    mask-image: radial-gradient(white, black);
}

/* Removed obsolete OS window styles */

.floating-element {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
}

.float-cat {
    top: -80px;
    right: -60px;
    width: 140px;
    height: auto;
    opacity: 0.9;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.15));
    animation: floatCat 6s ease-in-out infinite;
}

@keyframes floatCat {
    0%, 100% { transform: translateY(0) rotate(5deg); }
    50% { transform: translateY(-15px) rotate(0deg); }
}

.float-icon-1, .float-icon-2, .float-icon-3, .float-icon-4, .float-icon-5, .float-icon-6 {
    font-size: 1.8rem;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* Perfect circles look more "particle-like" */
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.float-icon-1:hover, .float-icon-2:hover, .float-icon-3:hover, .float-icon-4:hover, .float-icon-5:hover, .float-icon-6:hover {
    transform: scale(1.15) translateY(-5px);
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 0 15px 35px -5px rgba(0,0,0,0.2);
    border-color: rgba(255, 255, 255, 0.8);
}

/* Distribute icons further to avoid clutter */
.float-icon-1 {
    top: 15%;
    left: -120px;
    color: #ff75c3;
    animation: floatParticle 8s ease-in-out infinite;
}

.float-icon-2 {
    bottom: 10%;
    right: -90px;
    color: #50a7ea;
    animation: floatParticle 9s ease-in-out infinite reverse 1.5s;
}

.float-icon-3 {
    top: -90px;
    right: 12%;
    color: #ffa600;
    font-size: 1.5rem;
    width: 42px;
    height: 42px;
    animation: floatParticle 10s ease-in-out infinite 3s;
}

.float-icon-4 {
    bottom: -75px;
    left: 12%;
    color: #9d4edd;
    font-size: 1.6rem;
    width: 46px;
    height: 46px;
    animation: floatParticle 7s ease-in-out infinite reverse 0.5s;
}

.float-icon-5 {
    top: 30%;
    right: -130px;
    color: #ffcf40;
    font-size: 1.4rem;
    width: 40px;
    height: 40px;
    opacity: 0.8;
    animation: floatParticle 11s ease-in-out infinite 2s;
}

.float-icon-6 {
    bottom: 20%;
    left: -100px;
    color: #2ec4b6;
    font-size: 1.5rem;
    width: 44px;
    height: 44px;
    opacity: 0.9;
    animation: floatParticle 8.5s ease-in-out infinite reverse 4s;
}

@keyframes floatParticle {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(10px, -15px) rotate(5deg); }
    66% { transform: translate(-5px, 10px) rotate(-5deg); }
}

@media (max-width: 768px) {
    .hero { padding: 8rem 0 6rem; }
    .hero-slogan { font-size: 3rem; }
    .hero-bg-text { font-size: 20vw; }
    .hero-actions { flex-direction: column; gap: 1rem; width: 100%; padding: 0 2rem; }
    .btn-magnetic { width: 100%; }
    .float-cat { width: 80px; top: -40px; right: 0; }
    .float-icon-1, .float-icon-2, .float-icon-3, .float-icon-4, .float-icon-5, .float-icon-6 { display: none; }


    .hero-feature-badges {
        flex-direction: column;
        gap: 0.5rem;
        width: 90%;
        padding: 1rem;
    }
    .feature-separator { display: none; }
    .hero-feature-line {
        flex-direction: column;
        gap: 0.5rem;
        font-size: 1rem;
    }
    .feature-dot { display: none; }
}

/* --- 特性区域 --- */
.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;
    }
}

@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; /* 防止拖拽选中 */
    /* 为video元素添加尺寸约束 */
    width: 100%;
    max-width: 400px;
    height: auto;
    object-fit: cover; /* 保持视频宽高比同时填充容器 */
    display: block; /* 确保视频以块级元素显示 */
}

/* 视频专用样式 */
video.hero-screenshot {
    aspect-ratio: 16/9; /* 设置固定的宽高比 */
    background-color: rgba(122, 162, 247, 0.1); /* 加载时的背景色 */
}

/* 添加呼吸动画效果 */
@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;
}

/* 响应式调整悬停效果 */
@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; /* 在手机屏幕上取消负边距 */
    }
}

@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-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-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;
    }
}

@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.8));
    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(#progressGradient);
    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(#glow);
}

.scroll-progress-container:hover .scroll-progress-circle-fill {
    filter: drop-shadow(0 0 5px rgba(247, 125, 170, 0.8)) url(#glow);
    animation: glowStroke 2s infinite alternate;
}

@keyframes glowStroke {
    0% { filter: drop-shadow(0 0 3px rgba(122, 162, 247, 0.7)) url(#glow); }
    100% { filter: drop-shadow(0 0 8px rgba(247, 125, 170, 0.8)) url(#glow); }
}

.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;
    }
}

/* === 下拉菜单样式 === */
.dropdown {
    position: relative;
}

.dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.dropdown-toggle i.fa-chevron-down {
    font-size: 0.8rem;
    transition: transform 0.3s ease;
}

.dropdown:hover .dropdown-toggle i.fa-chevron-down {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-base);
    box-shadow: var(--card-shadow);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 0.5rem 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s ease;
    z-index: 1000;
    list-style: none;
    margin-top: 0.5rem;
}

.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu li {
    margin: 0;
}

.dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.25rem;
    color: var(--text-color);
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 0.95rem;
    font-weight: 500;
    border-bottom: none;
}

.dropdown-menu a::after {
    display: none; /* 隐藏下拉菜单项的下划线 */
}

.dropdown-menu a:hover {
    background-color: rgba(122, 162, 247, 0.1);
    color: var(--primary-color);
    animation: jelly 0.6s ease;
}

.dropdown-menu a i {
    color: var(--primary-color);
    font-size: 0.9rem;
    width: 1rem;
    text-align: center;
}

/* 下拉菜单箭头指示器 */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--surface-color);
    filter: drop-shadow(0 -2px 2px rgba(0, 0, 0, 0.1));
}

/* --- The Seamless Fusion (Apple-Tier Editorial) --- */
.manifesto-poster {
    padding: 8rem 0 15rem;
    background-color: #ffffff;
    position: relative;
    z-index: 5; /* Lower than video section */
    overflow: hidden;
    margin-top: 0; /* Reset spacing */
    cursor: default;
}

/* The Paper Texture (Subtle Grain) */
.manifesto-poster::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E");
    opacity: 0.6;
    pointer-events: none;
    z-index: 2; /* Texture sits on top of background elements */
    mix-blend-mode: multiply;
}

/* The Connector: A Physical Guide Line */
.guide-line-connector {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 1px; height: 200px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.02) 100%);
    z-index: 1;
}

/* Left: Swiss Chronograph (Precision Instrument) */
.dial-wrapper {
    position: relative;
    width: 260px; height: 260px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* The Gauge Marks (CSS Trick for Ticks) */
.dial-rings {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    /* Thicker, clearer ticks */
    background: conic-gradient(
        from 0deg, 
        #333 0deg 2deg, 
        transparent 2deg 10deg
    );
    border-radius: 50%;
    -webkit-mask: radial-gradient(transparent 68%, black 68%);
    mask: radial-gradient(transparent 68%, black 68%);
    opacity: 0.2; /* Subtle but visible */
}

.ring-outer {
    position: absolute;
    top: -15px; left: -15px;
    right: -15px; bottom: -15px;
    border: 2px solid #eee; /* Structural ring */
    border-top: 2px solid #111; /* Active segment */
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06); /* Physical Depth */
}

.ring-inner {
    position: absolute;
    top: 15px; left: 15px;
    right: 15px; bottom: 15px;
    border: 2px solid #f0f0f0;
    border-left: 2px solid #ff3b30; /* Red Tick */
    border-radius: 50%;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.03); /* Inset Depth */
}

.dial-ticker {
    position: absolute;
    top: 50%; left: 50%;
    width: 130%; height: 2px; /* Thicker needle */
    background: linear-gradient(90deg, transparent 48%, #ff3b30 50%, transparent 52%);
    transform: translate(-50%, -50%) rotate(0deg);
    animation: tickScan 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    filter: drop-shadow(0 0 2px rgba(255, 59, 48, 0.5)); /* Needle Glow */
}

.dial-data {
    position: relative;
    z-index: 2;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.soul-num {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 10rem; /* Massive to match 'Pure' */
    font-weight: 600; /* Refined Weight */
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: #111;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 10px 30px rgba(0,0,0,0.15); /* The Halo */
}

.soul-num small {
    font-size: 3rem;
    font-weight: 400;
    color: #999;
    vertical-align: super;
    margin-left: 5px;
}

.meta-group {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    border-top: 2px solid #111; /* Solid line */
    padding-top: 12px;
}

.data-key {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    font-weight: 600;
    color: #333;
}

.red-dot-pulse {
    width: 6px; height: 6px;
    background-color: #ff3b30;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 59, 48, 0.8);
    animation: pulseRed 2s infinite;
}

@keyframes tickScan {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(180deg); }
}

/* Right: The Kinetic Spindle (Material Version) */
.spindle-wrapper {
    position: relative;
    width: 240px; height: 240px;
    display: flex;
    justify-content: center;
    align-items: center;
    perspective: 1000px;
}

.kinetic-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid #e5e5e5; /* Visible steel ring */
    transform-style: preserve-3d;
    box-shadow: 0 0 15px rgba(0,0,0,0.03); /* Metallic Sheen */
}

.r1 {
    width: 160px; height: 160px;
    border-color: #ddd;
    border-left-color: #111; /* Dark segment */
    animation: gyroSpin1 12s linear infinite;
}

.r2 {
    width: 120px; height: 120px;
    border-color: #eee;
    border-top-color: #999;
    animation: gyroSpin2 15s linear infinite;
}

.kinetic-core {
    width: 16px; height: 16px; /* Solid Core */
    /* Jewel-like Gradient */
    background: radial-gradient(circle at 35% 35%, #555 0%, #000 70%);
    border-radius: 50%;
    z-index: 10;
    box-shadow: 
        0 5px 20px rgba(0,0,0,0.3),
        inset 0 0 2px rgba(255,255,255,0.2); /* Singularity Glow */
}

/* The Vertical Field (Solid Force) */
.vertical-field {
    position: absolute;
    width: 40px; height: 80px;
    border-left: 3px solid #ff3b30; /* Thick Laser */
    border-right: 3px solid #ff3b30;
    border-radius: 50%;
    opacity: 1; /* Fully visible */
    animation: fieldBreathe 4s ease-in-out infinite;
    box-shadow: 0 0 25px rgba(255, 59, 48, 0.4); /* Energy Field Glow */
}

@keyframes gyroSpin1 {
    0% { transform: rotateX(60deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(60deg) rotateY(360deg) rotateZ(360deg); }
}

@keyframes gyroSpin2 {
    0% { transform: rotateX(-60deg) rotateY(0deg) rotateZ(0deg); }
    100% { transform: rotateX(-60deg) rotateY(-360deg) rotateZ(180deg); }
}

@keyframes fieldBreathe {
    0%, 100% { transform: scaleX(1) scaleY(1); border-color: #ff3b30; box-shadow: 0 0 25px rgba(255, 59, 48, 0.4); }
    50% { transform: scaleX(0.5) scaleY(1.1); border-color: #ff3b30; box-shadow: 0 0 10px rgba(255, 59, 48, 0.8); } /* Tighten & Focus */
}

/* Reset Label - Tightened */
.cell-label {
    position: absolute;
    bottom: -35px;
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    letter-spacing: 0.4em;
    color: #999;
    border: 1px solid #f0f0f0;
    padding: 4px 12px;
    border-radius: 50px;
}

/* Layer 1: Marquee (Subtle Texture) */
.marquee-container {
    position: absolute;
    top: 50%; left: 0;
    transform: translateY(-50%) rotate(-5deg);
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    /* No blend mode, just color */
}

.marquee-track {
    display: inline-block;
    animation: marqueeScroll 30s linear infinite;
}

@keyframes marqueeScroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-text {
    font-family: 'Playfair Display', serif;
    font-size: 20vw;
    font-weight: 900;
    color: #f7f7f7; /* Very light grey background texture */
    -webkit-text-stroke: 1px #e0e0e0; /* Subtle definition */
    margin-right: 10vw;
}

/* Layer 2: The Architectural Anchor (Structure) */
.architectural-bg {
    position: absolute;
    top: 45%; left: 50%; /* Shifted up slightly */
    transform: translate(-50%, -50%);
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1;
}

.arch-c {
    font-family: 'Playfair Display', serif;
    font-size: 55rem; /* Larger, acting as a background landscape */
    font-style: italic;
    color: #f2f3f5;
    line-height: 0;
    margin-left: -50px;
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
}

.manifesto-poster:hover .arch-c {
    transform: translate(-40px, -50%) rotate(-2deg) scale(1.05);
}

/* Layer 3: The Content (Solid & Legible) */
.poster-container {
    width: 90%;
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    z-index: 10;
}

.prism-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 600px;
}

.prism-col { flex: 1; position: relative; }

/* Left: Data */
.col-left { display: flex; justify-content: flex-start; }

.data-block { 
    text-align: left; 
    color: #111; /* Solid Black */
}

.soul-num {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 10rem; /* Massive to match 'Pure' */
    font-weight: 400; /* Intellectual Weight */
    line-height: 0.9;
    letter-spacing: -0.05em;
    color: #111;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 10px 30px rgba(0,0,0,0.12); /* The Halo */
}

.soul-num small { font-size: 4rem; margin-left: 0.5rem; }

.meta-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 1.5rem;
    border-top: 2px solid #111;
    padding-top: 1rem;
    width: fit-content;
}

.data-key {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    font-weight: 600;
    color: #333;
}

.red-dot {
    width: 6px; height: 6px;
    background-color: #ff3b30;
    border-radius: 50%;
    display: inline-block;
}

/* Center: The Statement */
.col-center { display: flex; justify-content: center; }

.floating-type-group {
    text-align: center;
    position: relative;
    transition: transform 0.5s ease;
}

.floating-header {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    margin-bottom: 1rem;
}

.bracket {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: #999;
    letter-spacing: 0.2em;
}

.handwritten-circle {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.2em;
    padding: 0.5rem 1rem;
    border: 1px solid #111;
    border-radius: 50% 40% 60% 30% / 40% 50% 30% 60%;
}

.title-wrapper {
    position: relative;
    display: inline-block;
}

.floating-title {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 10rem;
    color: #111; /* Solid Black */
    line-height: 1;
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.02em;
    text-shadow: 0 10px 30px rgba(0,0,0,0.05); /* Subtle lift */
}

/* Annotations */
.phonetic {
    position: absolute;
    top: -10px;
    left: -40px;
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.5rem;
    color: #999;
}

.part-of-speech {
    position: absolute;
    bottom: 20px;
    right: -30px;
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: #999;
}

/* Red Line */
.editorial-line {
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 20;
}

.red-line {
    width: 60px;
    height: 2px;
    background-color: #ff3b30;
    transform: rotate(-15deg);
    box-shadow: 0 0 10px rgba(255, 59, 48, 0.5);
}

.floating-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    color: #333;
    letter-spacing: 0.6em;
    text-transform: uppercase;
    font-weight: 600;
    margin-top: 1rem;
}

/* The Code Tribute */
.code-tribute {
    font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
    font-size: 0.9rem;
    margin: 1.5rem 0;
    padding: 0.5rem 1rem;
    background: rgba(0,0,0,0.02);
    border-radius: 4px;
    display: inline-block;
    transition: all 0.3s ease;
}

.code-tribute:hover {
    background: rgba(0,0,0,0.05);
    transform: translateY(-2px);
}

.code-bracket { color: #999; }
.code-var { font-style: italic; color: #555; }
.code-op { font-weight: 700; color: #111; margin: 0 4px; }
.code-val { color: #ff3b30; font-weight: 600; }

/* The Horizon Line (Frequency) */
.horizon-line {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 2rem 0;
    opacity: 0.5;
}

.horizon-line::before,
.horizon-line::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #ddd 20%, #ddd 80%, transparent);
    max-width: 100px;
}

.frequency-wave {
    width: 40px;
    height: 16px;
    position: relative;
    overflow: hidden;
}

.frequency-wave::after {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: 100%; height: 1px;
    background: #ff3b30;
    box-shadow: 0 0 10px rgba(255, 59, 48, 0.8);
    transform: translateY(-50%);
    animation: pulseWave 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulseWave {
    0%, 100% { transform: translateY(-50%) scaleY(1); opacity: 0.5; }
    50% { transform: translateY(-50%) scaleY(4); opacity: 1; width: 60%; margin-left: 20%; } /* Simulation of a vertical blip */
}

.floating-footer {
    margin-top: 1rem; /* Reduced further */
    display: flex;
    justify-content: center;
}

.serial-code {
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    color: #999;
    border: 1px solid #eee;
    padding: 4px 12px;
    border-radius: 2px;
}

/* Right: Live */
.col-right { 
    display: flex; 
    justify-content: flex-end; 
    align-items: center; 
}

.circle-graphic {
    position: relative;
    width: 100px; height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-ring {
    position: absolute;
    width: 100%; height: 100%;
    border: 1px solid #ddd;
    border-radius: 50%;
    animation: ringPulse 3s infinite;
}

.circle-dot {
    width: 8px; height: 8px;
    background: #111;
    border-radius: 50%;
}

.circle-label {
    position: absolute;
    bottom: -30px;
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: #999;
}

/* Footer - The Monumental Signature */
.silver-footer { 
    text-align: center; 
    margin-top: 10rem;
    position: relative;
    z-index: 20;
}

.footer-line {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 3rem; /* Monumental Scale */
    letter-spacing: 0.05em;
    color: #1a1b1e;
    font-weight: 900; /* Black Weight */
    text-transform: uppercase;
    display: block;
    /* The Etched Stone Effect */
    text-shadow: 
        0 2px 0px rgba(255,255,255,1), 
        0 -1px 1px rgba(0,0,0,0.1);
    opacity: 0.9;
}

@media (max-width: 900px) {
    .prism-content { flex-direction: column; gap: 4rem; text-align: center; }
    .col-left, .col-right { justify-content: center; }
    
    /* Scale down instruments for mobile */
    .dial-wrapper, .spindle-wrapper {
        transform: scale(0.75);
    }
    
    .data-block { text-align: center; }
    .meta-group { justify-content: center; margin: 1rem auto 0; border-top: 1px solid #eee; }
    
    /* Adjust Architecture */
    .arch-c { font-size: 20rem; margin-left: 0; top: 50%; }
    
    /* Typography Scaling */
    .floating-title { font-size: 5rem; }
    .soul-num { font-size: 6rem; }
    .soul-num small { font-size: 2rem; }
    
    .phonetic { display: none; } 
    .footer-line { font-size: 1.5rem; }
    
    .marquee-text { font-size: 30vw; }
    
    /* Fix Footer Spacing */
    .silver-footer { margin-top: 6rem; }
}

/* =========================================
   THE COMMUNITY (Luminaries - Bright & Human) 
   ========================================= */

.luminaries-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background: #fff; /* Return to Purity */
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Soft blend from top */
    mask-image: linear-gradient(to bottom, transparent 0%, black 10%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%);
}

.luminaries-container {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1;
    perspective: 1000px; /* For 3D parallax */
}

.luminary-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.4));
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 
        0 10px 30px rgba(0,0,0,0.05),
        inset 0 0 20px rgba(255,255,255,0.8);
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0; /* Fade in via JS */
    animation: orbFloat 6s ease-in-out infinite;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: rgba(0,0,0,0.1);
}

/* Orb Variants */
.orb-blue { box-shadow: 0 20px 50px rgba(0, 122, 255, 0.15), inset 0 0 20px rgba(255,255,255,0.8); }
.orb-red { box-shadow: 0 20px 50px rgba(255, 59, 48, 0.15), inset 0 0 20px rgba(255,255,255,0.8); }
.orb-purple { box-shadow: 0 20px 50px rgba(175, 82, 222, 0.15), inset 0 0 20px rgba(255,255,255,0.8); }

/* Modern Minimalist Layout */
.horizon-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 10;
}

.horizon-divider { display: none; } /* Remove the hard line */

.horizon-col {
    text-align: center;
}

.horizon-col.left { display: none; } /* Remove the Origin date, keep it simple */

.horizon-big-text {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Apple System Font */
    font-size: 15vw; /* Responsive Massive */
    font-weight: 800; /* Bold Modernism */
    letter-spacing: -0.05em; /* Tight tracking */
    line-height: 1;
    color: #111;
    display: block;
    text-decoration: none;
    position: relative;
    z-index: 20;
    transition: transform 0.3s ease;
    /* Clean, no shadow, pure ink */
}

.horizon-big-text:hover {
    transform: scale(1.02);
}

.horizon-star {
    font-size: 4vw;
    color: #ff3b30;
    vertical-align: top;
    margin-left: 0.5rem;
    animation: starPulse 4s infinite;
}

.horizon-meta {
    position: relative;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.meta-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    font-weight: 600;
    color: #ff3b30;
    text-transform: uppercase;
    background: rgba(255, 59, 48, 0.08);
    padding: 6px 16px;
    border-radius: 100px;
}

.meta-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #666;
    font-weight: 400;
}

/* Hide the wall */
.community-wall { display: none; }

/* Dynamic Subtitle Animation */
.meta-desc {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: #666;
    font-weight: 400;
    height: 1.5rem; /* Fixed height for ticker */
    overflow: hidden;
    position: relative;
    width: 100%;
    text-align: center;
}

.meta-desc span {
    display: block;
    animation: tickerSlide 9s infinite cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes tickerSlide {
    0%, 30% { transform: translateY(0); opacity: 1; }
    33%, 63% { transform: translateY(-100%); opacity: 1; }
    66%, 96% { transform: translateY(-200%); opacity: 1; }
    100% { transform: translateY(-300%); opacity: 0; }
}

/* 
 * =========================================
 * THE EDITORIAL MASTERPIECE (Complex Minimalism)
 * =========================================
 */

.luminaries-section {
    position: relative;
    background: #ffffff;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Texture: Architectural Grid */
.luminaries-section::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* Subtle Grid */
    background-image: 
        linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
    background-size: 100px 100px;
    pointer-events: none;
    z-index: 0;
}

/* --- TEMPORAL ARTIFACTS --- */
/* Scanline removed by design decision */

.hud-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
    z-index: 20;
    mix-blend-mode: difference; /* Adaptive color */
    color: #fff;
    font-family: 'Courier New', monospace;
    font-weight: 700;
}

.hud-ruler-left {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 60vh;
    background: repeating-linear-gradient(
        to bottom,
        #fff 0,
        #fff 1px,
        transparent 1px,
        transparent 10px
    );
}

.hud-ruler-left::before {
    content: "";
    position: absolute;
    top: -10px; left: -4px; width: 10px; height: 1px; background: #fff;
}
.hud-ruler-left::after {
    content: "";
    position: absolute;
    bottom: -10px; left: -4px; width: 10px; height: 1px; background: #fff;
}

.hud-coords {
    position: absolute;
    top: 30px;
    left: 40px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

.hud-status {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    gap: 8px;
}

.status-dot {
    width: 6px;
    height: 6px;
    background: #0f0; /* Green = Online */
    border-radius: 50%;
    box-shadow: 0 0 5px #0f0;
    animation: blink 2s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.hud-scroll {
    position: absolute;
    bottom: 30px;
    right: 40px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    opacity: 0.7;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-5px);}
    60% {transform: translateY(-3px);}
}

.hud-version {
    position: absolute;
    bottom: 30px;
    left: 40px;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    opacity: 0.5;
    transform: rotate(-90deg);
    transform-origin: left bottom;
}


.narrative-container {
    width: 100%;
    height: 100%;
    position: relative;
    max-width: 1600px;
    margin: 0 auto;
    border-left: 1px solid rgba(0,0,0,0.05); 
    border-right: 1px solid rgba(0,0,0,0.05);
}

.narrative-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}

/* Layer 0: The Ghost (Depth) */
.layer-deep {
    z-index: 1;
}

.ghost-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 80vw;
    line-height: 0.8;
    color: transparent;
    -webkit-text-stroke: 1px rgba(0,0,0,0.03); /* Ghostly outline */
    white-space: nowrap;
    opacity: 0.5;
}

/* Layer 1: The Monolith */
.layer-mid {
    z-index: 5;
}

.core-2k {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 58vw; 
    line-height: 0.75;
    letter-spacing: -0.09em;
    color: #000;
    z-index: 1;
    white-space: nowrap;
    /* Animation handled by Galaxy.js for physics-based blending */
}

/* Layer 2: The Inverted Script */
.layer-front {
    z-index: 10;
    mix-blend-mode: exclusion;
}

.narrative-content {
    width: 100%; height: 100%;
    position: relative;
}

.script-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-5deg);
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-weight: 600;
    font-size: 22vw;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
    z-index: 2;
}

/* Micro Typography Details */
.badge-top {
    position: absolute;
    top: 30%;
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    color: #fff; /* Inverted */
    opacity: 0.8;
}

.phonetic {
    position: absolute;
    bottom: 35%;
    left: 60%; /* Offset */
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 1.5rem;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    will-change: transform; /* Force GPU Layer */
}

.red-dot {
    width: 8px;
    height: 8px;
    background: #ff3b30; /* The Red Accent */
    border-radius: 50%;
    display: inline-block;
    box-shadow: 0 0 10px rgba(255, 59, 48, 0.8);
    animation: pulseRed 2s infinite;
}

@keyframes pulseRed {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

.script-intro, .script-desc { display: none; }

.narrative-cta {
    position: absolute;
    bottom: 18%; 
    left: 50%;
    transform: translateX(-50%);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-decoration: none;
    color: #fff; 
    background: transparent; 
    font-size: 0.9rem;
    padding: 12px 40px;
    border-radius: 50px; 
    border: 1px solid #fff; 
    transition: all 0.3s ease;
    pointer-events: auto;
    z-index: 30;
    mix-blend-mode: difference; 
}

.narrative-cta:hover {
    background: #fff;
    color: #000; 
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 0 20px rgba(255,255,255,0.5);
}

/* Layer 3: The Data (Adaptive Visibility) */
.layer-detail {
    z-index: 15;
    pointer-events: none;
}

.stats-row {
    position: absolute;
    bottom: 5%;
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0; 
    align-items: center;
    padding-bottom: 20px;
    mix-blend-mode: difference;
}

.stats-row::after {
    content: "";
    display: block;
    width: 1px;
    height: 40px;
    background: #fff; 
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.stat-pill {
    position: relative;
    background: transparent; 
    padding: 0 40px;
    border: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 120px;
}

.pill-label {
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: #fff; 
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.pill-val {
    font-family: 'Inter', sans-serif;
    font-size: 1.8rem;
    font-weight: 900;
    color: #fff;
    line-height: 1;
}

/* Decorative ID on left - also adaptive */
.layer-detail .deco-id {
    position: absolute;
    bottom: 40px;
    left: 60px;
    font-family: 'Courier New', monospace;
    font-size: 0.7rem;
    color: #fff; 
    transform: rotate(-90deg);
    transform-origin: left bottom;
    mix-blend-mode: difference;
}

/* Red Line Decoration */
.red-line-deco {
    position: absolute;
    bottom: 85px; /* Just above stats */
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 2px;
    background: #ff3b30;
    z-index: 20;
}