.about-page {
    background: #fff;
    font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    color: #1b1b1b;
}

.about-main {
    padding-top: 60px;
}

.about-hero {
    height: 479px;
    background-image: url("../img/figma-about/about-hero-bg.png");
    background-size: 1919px 886px;
    background-position: center top;
    background-repeat: no-repeat;
    overflow: hidden;
}

.about-hero-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: 18px;
}

.about-hero h1 {
    width: 737px;
    margin: 0 0 24px;
    color: #181c1f;
    font-size: 32px;
    font-weight: 500;
    line-height: 45px;
}

.about-hero p {
    width: 737px;
    margin: 0;
    color: #181c1f;
    font-size: 32px;
    font-weight: 400;
    line-height: 45px;
}

.about-visual-section {
    overflow: hidden;
}

.about-visual-section .w-1300 {
    display: flex;
    justify-content: center;
}

.about-visual-section img {
    display: block;
    width: 1300px;
    height: auto;
}

.about-section-heading {
    text-align: center;
}

.about-section-heading h2,
.about-security-sharp h2 {
    margin: 0;
    color: #111;
    font-size: 36px;
    font-weight: 600;
    line-height: 54px;
}

.about-section-heading p {
    margin: 20px 0 0;
    color: #333;
    font-size: 16px;
    line-height: 24px;
}

.about-white {
    padding: 80px 0;
    background: #fff;
}

.about-value-sharp {
    overflow: hidden;
}

.value-orbit {
    position: relative;
    width: 948px;
    height: 166px;
    margin: 28px auto 0;
    border-bottom: 4px solid rgba(91, 128, 240, 0.22);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(235, 241, 255, 0.88) 0%, rgba(241, 246, 255, 0.7) 52%, rgba(255, 255, 255, 0) 72%);
}

.value-bubble {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 85px;
    border-radius: 28px;
    background: #75bffc;
    color: #fff;
    font-size: 30px;
    font-weight: 600;
    box-shadow: 0 0 28px rgba(36, 153, 255, 0.48);
}

.value-bubble-left {
    left: 174px;
    top: 0;
}

.value-bubble-center {
    left: 414px;
    top: 64px;
}

.value-bubble-right {
    right: 174px;
    top: 0;
}

.value-card-layout {
    position: relative;
    height: 412px;
    margin-top: -8px;
}

.value-card {
    position: absolute;
    width: 246px;
    height: 219px;
    padding: 26px 20px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.78));
    box-shadow: 0 24px 48px rgba(63, 92, 145, 0.08);
}

.value-card::after {
    content: "";
    position: absolute;
    right: 20px;
    top: 25px;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: linear-gradient(135deg, #6ee7f9, #32b8ff);
}

.value-card h3 {
    margin: 0 0 48px;
    color: #272b33;
    font-size: 22px;
    font-weight: 600;
    line-height: 31px;
}

.value-card p {
    margin: 0;
    color: #667085;
    font-size: 16px;
    line-height: 24px;
}

.value-card-1 {
    left: 0;
    top: 0;
}

.value-card-2 {
    left: 263px;
    top: 79px;
    background: linear-gradient(135deg, rgba(232, 250, 255, 0.96), rgba(255, 255, 255, 0.76));
}

.value-card-3 {
    left: 526px;
    top: 158px;
    background: linear-gradient(135deg, rgba(255, 239, 239, 0.92), rgba(255, 255, 255, 0.76));
}

.value-card-4 {
    left: 789px;
    top: 79px;
    background: linear-gradient(135deg, rgba(255, 239, 239, 0.92), rgba(255, 255, 255, 0.76));
}

.value-card-5 {
    right: 0;
    top: 0;
    background: linear-gradient(135deg, rgba(232, 250, 255, 0.96), rgba(255, 255, 255, 0.76));
}

.about-solution {
    padding: 68px 0;
    background:
        linear-gradient(180deg, #ecf1ff 0%, #f5f7fc 15.11%, #f9f9f9 58.17%, #f2f5fc 99.04%),
        #fff;
}

.about-solution-sharp {
    overflow: hidden;
}

.about-solution-sharp .about-section-heading p {
    margin-top: 8px;
}

.solution-map {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 260px 1fr;
    align-items: center;
    min-height: 480px;
    margin-top: 38px;
}

.solution-wing {
    position: relative;
    height: 474px;
    padding: 32px 90px 32px 156px;
    background: linear-gradient(90deg, rgba(236, 246, 255, 0.94), rgba(255, 255, 255, 0.45));
    clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
}

.solution-wing-right {
    padding: 32px 150px 32px 74px;
    background: linear-gradient(270deg, rgba(255, 246, 229, 0.95), rgba(255, 255, 255, 0.5));
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 20% 100%, 0 50%);
}

.solution-wing h3 {
    margin: 0 0 34px;
    color: #2965d8;
    font-size: 22px;
    font-weight: 600;
    line-height: 31px;
}

.solution-wing-right h3 {
    color: #f5a623;
}

.solution-wing ul {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.solution-wing li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 211px;
    height: 65px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.66);
    color: #111;
    font-size: 20px;
    line-height: 28px;
}

