/* Home Page Styles */

body {
    padding-top: 0; /* Allow hero section to be under the transparent navbar */
}

/* Hero Section */
.hero-section {
    width: 100%;
    /* Use transparent or body color, the img provides the background/grid */
    background-color: #FFFFFF;
    /* overflow-x: hidden; */
    /* margin-bottom: 120px; */
    display: flex;
    justify-content: center;
}

.hero-container {
    position: relative;
    /* width: 100%; */
    /* max-width: 1920px; Limit to max design width */
    margin: 0 auto;
    background-image: url('../imgs/home/background-english.svg');
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
}

/* The Background Image acts as the canvas */
.main-bg {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    display: none; /* Hide old class if still present on elements not removed */
}

.hero-illustration-img {
    width: 100%;
    min-width: 1200px;
    height: auto;
    display: block;
    position: relative;
    z-index: 5;
    left: 50%;
    transform: translateX(-50%);
}

/* Content Overlay */
.hero-content {
    position: absolute;
    /* Use clamp to ensure minimum spacing from navbar (120px) and max spacing (180px) */
    top: clamp(120px, 10vw, 180px);
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 10;
    padding: 0 20px;
}

@media (min-width: 1921px) {
    .hero-content {
        top: 180px;
    }
}



.hero-title {
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    /* Responsive font size using clamp */
    font-size: clamp(28px, 3vw, 42px);
    line-height: 1.2;
    color: #111111;
    margin-bottom: 20px;
}

.hero-subtitle {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    /* Responsive font size */
    font-size: clamp(14px, 1.2vw, 16px);
    line-height: 1.5;
    color: #666666;
    margin-bottom: 30px;
}

/* Button Styles */
.hero-btn {
    display: inline-flex; /* Changed to inline-flex for centering in text-align block */
    flex-direction: row;
    align-items: center;
    padding: 12px 40px;
    width: 220px;
    height: 35px;
    
    background: #3B82F6;
    border-radius: 100px;
    text-decoration: none;
    
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.hero-btn:hover {
    background-color: #2563eb;
    transform: translateY(-2px);
}

.hero-btn span {
    width: 138px;
    height: 26px;
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400;
    font-size: 18px;
    line-height: 26px;
    color: #FFFFFF;
    white-space: nowrap;
}

.hero-btn .icon-wrapper {
    width: 30px;
    height: 30px;
    position: relative;
}

.hero-btn .btn-icon {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 5px;
    top: 5px;
}

/* Responsive Adjustments for Hero Section */
@media (max-width: 1440px) {
    /* .hero-content { top: 150px; } Removed to allow vw scaling */
}

@media (max-width: 1200px) {
    /* Font sizes handled by clamp() */
    /* .hero-title { font-size: 36px; } */
    /* .hero-subtitle { font-size: 15px; } */
    
    .hero-title {
        margin-bottom: 15px;
    }
    .hero-subtitle {
        margin-bottom: 25px;
    }
}

@media (max-width: 992px) {
    /* top handled by clamp() */
    /* .hero-content { top: 110px; } */
    
    /* font-size handled by clamp() */
    /* .hero-title { font-size: 32px; } */
}

@media (max-width: 768px) {
    /* .hero-content { top: 100px; } */
    /* .hero-title { font-size: 28px; } */
    
    .hero-content {
        /* On mobile, we might need more specific adjustments, 
           but clamp(120px...) ensures navbar clearance. */
        padding: 0 15px;
    }
    
    .hero-title {
        line-height: 1.3;
    }
    .hero-subtitle {
        font-size: 14px;
        margin-bottom: 20px;
        padding: 0 10px;
    }
    .hero-btn {
        width: 180px;
        height: 32px;
        padding: 10px 30px;
    }
    .hero-btn span {
        width: auto;
        font-size: 16px;
    }
}

/* Floating Images */
.hero-floats {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Let clicks pass through to underlying elements if needed */
    z-index: 20;
}

.float-img {
    position: absolute;
    filter: drop-shadow(0px 20px 40px rgba(0,0,0,0.15));
    height: auto;
}

.float-left {
    /* Position relative to the container based on 123.css "Station Message/Inbox" approx */
    left: 10%;
    top: 10.5%; 
    width: 23%; /* Approx width from 123.css */
    max-width: 400px;
    min-width: 150px;
    animation: floatUpDown 4s ease-in-out infinite;
}

.float-right {
    /* Position relative to the container based on 123.css "Frame 2085668121" approx */
    left: 67%;
    top: 83%; 
    width: 25%; /* Approx width */
    max-width: 490px;
    min-width: 200px;
    animation: floatUpDown 5s ease-in-out infinite reverse;
}

/* Animation Keyframes */
@keyframes floatUpDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Responsive adjustments for floats */
@media (max-width: 1200px) {
    .float-left {
        width: 20%;
        left: 8%;
        top: 12%;
    }
    .float-right {
        width: 22%;
        left: 70%;
        top: 80%;
    }
}

@media (max-width: 992px) {
    .float-left {
        width: 25%;
        left: 5%;
        top: 15%;
    }
    .float-right {
        width: 28%;
        left: 65%;
        top: 75%;
    }
}

@media (max-width: 768px) {
    .float-left {
        width: 120px;
        min-width: auto;
        left: 20px;
        top: 15%;
    }
    .float-right {
        width: 140px;
        min-width: auto;
        left: auto;
        right: 20px;
        top: auto;
        bottom: 10%;
    }
}

@media (max-width: 480px) {
    .float-left {
        width: 80px;
        left: 10px;
        top: 20%;
    }
    .float-right {
        width: 100px;
        right: 10px;
        bottom: 5%;
    }
}

/* Hero Illustration Overlay */
.hero-illustration {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: multiply;
}

.illustration-img {
    width: 100%;
    height: auto;
    display: block;
}

/* Responsive adjustments - merged into main media queries above */

/* =========================================
   Apps Section (Section 2)
   ========================================= */
.apps-section {
    position: relative;
    width: 100%;
    background: #F8F9FB;
    padding: 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.apps-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
}

/* Section Title */
.apps-title {
    width: 100%;
    max-width: 882px;
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 48px;
    line-height: 62px;
    text-align: center;
    color: #111111;
    margin-bottom: 60px;
}

/* Tabs */
.apps-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #FFFFFF;
    border-radius: 100px;
    padding: 8px;
    margin-bottom: 60px;
    gap: 10px;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.05); */
}

