/* 摄状元®AI创影 - Force ALL homepage sections visible */
/* Explicit colors - no CSS variable dependency */

/* Hero section */
.page-index .hero {
    background: linear-gradient(135deg, #FFF5F5 0%, #FFFBF0 50%, #F8F9FC 100%) !important;
    min-height: 85vh !important;
    position: relative !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.page-index .hero h1,
.page-index .hero h1 .gradient-text {
    color: #C41E3A !important;
    -webkit-text-fill-color: #C41E3A !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.page-index .hero .slogan {
    color: #3A3A4A !important;
    visibility: visible !important;
}

.page-index .hero .description {
    color: #5A5A6A !important;
    visibility: visible !important;
}

/* Register banner */
.page-index .section,
.page-index .section .container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.page-index .register-banner {
    background: linear-gradient(135deg, #FFF8F0, #FFF0F5) !important;
    border: 1px solid #F0D0D0 !important;
    border-radius: 16px !important;
    padding: 30px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.page-index .register-banner h3 {
    color: #C41E3A !important;
}

.page-index .register-banner p {
    color: #5A5A6A !important;
}

.page-index .btn-register {
    background: linear-gradient(135deg, #C41E3A, #E8324F) !important;
    color: #FFFFFF !important;
}

.page-index .btn-login {
    color: #C41E3A !important;
    border: 1px solid #C41E3A !important;
}

.page-index .benefit-item {
    color: #4A4A5A !important;
}

/* Section headers */
.page-index .section-header h2 {
    color: #2A2A3A !important;
    visibility: visible !important;
}

.page-index .section-header .subtitle {
    color: #6A6A7A !important;
    visibility: visible !important;
}

.page-index .section-dark {
    background: #F5F5FA !important;
}

/* Workflow steps */
.page-index .workflow-step {
    visibility: visible !important;
    opacity: 1 !important;
}

.page-index .workflow-step-title {
    color: #2A2A3A !important;
}

.page-index .workflow-step-desc {
    color: #6A6A7A !important;
}

.page-index .workflow-step-icon {
    background: linear-gradient(135deg, rgba(196,30,58,0.1), rgba(212,160,23,0.1)) !important;
    visibility: visible !important;
}

.page-index .workflow-arrow {
    color: #C41E3A !important;
    visibility: visible !important;
}

/* Stat cards */
.page-index .stat-card {
    background: #FFFFFF !important;
    border: 1px solid #E8E8F0 !important;
    color: #2A2A3A !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.page-index .stat-card .stat-number {
    color: #C41E3A !important;
}

.page-index .stat-card .stat-label {
    color: #6A6A7A !important;
}

/* Creation cards */
.page-index .creation-card {
    background: #FFFFFF !important;
    border: 1px solid #E8E8F0 !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.page-index .creation-card h3 {
    color: #2A2A3A !important;
}

.page-index .creation-card p {
    color: #6A6A7A !important;
}

/* CTA sections */
.page-index .cta-section {
    background: linear-gradient(135deg, #C41E3A, #8B1528) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.page-index .cta-section h2 {
    color: #FFFFFF !important;
}

.page-index .cta-section p {
    color: rgba(255,255,255,0.9) !important;
}

/* Fade-in animation override - force visible */
.page-index .fade-in-up {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

.page-index .animate-in {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
}

/* Generic text color safety net */
.page-index .section h2,
.page-index .section h3 {
    color: #2A2A3A !important;
}

.page-index .section p {
    color: #5A5A6A !important;
}

.page-index .section a.btn,
.page-index .section .btn {
    visibility: visible !important;
}

/* Mobile hero height fix - prevent huge blank area */
@media (max-width: 768px) {
    .page-index .hero {
        min-height: 50vh !important;
        padding: 60px 16px 40px !important;
    }
    .page-index .hero h1 {
        font-size: 2rem !important;
    }
    .page-index .hero .slogan {
        font-size: 1.1rem !important;
    }
    .page-index .hero .description {
        font-size: 0.95rem !important;
    }
    .page-index .hero .btn-lg {
        padding: 10px 24px !important;
        font-size: 0.9rem !important;
    }
    .page-index .section {
        padding: 30px 0 !important;
    }
}

/* Mobile image and layout fixes */
@media (max-width: 768px) {
    /* Fix oversized images */
    .page-index img {
        max-width: 100% !important;
        height: auto !important;
    }
    .page-index .benefit-icon,
    .page-index .workflow-step-icon {
        width: auto !important;
        max-width: 60px !important;
    }
    .page-index .register-banner {
        flex-direction: column !important;
        padding: 20px !important;
    }
    .page-index .register-banner-left,
    .page-index .register-banner-actions {
        width: 100% !important;
        text-align: center !important;
    }
    .page-index .register-benefits {
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
    }
    .page-index .benefit-item {
        font-size: 0.85rem !important;
    }
    .page-index .workflow-steps {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .page-index .workflow-step {
        width: 100% !important;
        max-width: 280px !important;
    }
    .page-index .workflow-arrow {
        transform: rotate(90deg) !important;
        font-size: 1.2rem !important;
    }
    .page-index .creation-card,
    .page-index .stat-card {
        margin-bottom: 12px !important;
    }
    .page-index .hero-buttons {
        flex-direction: column !important;
        align-items: center !important;
        gap: 10px !important;
    }
    .page-index .hero-buttons .btn {
        width: 100% !important;
        max-width: 240px !important;
        text-align: center !important;
    }
}