.hero-title { font-size: var(--font-size-lvl-1, 48px); font-weight: 800; color: white; margin-bottom: 20px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2); animation: fadeInUp 1s ease-out; }
.hero-subtitle { font-size: var(--font-size-lvl-4, 16px); color: rgba(255, 255, 255, 0.9); margin-bottom: 40px; animation: fadeInUp 1s ease-out 0.2s both; }

.cta-button { display: inline-block; padding: 18px 40px; background: white; color: #ff6b35; text-decoration: none; border-radius: 50px; font-size: var(--font-size-lvl-3, 20px); font-weight: 600; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; animation: fadeInUp 1s ease-out 0.4s both; border: none; cursor: pointer; font-family: inherit; }
.cta-button:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3); }
.cta-button:focus { outline: none; }

/* 双按钮容器 */
.cta-container { display: flex; gap: 15px; justify-content: center; flex-wrap: wrap; animation: fadeInUp 1s ease-out 0.4s both; }
.cta-container .cta-button { animation: none; }
.cta-btn-retake { background: white; color: #ff6b35; }
.cta-btn-results { background: linear-gradient(45deg, #ff6b35, #f7931e); color: white; }

.benefits-section { max-width: 600px; margin: 80px auto 40px; text-align: left; background: rgba(255, 255, 255, 0.15); padding: 30px; border-radius: 20px; backdrop-filter: blur(5px); animation: fadeInUp 1s ease-out 0.3s both; border: 1px solid rgba(255, 255, 255, 0.2); }
.benefits-title { color: white; text-align: center; margin-bottom: 20px; font-size: var(--font-size-lvl-3, 20px); font-weight: 600; text-shadow: 1px 1px 2px rgba(0,0,0,0.1); }
.benefits-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.benefits-item { color: #333; display: flex; align-items: center; font-size: var(--font-size-lvl-4, 16px); background: #fff; padding: 15px 20px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; }
.benefits-item:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); }
.benefits-icon { margin-right: 12px; font-size: 24px; }

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 80px; }
.feature-card { background: rgba(255, 255, 255, 0.95); padding: 30px; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; animation: fadeInUp 1s ease-out; }
.feature-card:nth-child(2) { animation-delay: 0.1s; }
.feature-card:nth-child(3) { animation-delay: 0.2s; }
.feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }
.feature-icon { width: 60px; height: 60px; background: linear-gradient(45deg, #ff6b35, #f7931e); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 24px; color: white; }
.feature-title { font-size: var(--font-size-lvl-3, 20px); font-weight: 600; margin-bottom: 10px; color: #333; }
.feature-description { color: #666; line-height: 1.6; font-size: var(--font-size-lvl-4, 16px); }

.footer { text-align: center; padding: 40px 0; color: rgba(255, 255, 255, 0.8); margin-top: 80px; }

@media (max-width: 768px) {
    .hero-title { margin-bottom: 10px; }
    .hero-subtitle { margin-bottom: 40px; }
    .benefits-section { margin: 40px auto 30px; padding: 20px; }
    .benefits-title { margin-bottom: 15px; }
    .benefits-list { gap: 10px; grid-template-columns: 1fr; }
    .benefits-item { padding: 10px 15px; }
    .cta-button { padding: 15px 30px; }
    .features { grid-template-columns: 1fr; }
}