.app-tab {
    padding: 10px 30px;
    border-radius: 100px;
    cursor: pointer;
    font-family: 'Microsoft YaHei UI', sans-serif;
    font-size: 16px;
    color: #666666;
    transition: all 0.3s ease;
}

.app-tab.active {
    background: #3B82F6;
    color: #FFFFFF;
}

.app-tab:hover:not(.active) {
    background-color: #f0f0f0;
}

/* Apps White Box Container */
.apps-grid {
    position: relative;
    width: 100%;
    max-width: 1600px;
    /* min-height: 782px; Removed to reduce bottom whitespace */
    height: auto;
    background: #FFFFFF;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    margin: 0 auto;
    padding: 60px 80px; /* Internal spacing */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    /* Removed justify-content: space-between to allow margin-top to work */
}

/* App Cards Grid List */
.apps-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

/* App Card */
.app-card {
    background: #FFFFFF;
    border: 1px solid #E0E0E0;
    border-radius: 10px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.app-card:hover {
    transform: translateY(-15px);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    border-color: #3B82F6;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 20px;
}

.app-icon {
    width: 40px;
    height: 40px;
    border: 1px solid #E4E7ED;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    background: #FFFFFF; /* Default background */
    flex-shrink: 0;
}

.app-title {
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #111111;
    margin: 0; /* Remove top margin as it's now flex aligned */
}

.app-desc {
    font-family: 'Geist', sans-serif;
    font-size: 12px;
    color: #333333;
    line-height: 1.6;
    flex-grow: 1; 
}

.app-tags {
    display: flex;
    gap: 10px;
    margin-top: auto; /* Push to bottom if height is fixed, or just keep spacing */
    flex-wrap: wrap;
}

.app-tag {
    background: #F5F6FA;
    border-radius: 4px;
    padding: 8px 10px;
    font-family: 'Geist', sans-serif;
    font-size: 10px;
    color: #666666;
}

/* Learn More Button */
.learn-more-container {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    width: 100%;
}

.learn-more-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 40px;
    background: #FFFFFF;
    border: 1px solid #E0E0E0; /* Optional border */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.05);
    border-radius: 100px;
    
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 18px;
    color: #3B82F6;
    text-decoration: none;
    transition: all 0.3s ease;
}

.learn-more-btn:hover {
    box-shadow: 0px 6px 15px rgba(59, 130, 246, 0.15);
    transform: translateY(-2px);
    border-color: #3B82F6;
}

