/* 全局样式 - 强制重置 */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    height: 100%;
    width: 100%;
    font-family: 'DM Sans', Arial, sans-serif;
    background-color: #FAFAFA;
    color: #ffffff;
    line-height: 1.6;
    overflow-x: hidden;
}

body {
    display: block;
    position: relative;
    min-height: 100vh;
    padding-top: 80px; /* Adjust based on final nav height */
}

/* 首屏样式 */
.hero {
    height: 880px;
    width: 100vw;
    max-width: 1440px;
    margin: 0 auto;
    position: relative;
    background: #FAFAFA;
}

.logo {
    position: absolute;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.logo img {
    width: 280px;
    height: auto;
    display: block;
}

.tagline {
    position: absolute;
    top: 180px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 1.2em;
    color: #404542;
    text-align: center;
    width: 100%;
}

.tutor-left {
    position: absolute;
    left: 0px; /* Updated for new 720px width centered */
    bottom: 0px; /* Kept at bottom */
    width: 720px; /* New image width */
    height: 812px; /* New image height */
    transform: none; /* Can be kept or removed */
    z-index: 1;
}

.tutor-right {
    position: absolute;
    right: 0px; /* Updated for new 720px width centered */
    bottom: 0px; /* Kept at bottom */
    width: 720px; /* New image width */
    height: 812px; /* New image height */
    transform: none; /* Can be kept or removed */
    z-index: 1;
}

.tutor-image {
    position: absolute; /* Positioned within its parent (.tutor-left or .tutor-right) */
    left: 0;
    bottom: 0; /* Align to parent's bottom */
    width: 100%; /* Fill parent's width */
    height: 100%; /* Fill parent's height */
    max-width: 100vw; /* Keep this for responsiveness safeguard */
    max-height: 100vh; /* Keep this for responsiveness safeguard */
    object-fit: contain; /* Or cover/fill as needed */
    display: block;
    /* Updated transition to simulate spring animation */
    transition-property: opacity;
    transition-duration: 0.8s; /* 800ms from Figma */
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Approximation of spring */
}

.tutor-image-left-hover,
.tutor-image-right-hover {
    opacity: 0;
    pointer-events: none; /* Prevents hidden image from interfering with mouse events */
}

/* Show hover image when parent container is hovered */
.tutor-left:hover .tutor-image-left-hover,
.tutor-right:hover .tutor-image-right-hover {
    opacity: 1;
}

/* Hide default image when parent container is hovered */
.tutor-left:hover .tutor-image-left-default,
.tutor-right:hover .tutor-image-right-default {
    opacity: 0;
}

/* ========== Media Queries for Responsiveness ========== */
@media (max-width: 1439.98px) {
    .tutor-left {
        left: 0;         /* Align left container to viewport left */
        width: 50vw;     /* Half viewport width */
        height: 56.39vw; /* Maintain aspect ratio: 812px/1440px*100 */
    }

    .tutor-right {
        left: 50vw;      /* Align right container to viewport center */
        right: auto;     /* Override base right:0 */
        width: 50vw;     /* Half viewport width */
        height: 56.39vw; /* Maintain aspect ratio */
    }
}

/* ========== General Text Styles ========== */
.feature-title {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 36px;
    line-height: 40px;
    margin: 0 0 32px 0;
}

.feature-description {
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 19px;
    line-height: 24px;
    margin: 0;
    opacity: 0.9;
}

/* ========== Feature Sections Base Styles ========== */
.feature-section {
    width: 100vw;
    height: 880px;
    position: relative;
    overflow: hidden;
}

.feature-content {
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    max-width: 1600px;
    margin: 0 auto;
}

.feature-image-area {
    position: relative;
    height: 100%;
    display: flex;
}

.feature-image {
    display: block;
    width: auto;
    z-index: 2;
}

.feature-text {
    color: #0F100F;
    max-width: 550px;
}

.feature-arrow {
    position: absolute;
    z-index: 3;
}


/* ========== Feature 1 Section (AI Tutor) ========== */
.feature-section--1 {
    background-color: #EFF0F0;
}

.feature1-image-area {
    position: relative; /* Establish stacking context */
    justify-content: flex-end;
    align-items: flex-end; /* Align image to the bottom */
}

.feature1-image {
    position: relative; /* Needed for z-index */
    z-index: 2; /* Image on top */
    height: 810px;
}

.feature1-arrow {
    left: 50%;
    top: -208px;
    transform: translateX(-50%);
    width: 240px;  /* Changed from 180px */
    height: 240px; /* Changed from 180px */
    z-index: 1; /* Arrow below image */
}

.feature1-text {
    position: absolute;
    right: 80px;
    bottom: 120px;
    z-index: 1; /* Text block below image */
}


/* ========== Feature 2 Section (Real-Time Learning) ========== */
.feature-section--2 {
    background: #FAFAFA;
}

.feature2-content {
    flex-direction: row;
    justify-content: flex-start; /* Change to flex-start */
}

.feature2-image-area {
    position: absolute; /* Position absolutely */
    right: 0; /* Align to the right */
    bottom: 0;
    display: flex; /* Ensure flex context for alignment */
    align-items: flex-end; /* Align the image itself to the bottom */
    margin-left: 100px;
    flex-shrink: 0;
}

.feature2-image {
    height: 810px;
}

.feature2-text {
    position: relative;
    margin-left: 100px;
    flex-shrink: 0;
    color: #0F100F;
    max-width: 550px;
}

.feature2-arrow {
    left: -80px;
    top: -224px;
    width: 300px;
    height: 300px;
    transform: rotate(45deg);
}


/* ========== Feature 3 Section (Personalized Fit) ========== */
.feature-section--3 {
    background: #EFF0F0;
}

.feature3-content {
    flex-direction: row;
    justify-content: flex-start;
}

.feature3-image-area {
    position: relative; /* Establish stacking context */
    width: 740px;
    justify-content: flex-end;
    align-items: flex-end;
}

.feature3-image {
    position: relative; /* Needed for z-index */
    z-index: 2; /* Image on top */
    height: 800px;
}

.feature3-arrow {
    left: 0px;
    top: -208px;
    width: 240px;  /* Changed from 180px */
    height: 240px; /* Changed from 120px */
    z-index: 1; /* Arrow below image */
}

.feature3-text {
    position: absolute;
    right: 100px;
    z-index: 1; /* Text block below image */
}


/* ========== Download Section ========== */
.download-section {
    background-image: url('../images/illustration-bg.png');
    background-size: cover;
    background-position: center center;
    height: 880px; /* Or adjust based on design */
    width: 100vw;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.download-content {
    text-align: center;
    color: #0F100F;
    z-index: 1; /* Ensure content is above background */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px; /* Based on Figma Frame 1 gap */
}

.download-content h2 {
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 72px; /* Based on Figma text style */
    line-height: 1.1; /* Approximately 1.11 */
    text-align: center;
    margin: 0;
}

.app-store-link img {
    display: block;
    height: 40px;
    width: auto;
    /* You might need to set width/height based on the SVG size or design */
    /* Example: */
    /* width: 200px; */
    /* height: auto; */
}

/* ========== Top Navigation ========== */
.top-nav {
    position: fixed; /* Fixed positioning */
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between; /* Logo on left, controls on right */
    align-items: center;
    padding: 28px 66px; /* Adjust padding as needed */
    z-index: 1000; /* High z-index to stay on top */
    box-sizing: border-box; /* Include padding in width calculation */
}

.language-selector {
    display: flex; /* Corrected back to flex */
    align-items: center;
    gap: 8px;
    color: #0F100F; /* From Figma data */
    font-family: 'DM Sans', sans-serif; /* From Figma data */
    font-weight: 500; /* From Figma data */
    font-size: 20px; /* From Figma data */
    cursor: pointer; /* Indicate interactivity */
    position: relative; /* Needed for absolute positioning of dropdown */
}

.language-selector__button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.language-selector__arrow {
     width: 16px;
     height: auto;
     transition: transform 0.2s ease-in-out; /* Add transition for rotation */
}

/* Rotate arrow when dropdown is open */
.language-selector__button[aria-expanded="true"] .language-selector__arrow {
    transform: rotate(180deg);
}

.language-selector__dropdown {
    position: absolute;
    top: 100%; /* Position below the button */
    left: 0;
    background-color: #EFF0F0; /* Slightly different background */
    border: 1px solid #444;
    border-radius: 4px;
    padding: 5px 0;
    margin-top: 5px; /* Space between button and dropdown */
    list-style: none;
    z-index: 1100; /* Ensure it's above the nav bar */
    min-width: 150px; /* Adjust as needed */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Hide dropdown using 'hidden' attribute (controlled by JS) */
.language-selector__dropdown[hidden] {
    display: none;
}

.language-selector__dropdown li button {
    background: none;
    border: none;
    color: #0F100F;
    padding: 8px 15px;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
}

.language-selector__dropdown li button:hover {
    background-color: #E0E0E0;
}

.language-selector img {
    width: 16px; /* Adjust icon size if needed */
    height: auto;
    display: block;
}

.top-nav .download-badge-link {
    display: block; /* Remove extra space below image */
    line-height: 0; /* Further help remove extra space */
}

.top-nav .download-badge {
    height: 40px; /* Adjust height to match logo or desired size */
    width: auto; /* Maintain aspect ratio */
    display: block;
}

/* Styles for static content pages */
.content-page {
    max-width: 800px; /* Adjust width as needed */
    margin: 40px auto; /* Center the content */
    padding: 30px;
    background-color: #ffffff; /* White background for better readability */
    color: #0F100F; /* Dark text color for good contrast */
    border-radius: 8px; /* Optional: slightly rounded corners */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Lighter shadow for white background */
}
.content-page h1,
.content-page h2,
.content-page h3 {
    color: #6ACC8F; /* Use accent color for headings */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}
.content-page h1 { font-size: 2.2em; }
.content-page h2 { font-size: 1.8em; }
.content-page h3 { font-size: 1.4em; }

.content-page p {
    margin-bottom: 1.2em;
    line-height: 1.7;
    color: #404542; /* Dark gray for better readability on white background */
}
.content-page ul,
.content-page ol {
    margin-left: 25px;
    margin-bottom: 1.2em;
    padding-left: 10px;
    color: #404542; /* Ensure list text is dark */
}
.content-page li {
    margin-bottom: 0.6em;
    color: #404542; /* Ensure list item text is dark */
}
.content-page a {
    color: #6ACC8F; /* Match main link color */
    text-decoration: underline;
}
 .content-page a:hover {
    text-decoration: none;
    color: #5BB67F; /* Slightly darker on hover */
}
.content-page hr {
    border: none;
    border-top: 1px solid #E0E0E0; /* Lighter horizontal rule for white background */
    margin: 2em 0;
}

/* Additional text elements for better contrast */
.content-page strong,
.content-page b {
    color: #0F100F; /* Ensure bold text is dark */
}

.content-page em,
.content-page i {
    color: #404542; /* Ensure italic text is readable */
}

.content-page blockquote {
    border-left: 4px solid #6ACC8F;
    padding-left: 20px;
    margin: 1.5em 0;
    color: #404542;
    font-style: italic;
}

.content-page code {
    background-color: #F5F5F5;
    color: #0F100F;
    padding: 2px 6px;
    border-radius: 3px;
    font-family: monospace;
}

/* Mobile responsive styles for content pages */
@media (max-width: 768px) {
    .content-page {
        margin: 20px;
        padding: 20px;
        border-radius: 0; /* Remove border radius on mobile for full width */
    }
    
    .content-page h1 { font-size: 1.8em; }
    .content-page h2 { font-size: 1.5em; }
    .content-page h3 { font-size: 1.2em; }
    
    .content-page p,
    .content-page li {
        font-size: 16px; /* Ensure readable text size on mobile */
        line-height: 1.6;
    }
}

/* Footer Styles */
.site-footer {
    background-color: #EFF0F0; /* Light background for light theme */
    color: #0F100F; /* Dark text for light theme */
    padding: 40px 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
}

.footer-content {
    max-width: 1100px; /* Match general content width if applicable */
    margin: 0 auto;
    text-align: center;
}

.footer-links {
    margin-bottom: 20px;
}

.footer-links a {
    color: #0F100F; /* Dark link color for light theme */
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #6ACC8F; /* Use accent color on hover */
}

.footer-links .link-separator {
    color: #BDBDBD; /* Lighter separator for light theme */
    margin: 0 5px;
}

.social-icons {
    margin-bottom: 20px;
}

.social-icons a {
    color: #0F100F; /* Dark icon color for light theme */
    font-size: 24px; /* Adjust icon size */
    margin: 0 15px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #6ACC8F; /* Use accent color on hover */
}

.copyright {
    margin: 0;
    font-size: 12px;
}