/* home-page.css - Styles for the new homepage */

:root {
    --theme-main-color: #128C7E;
    --theme-accent-color: #FF00A5;
    --theme-text-dark: #1f2937;    /* Default text, headings on light backgrounds */
    --theme-text-on-main: #FFFFFF; /* Text on main-colored backgrounds/buttons */
    --theme-text-light-on-dark-bg: #f8f9fa; /* Text for dark section backgrounds */
    --theme-bg-light-neutral: #f9fafb; /* For sections like "Trusted by" */
    --theme-bg-dark-neutral: #111827; /* For sections like footer CTA */
    --theme-border-neutral: #e5e7eb;
    --theme-main-color-darker: #0d7365; /* Darker shade of main for hovers etc. */
    --theme-accent-color-darker: #d9008c; /* Darker shade of accent for hovers */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: var(--theme-text-dark); /* Updated to use theme variable */
    margin: 0;
    padding: 0;
}

.home-page-container {
    width: 100%;
    overflow-x: hidden;
}

/* Utility-like classes (very basic implementation) */
.text-center { text-align: center; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-16 { padding-top: 4rem; padding-bottom: 4rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.mb-20 { margin-bottom: 5rem; }
.mt-8 { margin-top: 2rem; }
.mt-12 { margin-top: 3rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.font-bold { font-weight: bold; }
.font-semibold { font-weight: 600; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-3xl { font-size: 1.875rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.max-w-2xl { max-width: 42rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }
.rounded-lg { border-radius: 0.5rem; }
.rounded-full { border-radius: 9999px; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06); }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.space-x-6 > * + * { margin-left: 1.5rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-12 { gap: 3rem; }
.gap-x-12 { column-gap: 3rem; }
.gap-y-16 { row-gap: 4rem; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.flex-shrink-0 { flex-shrink: 0; }
.w-6 { width: 1.5rem; }
.h-6 { height: 1.5rem; }
.w-7 { width: 1.75rem; }
.h-7 { height: 1.75rem; }
.w-8 { width: 2rem; }
.h-8 { height: 2rem; }
.w-12 { width: 3rem; }
.h-12 { height: 3rem; }
.mr-2 { margin-right: 0.5rem; }
.mr-3 { margin-right: 0.75rem; }
.p-6 { padding: 1.5rem; }
.p-8 { padding: 2rem; }
.bg-black {
    background-color: var(--theme-main-color) !important;
}
.text-white {
    /* Used for text on hero button AND text on final CTA dark section */
    color: var(--theme-text-on-main) !important;
}
.text-primary {
    color: var(--theme-main-color) !important;
}
.text-accent {
    color: var(--theme-accent-color) !important;
}
.hover\:bg-gray-800:hover { /* Note: Escaped colon for query */
    background-color: var(--theme-main-color-darker) !important;
}
.bg-gray-50 {
    background-color: var(--theme-bg-light-neutral) !important;
}
.bg-gray-800 {
    background-color: var(--theme-bg-dark-neutral) !important;
}
/* Text on .bg-gray-800 sections is handled by .text-white, which is now var(--theme-text-on-main) */
.final-cta-section h2 { /* Ensure heading in this dark section is light */
    color: var(--theme-text-light-on-dark-bg);
}
.bg-white { /* This class is used for the button itself */
    background-color: var(--theme-text-on-main) !important; /* White background for button */
}
.text-black { /* This class is for the button\'s text */
    color: var(--theme-main-color) !important; /* Button text becomes main theme color */
}
.hover\:bg-gray-200:hover { /* Note: Escaped colon for query */
    background-color: #eeeeee !important; /* Slightly darken white button on hover */
}
.w-1\/2 { width: 50%; }

/* Basic Grid (very simplified) */
.grid { display: grid; }

@media (min-width: 768px) { /* md breakpoint */
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .md\:order-1 { order: 1; }
    .md\:order-2 { order: 2; }
}

/* Section specific styles */
.hero-section a {
    text-decoration: none;
}

.hero-section .social-proof span {
    font-size: 0.9rem;
    color: #555; /* Original color, will be overridden for icons/specific parts if needed */
}

/* Apply accent color to the emoji/icon part of social proof */
.hero-section .social-proof span::first-letter { /* Targets the icon if it's the first char */
    color: var(--theme-accent-color);
}
/* Alternatively, if icons are separate elements, a more specific selector would be needed */
/* For now, targeting first letter to color the emoji */

.hero-image img {
    max-width: 100%;
    height: auto;
}

.hero-image video {
    max-width: 100%;
    height: auto;
}

/* How it works Section Styles */
.how-it-works-section .how-it-works-item {
    background-color: #fff; /* White background for cards */
    border: 1px solid #e5e7eb; /* Light border */
    border-radius: 0.75rem; /* Slightly larger border-radius */
    padding: 2rem; /* Adjust padding as needed */
    text-align: left; /* Text aligned to left as per image */
    box-shadow: 0 4px 12px rgba(0,0,0,0.08); /* Softer shadow */
}

.how-it-works-section .step-indicator {
    display: block;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    color: var(--theme-accent-color); /* UPDATED TO ACCENT COLOR */
    margin-bottom: 0.75rem; /* Space below STEP indicator */
}

.how-it-works-section .how-it-works-item h3 {
    font-size: 1.75rem; /* ~28px, adjust as needed */
    font-weight: 700;
    color: #111827; /* Darker text color */
    margin-bottom: 0.75rem;
}

.how-it-works-section .how-it-works-item p {
    font-size: 1rem; /* 16px */
    color: #374151; /* Gray-700 like */
    line-height: 1.6;
}

.how-it-works-section h2 {
    color: #111827; /* Darker heading color */
    font-size: 2.5rem; /* Larger main title for the section */
}

.trusted-by-section .logos-container img {
    max-height: 40px; /* Adjust as needed */
    margin: 0.5rem 1rem;
}

.feature-showcase-section .feature-showcase-item img {
    max-width: 100%;
    border-radius: 0.5rem;
}

.explore-more-section .explore-feature-item img {
    max-width: 100%;
    border-width: 0.375rem;
}

.testimonials-section .testimonial-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background-color: #fff;
}

.testimonials-section .testimonial-card img {
    border: 2px solid #fff;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

.final-cta-section a {
    text-decoration: none;
}

/* Header and Footer Adjustments (Example - might need more based on image) */
/* You might want to move header/footer styles to style.css if they are global */
/* 移除导航栏样式覆盖，让所有页面保持一致 */

/* Styling for language switcher links in header to match theme */
/* These are styled inline in main.php; these are an attempt to override/harmonize */
.language-switcher a {
    color: var(--theme-text-dark);
    text-decoration: none;
    padding: 0 5px; /* Match existing inline padding */
}
.language-switcher a:hover {
    color: var(--theme-main-color);
}
/* Style for the active language link (which has font-weight:bold inline) */
.language-switcher a[style*="font-weight:bold"] {
    color: var(--theme-main-color) !important; /* Ensure active language uses main color */
    text-decoration: underline !important; /* Ensure active language is underlined */
}

/* Footer from image is very complex. Current footer in main.php is simple. */
/* This CSS won\'t replicate the complex footer. */
footer {
    /* Add styles if you want to change the existing simple footer */
}

/* Final CTA Section: originally .bg-gray-800 .text-white */
/* NOW: final-cta-section to use theme-main-color for background */
.final-cta-section { /* Directly target the section if it uniquely needs this bg */
    background-color: var(--theme-main-color) !important;
}
/* Remove or comment out the generic .bg-gray-800 if it was only for this section 
   or ensure it doesn't conflict. For now, assuming .final-cta-section is specific enough.
   If .bg-gray-800 is still on the HTML element, this specific rule for .final-cta-section will override it.
*/

.final-cta-section h2 { /* Ensure heading in this section is light (text-on-main) */
    color: var(--theme-text-on-main);
}

/* Final CTA Button: originally .bg-white .text-black .hover\:bg-gray-200 */
/* The button itself is .bg-white, which is already defined as: 
.bg-white { 
    background-color: var(--theme-text-on-main) !important; 
} 
*/

/* Adjust text color for the button within .final-cta-section */
.final-cta-section a.bg-white {
    color: var(--theme-main-color) !important; /* Button text is main color, on white button bg */
}

/* Update hover for the button if needed, it was:
.hover\\:bg-gray-200:hover { 
    background-color: #eeeeee !important; 
} 
This should still work fine. */

/* Add transition for button background color changes */
a.hover\:bg-gray-800,
a.hover\:bg-gray-200 {
    transition: background-color 0.2s ease-in-out;
}