/* Responsive Grid */
@media (max-width: 1400px) {
    .apps-list {
        grid-template-columns: repeat(3, 1fr); /* Keep 3 for large tablets/small desktops if possible */
        gap: 20px;
    }
    .apps-grid {
        padding: 40px;
    }
}

@media (max-width: 1200px) {
    .apps-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .apps-list {
        grid-template-columns: 1fr;
    }
    .apps-tabs {
        flex-wrap: wrap;
    }
    .apps-grid {
        padding: 20px;
    }
}

/* =========================================
   Creativity Section (Section 3)
   ========================================= */
.creativity-section {
    width: 100%;
    background: #FFFFFF;
    padding: 100px 0;
    display: flex;
    justify-content: center;
}

.feature-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 80px;
    gap: 60px;
}

.feature-text {
    flex: 1;
    max-width: 800px; /* Constrain width for better readability */
}

.feature-title {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 700;
    font-size: 40px;
    line-height: 52px;
    color: #111111;
    margin-bottom: 30px;
}

.feature-desc {
    font-family: 'Geist', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 24px;
    line-height: 40px;
    color: #333333;
}

.feature-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.feature-image img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0px 4px 30px rgba(0, 0, 0, 0.05)); /* Optional shadow for images */
}

/* =========================================
   Templates Section (Section 4)
   ========================================= */
.templates-section {
    width: 100%;
    /* Use same background as Apps section or alternating color */
    padding: 100px 0;
    display: flex;
    justify-content: center;
}

/* Reverse layout class */
.feature-container.reverse {
    flex-direction: row-reverse;
}

/* Responsive Features */
@media (max-width: 1200px) {
    .feature-container {
        padding: 0 40px;
        gap: 40px;
    }
    .feature-title {
        font-size: 32px;
        line-height: 42px;
    }
    .feature-desc {
        font-size: 20px;
        line-height: 32px;
    }
}

@media (max-width: 992px) {
    .feature-container, 
    .feature-container.reverse {
        flex-direction: column;
        text-align: center;
    }
    .feature-text {
        max-width: 100%;
    }
}

/* =========================================
   Solutions Section (Section 5)
   ========================================= */
.solutions-section {
    width: 100%;
    background: #FFFFFF;
    padding: 100px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.solutions-title {
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 52px;
    color: #111111;
    margin-bottom: 60px;
    text-align: center;
}

.solutions-container {
    width: 100%;
    max-width: 1600px;
    background: #FFFFFF;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    margin: 0 auto;
    display: flex;
    overflow: hidden; /* Ensure rounded corners clip content */
    min-height: 600px;
}

/* Sidebar */
.solutions-sidebar {
    width: 280px;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 30px;
    flex-shrink: 0;
}

.solution-tab {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    font-family: 'Geist', sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: #666666;
}

.solution-tab:hover {
    background-color: #F5F6FA;
}

.solution-tab.active {
    background: #3B82F6;
    color: #FFFFFF;
}

.solution-tab-icon {
    width: 24px;
    height: 24px;
    /* We will use SVG masks or filters to change icon color, 
       or just rely on the SVG having appropriate colors.
       Since we are swapping images or using inline SVGs, 
       let's assume we use img tags. */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* If using img tags for icons, we might need filter to turn them white on active */
.solution-tab.active .solution-tab-icon img {
    filter: brightness(0) invert(1); /* Turns black/colored icons to white */
}

/* Content Area */
.solutions-content-wrapper {
    flex: 1;
    padding: 60px 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.solution-content {
    flex: 1;
    max-width: 600px;
    display: none; /* Hidden by default */
    animation: fadeIn 0.5s ease;
}

.solution-content.active {
    display: block;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.solution-content h3 {
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 42px;
    color: #111111;
    margin-bottom: 20px;
}

.solution-content p {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 26px;
    color: #666666;
    margin-bottom: 30px;
}

.solution-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.check-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 4px;
}

.feature-item-content h4 {
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #111111;
    margin-bottom: 6px;
}

.feature-item-content p {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 22px;
    color: #666666;
    margin-bottom: 0;
}

/* Illustration Area */
.solution-illustration {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none; /* Hidden by default */
}

.solution-illustration.active {
    display: flex;
}

.solution-illustration img {
    max-width: 100%;
    height: auto;
    /* max-height: 400px; */
}

/* Responsive Solutions */
@media (max-width: 1200px) {
    .solutions-container {
        flex-direction: column;
        height: auto;
        min-height: auto;
    }
    
    .solutions-sidebar {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        padding: 20px;
        border-left: none;
        border-bottom: 1px solid #F0F0F0;
        gap: 10px;
        box-sizing: border-box;
    }
    
    .solution-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }
    
    .solutions-content-wrapper {
        flex-direction: column-reverse;
        padding: 40px;
        gap: 40px;
        text-align: center;
    }
    
    .solution-content {
        max-width: 100%;
    }
    
    .feature-item {
        text-align: left;
        justify-content: center; /* Or left aligned */
    }
}

/* =========================================
   Partner Section (Section 6)
   ========================================= */
.partners-section {
    width: 100%;
    height: 362px;
    background: #D6E4FF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.partners-title {
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #111111;
    margin-bottom: 60px;
    text-align: center;
}

.partners-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.partners-track {
    display: flex;
    align-items: center;
    gap: 80px; /* Space between icons */
    width: max-content;
    animation: marquee 30s linear infinite;
}

.partners-track img {
    height: 60px; /* Logos height */
    width: auto;
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-25%); /* Move by 1 set (1/4 of total width) */
    }
}

