/* If you have HarmonyOS Sans SC font files, place the @font-face code here */

    /* Full-width background layer that breaks out of the backend container width */
    .ys-fullwidth-bg {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
        background-color: #f3f7fc;
        overflow: hidden;
    }

    /* Content wrapper centered within 1440px for comfortable reading */
    .ys-about-section {
        font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
        max-width: 1440px;
        margin: 0 auto;
        padding: 60px 20px;
        background-color: transparent;
        color: #333;
        box-sizing: border-box;
    }

    .ys-about-section * {
        box-sizing: border-box;
    }

    /* Top main content area */
    .ys-about-top {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 60px;
        margin-bottom: 60px;
    }

    /* Left text area - widened and shifted left */
    .ys-about-text {
        flex: 1 1 auto;
        max-width: 720px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /* Title: 44px, bold */
    .ys-title {
        font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-size: 44px;
        font-weight: 700;
        line-height: 1.4;
        color: #1a1a1a;
        margin-top: 0;
        margin-bottom: 30px;
    }

    /* First description paragraph (black, Medium) */
    .ys-desc-p1 {
        font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-weight: 500;
        font-size: 18px;
        color: #000000;
        line-height: 1.8;
        margin-top: 0;
        margin-bottom: 16px;
        text-align: justify;
    }

    /* Following description paragraphs (smaller, 50% opacity, Regular, no paragraph gaps) */
    .ys-desc-light {
        font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        font-weight: 400;
        font-size: 15px;
        color: rgba(0, 0, 0, 0.5);
        line-height: 1.7;
        text-align: justify;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Right image area - wider and pushed to the right */
    .ys-about-image {
        flex: 0 0 640px;
        max-width: 640px;
        margin-left: auto;
        position: relative;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    }

    /* Image - absolutely positioned to fill the container.
       object-position shifts the visible image content left while the mask stays fixed. */
    .ys-about-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: 30% center; /* Show more of the left side within the fixed mask */
        display: block;
    }

    /* Bottom statistics area: no white background, border, or shadow; text and dividers only */
    .ys-stats-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        background-color: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }

    .ys-stat-item {
        flex: 1;
        text-align: center;
        border-right: 1px solid #e0e6ed;
        padding: 0 10px;
    }

    .ys-stat-item:last-child {
        border-right: none;
    }

    /* Number size, color #0c48ac */
    .ys-stat-number {
        font-size: 48px;
        font-weight: 700;
        color: #0c48ac;
        line-height: 1.2;
        display: flex;
        justify-content: center;
        align-items: baseline;
    }

    /* Unit size increased proportionally */
    .ys-stat-unit {
        font-size: 20px;
        font-weight: 600;
        color: #0c48ac;
        margin-left: 2px;
    }

    .ys-stat-label {
        font-size: 14px;
        color: #888;
        margin-top: 10px;
    }

    /* Mid-size screens: keep text wide, shrink image slightly */
    @media (max-width: 1360px) {
        .ys-about-top { gap: 50px; }
        .ys-about-text { max-width: 680px; }
        .ys-about-image { flex: 0 0 560px; max-width: 560px; }
    }

    @media (max-width: 1280px) {
        .ys-about-text { max-width: 620px; }
        .ys-about-image { flex: 0 0 500px; max-width: 500px; }
    }

    /* Responsive design (mobile adaptation) */
    @media (max-width: 768px) {
        .ys-about-top {
            flex-direction: column;
            gap: 30px;
        }

        .ys-about-text, .ys-about-image {
            max-width: 100%;
        }

        .ys-title {
            font-size: 32px;
        }

        .ys-about-image {
            flex: none;
            width: 100%;
            position: static;
            height: auto;
            box-shadow: none;
        }

        .ys-about-image img {
            position: static;
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            object-position: center; /* Mobile image shows in full, no crop */
        }

        .ys-stats-container {
            flex-wrap: wrap;
            padding: 20px 0;
        }

        .ys-stat-item {
            flex: 0 0 50%;
            border-right: none;
            margin-bottom: 30px;
        }

        .ys-stat-item:nth-last-child(-n+2) {
            margin-bottom: 0;
        }

        .ys-stat-number {
            font-size: 38px;
        }

        .ys-stat-unit {
            font-size: 18px;
        }
    }