.solution-wing-right li {
    width: 235px;
    background: rgba(255, 244, 225, 0.78);
}

.solution-side-label {
    position: absolute;
    left: 24px;
    top: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 428px;
    border-radius: 8px;
    background: #2965d8;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 36px;
    text-align: center;
}

.solution-wing-right .solution-side-label {
    right: 24px;
    left: auto;
    background: #ffc247;
}

.solution-core {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 196px;
    height: 196px;
    margin: 0 auto;
    transform: rotate(45deg);
    background: linear-gradient(135deg, #dff3ff, #19a8ff);
    color: #fff;
    font-size: 32px;
    font-weight: 600;
    line-height: 45px;
    text-align: center;
    box-shadow: 0 14px 40px rgba(25, 168, 255, 0.36);
}

.solution-core br {
    display: none;
}

.solution-core {
    writing-mode: horizontal-tb;
}

.solution-core::before {
    content: "节能运行\A高效管理";
    white-space: pre;
    transform: rotate(-45deg);
}

.solution-core {
    font-size: 0;
}

.solution-core::before {
    font-size: 32px;
    line-height: 45px;
}

.solution-footnote {
    width: 932px;
    height: 51px;
    margin: -30px auto 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 3px solid rgba(91, 128, 240, 0.24);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(235, 241, 255, 0.86), rgba(255, 255, 255, 0));
    color: #1b1b1b;
    font-size: 20px;
    font-weight: 500;
}

.about-security-section {
    padding: 80px 0;
    background: #fff;
}
.about-security-section2 {
    padding: 80px 0;
    background-color: #F7F8FA;
}

.about-security-sharp {
    overflow: hidden;
}

.about-security-sharp h2 {
    text-align: center;
}

.security-grid {
    display: grid;
    grid-template-columns: 424px 866px;
    gap: 10px;
    margin-top: 40px;
}

.security-left {
    display: grid;
    gap: 10px;
}

.security-left article,
.security-certs {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    background: #fff;
}

.security-left article {
    height: 234px;
    padding: 36px 32px;
    box-shadow: 0 18px 40px rgba(31, 48, 83, 0.04);
}

.security-left h3 {
    margin: 0 0 24px;
    color: #111;
    font-size: 24px;
    font-weight: 600;
    line-height: 34px;
}

.security-left p {
    margin: 0 0 8px;
    color: #697386;
    font-size: 14px;
    line-height: 22px;
}

.security-left strong {
    color: #111;
    font-size: 18px;
    font-weight: 500;
}

.security-icon {
    position: absolute;
    right: 64px;
    top: 72px;
    width: 76px;
    height: 76px;
    border-radius: 18px;
    background: linear-gradient(135deg, #84a7ff, #4d75f5);
    box-shadow: 0 18px 30px rgba(77, 117, 245, 0.26);
}

.security-icon-shield {
    clip-path: polygon(50% 0, 88% 16%, 82% 68%, 50% 100%, 18% 68%, 12% 16%);
}

.security-icon-book {
    border-radius: 8px 18px 18px 8px;
}

.security-certs {
    height: 478px;
}

.security-certs img {
    display: block;
    width: 866px;
    height: 478px;
    object-fit: cover;
}

.client-logos {
    margin-top: 40px;
}

.client-logos h2 {
    margin-bottom: 24px;
    text-align: left;
}

.client-logos img {
    display: block;
    width: 1300px;
    height: auto;
}

.about-provider {
    position: relative;
    min-height: 657px;
    padding: 80px 0;
    border-bottom: 1px solid #f3f3f3;
    background: #fff;
    overflow: hidden;
}

.about-provider-map {
    position: absolute;
    right: 134px;
    top: 88px;
    width: 800px;
    height: 800px;
    opacity: 0.1;
    object-fit: cover;
    pointer-events: none;
}

.about-provider-inner {
    position: relative;
    z-index: 1;
}

.about-provider h2 {
    margin: 0 0 40px;
    color: #1b1b1b;
    font-size: 32px;
    font-weight: 600;
    line-height: 45px;
}

.about-stats {
    display: grid;
    grid-template-columns: repeat(2, 220px);
    column-gap: 225px;
    row-gap: 24px;
    width: 700px;
    margin-bottom: 32px;
}

.about-stats div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.about-stats strong {
    color: #2965d8;
    font-family: "DIN Next LT Pro", "DIN", Arial, sans-serif;
    font-size: 32px;
    font-weight: 500;
    line-height: 38px;
}

.about-stats em {
    margin-left: 3px;
    font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.about-stats span {
    color: #9d9d9d;
    font-size: 12px;
    line-height: 17px;
}

.about-capabilities {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid #ececec;
}

.about-capabilities article {
    min-height: 300px;
    padding: 60px 40px 60px 0;
}

.about-capabilities article + article {
    padding-left: 40px;
    border-left: 1px solid #ececec;
}

.about-capabilities h3 {
    margin: 0 0 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #ececec;
    color: #333;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
}

.about-capabilities p {
    margin: 0;
    color: #999;
    font-size: 14px;
    line-height: 20px;
}