/* =========================================
   Automation Section (Section 7)
   ========================================= */
.automation-section {
    width: 100%;
    padding: 100px 0;
    position: relative;
    /* Using CSS gradient to ensure full coverage and responsiveness */
    background: linear-gradient(180deg, #F6FAFF 0%, rgba(246, 250, 255, 0) 100%), #FFFFFF;
    overflow: hidden;
}

.automation-section::before {
    content: '';
    position: absolute;
    width: 504px;
    height: 492px;
    left: 29%;
    top: 113px;
    background: #68A2FF;
    opacity: 0.15;
    filter: blur(150px);
    pointer-events: none;
    z-index: 0;
}

.automation-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    position: relative;
    z-index: 1;
    padding: 0 40px;
}

/* Left Content */
.automation-content {
    width: 600px;
    flex-shrink: 0;
}

.automation-title-wrapper {
    position: relative;
    margin-bottom: 30px;
}

.automation-pre-title {
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 1.2;
    color: #1F1F1F;
    display: block;
}

.automation-main-title {
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    font-size: 56px;
    line-height: 1.2;
    background: linear-gradient(90deg, #0665FF 69%, #02B7FE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: block;
}

.automation-desc {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 1.4;
    color: #666666;
    margin-bottom: 60px;
    max-width: 562px;
}

/* Features */
.automation-features {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.auto-feature-item {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 64px; /* Match icon height */
}

.auto-feature-text {
    font-family: 'Geist', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #333333;
}

/* CSS Icons Construction based on 5.css */
.auto-feature-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
}

/* Right Image */
.automation-image {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.automation-image img {
    max-width: 100%;
    height: auto;
    filter: drop-shadow(0px 20px 60px rgba(0,0,0,0.08));
}

@media (max-width: 1200px) {
    .automation-container {
        flex-direction: column;
        padding: 60px 20px;
    }
    
    .automation-content {
        width: 100%;
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }
    
    .automation-desc {
        margin-left: auto;
        margin-right: auto;
    }
    
    .auto-feature-item {
        justify-content: center;
        text-align: left;
    }
    
    .automation-image {
        justify-content: center;
        width: 100%;
    }
}

/* =========================================
   Free Download Section (Section 8)
   ========================================= */
.free-download-section {
    width: 100%;
    padding: 100px 0;
    position: relative;
    background: url('../imgs/home/free-download-background.svg') no-repeat center center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.free-download-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 60px;
    max-width: 1000px;
    text-align: center;
    padding: 0 20px;
}

.free-download-title {
    font-family: 'Geist', sans-serif;
    font-weight: 700;
    font-size: 48px;
    line-height: 58px;
    color: #222222;
}

.free-download-title .highlight-blue {
    color: #3B82F6;
}

.free-download-btn {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 20px 40px;
    gap: 10px;
    width: 287px;
    height: 72px;
    background: #3B82F6;
    border-radius: 100px;
    text-decoration: none;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.free-download-btn:hover {
    transform: translateY(-2px);
    background: #2563EB;
}

.free-download-btn span {
    font-family: 'Geist', sans-serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 22px;
    color: #FFFFFF;
}

.free-download-btn img {
    width: 32px;
    height: 32px;
}

@media (max-width: 768px) {
    .free-download-title {
        font-size: 32px;
        line-height: 1.3;
    }
    
    .free-download-btn {
        width: auto;
        padding: 15px 30px;
        height: auto;
    }
}