/* ==========================================================================
   首页专用 (page-index.css)
   ========================================================================== */
.hero {
    text-align: center; padding: 3rem 2rem; background: var(--gradient-bg-light);
    color: var(--text-main); border-radius: 20px; margin-bottom: 3rem;
    position: relative; overflow: hidden; box-shadow: 0 10px 30px rgba(147, 51, 234, 0.2);
    animation: float 6s ease-in-out infinite;
}
.hero::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none"/><circle cx="20" cy="20" r="2" fill="rgba(147, 51, 234, 0.1)"/><circle cx="80" cy="20" r="2" fill="rgba(147, 51, 234, 0.1)"/><circle cx="50" cy="50" r="2" fill="rgba(147, 51, 234, 0.1)"/><circle cx="20" cy="80" r="2" fill="rgba(147, 51, 234, 0.1)"/><circle cx="80" cy="80" r="2" fill="rgba(147, 51, 234, 0.1)"/></svg>') repeat;
    background-size: 100px 100px; opacity: 0.3;
}
.hero > * { position: relative; z-index: 1; }
.hero h2 { font-size: 2.5rem; margin-bottom: 1rem; color: var(--text-main); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1); animation: bounce 3s ease-in-out infinite; }
.hero p { font-size: 1.2rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; color: var(--text-muted); }

.star-1 { top: 20%; left: 10%; animation: twinkle 3s ease-in-out infinite; }
.star-2 { top: 15%; right: 15%; animation: twinkle 4s ease-in-out infinite 0.5s; }
.star-3 { bottom: 20%; left: 20%; animation: twinkle 5s ease-in-out infinite 1s; }
.star-4 { bottom: 25%; right: 10%; animation: twinkle 3.5s ease-in-out infinite 1.5s; }
.star-5 { top: 50%; left: 50%; animation: twinkle 4.5s ease-in-out infinite 2s; }

.features, .levels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-bottom: 3rem; }
.levels { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 2rem; }

.feature-card, .level-card {
    background: var(--gradient-bg-light); padding: 2rem; border-radius: 20px;
    box-shadow: 0 8px 25px rgba(147, 51, 234, 0.1); text-align: center;
    transition: all 0.3s ease; position: relative; overflow: hidden; border: 2px solid var(--border-color);
    color: var(--text-main); text-decoration: none;
}
.feature-card::before, .level-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-primary-light), var(--color-accent));
    transform: scaleX(0); transition: transform 0.3s ease;
}
.feature-card:hover, .level-card:hover {
    transform: translateY(-10px) rotate(1deg); box-shadow: 0 15px 35px rgba(147, 51, 234, 0.2); background: var(--bg-hover);
}
.level-card:hover { transform: translateY(-10px) rotate(-1deg); }
.feature-card:hover::before, .level-card:hover::before { transform: scaleX(1); }

.feature-card i, .level-card i {
    font-size: 3.5rem; background: var(--gradient-primary); -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 1.5rem;
    display: inline-block; transition: all 0.3s ease; filter: drop-shadow(2px 2px 4px rgba(147, 51, 234, 0.3));
}
.feature-card:hover i { transform: scale(1.2) rotate(5deg); }
.level-card:hover i { transform: scale(1.2) rotate(-5deg); }
.feature-card h3, .level-card h3 { font-size: 1.2rem; margin-bottom: 0.5rem; font-weight: 700; }
.feature-card p, .level-card p { color: var(--text-muted); line-height: 1.6; }

/* 首页响应式 */
@media (max-width: 768px) {
    .hero { padding: 2rem 1rem; }
    .hero h2 { font-size: 1.8rem; }
    .hero p { font-size: 1rem; }
    .features, .levels { grid-template-columns: 1fr; gap: 1rem; }
    .feature-card, .level-card { padding: 1.5rem; }
}