@import "variables-pc.css";
@import "scrollbar-blue.css";

/* ==========================================================================
   about-usV2 - 关于我们 V2（深色主题，与 indexV2 / downloadV2 保持一致）
   涵盖 about-usV2.html 中出现的所有 class；
   agent.html / brand-list.html / contact-form.html 样式在各自共享文件中。
   ========================================================================== */

.content-wrapper {
    background-image: linear-gradient(90deg, rgba(8, 22, 48, 0.00) 0%, rgba(10, 20, 48, 0.24) 26%, rgba(21, 13, 50, 0.30) 50%, rgba(65, 27, 24, 0.24) 77%, rgba(72, 29, 19, 0.00) 100%), linear-gradient(180deg, #01040A 0%, #131422 100%);
    position: relative;
    /* 纵向 flex + 最小视口高度：内容不足一屏时
       让 .last-section 始终吸附在页面最底部（见下方 .last-section） */
    display: flex;
    flex-flow: column;
    min-height: 100vh;
}

/* ---------- 顶部导航（face/desktop/pages-navigation.html） ---------- */
.navigator, .navigator .title, .menu-item {
    color: var(--color-text-inverse);
}

.navigator .menu .about-us-link {
    border-bottom: 2px #FF6F08 solid;
}

.menu-item:hover {
    background-color: rgba(255, 255, 255, 0.18);
}

.lang-btn {
    border: 1px solid #FFFFFF;
}

.lang-btn.active {
    background-color: #FFFFFF;
    color: #000000;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.about-us-bg-wrapper {
    position: absolute;
    width: 100%;
    height: 100.5rem;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

img.about-us-bg {
    width: 81%;
    filter: blur(0.5rem);
    margin-top: -29rem;
    opacity: 0; /* 动画开始前隐藏，避免首帧闪现 */
    animation: about-us-bg-enter 2s var(--ease-out) forwards,
    about-us-bg-float 18s ease-in-out 2s infinite alternate;
}

/* ---------- 背景光晕（bg.svg 蝶形光斑）出场效果 ---------- */

/* 入场：光晕自下方缓缓浮起、由小变大地“绽放” */
@keyframes about-us-bg-enter {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(2.5rem);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* 入场后如蝶息般缓慢漂浮/呼吸，alternate 往复，无跳变 */
@keyframes about-us-bg-float {
    from {
        transform: scale(1) translateY(0);
    }
    to {
        transform: scale(1.03) translateY(-1.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    img.about-us-bg {
        opacity: 1;
        animation: none;
    }
}

/* ---------- 页面根容器 ---------- */
.about-us-v2 {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 9;
}

/* ---------- 首屏 Hero ---------- */
.about-hero {
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
    margin-top: 11.5rem;
}

h1.about-hero-title {
    margin: var(--spacing-12) 0 0;
    font-size: 4.25rem;
    line-height: var(--line-height-tight);
    text-align: center;
    color: transparent;
    background-image: linear-gradient(90deg, #FFFFFF -5%, #9B9AFF 17%, #2BAAFF 57%, #FFFFFF 75%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

h4.about-hero-tagline {
    margin: var(--spacing-4) 0 0;
    opacity: 0.65;
    font-size: 2rem;
    color: #F0F0F0;
    letter-spacing: 0;
    text-align: center;
    font-weight: 500;
}

/* CTA 按钮（镜像 indexV2 的 hero-banner-cta，保持视觉一致） */
.hero-banner-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.69rem;
    margin-top: 5.19rem;
    margin-bottom: 6.44rem;
}

.hero-banner-cta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: 1rem;
    padding: 1.81rem 0;
    font-size: 1.88rem;
    color: #FFFFFF;
    width: 21.75rem;
    justify-content: center;
}

.hero-banner-cta-trial {
    background-image: linear-gradient(90deg, #2762EB 0%, #7B3AED 100%);
}

.hero-banner-cta-download {
    background-color: rgba(255, 255, 255, 0.12);
    border: 0.0625rem solid #8F7EB0;
}

.hero-banner-download-icon {
    width: 1.13rem;
    height: 1.38rem;
}

/* ---------- 理念金句 ---------- */
.about-creed {
    position: relative;
    background: #151B2A;
    border-radius: 16px;
    width: 80rem;
    padding: 3.13rem 0;
}

.about-creed-text {
    margin: 0;
    font-size: 1.5rem;
    color: #9699C8;
    letter-spacing: 0;
    text-align: center;
    line-height: 2.06rem;
    font-weight: 500;
}

.about-creed-text .highlight {
    color: #FFC25D;
}

/* 装饰性点缀（embellish1~3），默认四角/两侧摆放，可按视觉稿微调 */
.about-creed-embellish {
    position: absolute;
}

.about-creed-embellish-1 {
    left: 2rem;
    top: -2rem;
    width: 3.31rem;
    height: 3.31rem;
}

.about-creed-embellish-2 {
    top: -1rem;
    left: 8rem;
    width: 5.53rem;
    height: 5.53rem;
}

.about-creed-embellish-3 {
    right: 3rem;
    bottom: -1rem;
    width: 3.59rem;
    height: 3.59rem;
}

/* ---------- 通用区块 ---------- */
.about-section {
    display: flex;
    flex-flow: column;
    align-items: center;
    margin-top: 7.4rem;
    position: relative;
    z-index: 9;
}

.section-head {
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 9;
}

.intro-embellish-item.intro-embellish-item1 {
    position: absolute;
    top: -1rem;
    left: -3rem;
    width: 3rem;
    height: 2.7rem;
}

.intro-embellish-item.intro-embellish-item2 {
    position: absolute;
    bottom: 1rem;
    right: -3rem;
    width: 2.25rem;
    height: 2.12rem;
}

h2.section-name {
    margin: 0;
    font-size: 2.63rem;
    line-height: 3.75rem;
    font-weight: 600;
    text-align: center;
    color: transparent;
    background-image: linear-gradient(180deg, #CECDFA 0%, #9B9BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-en {
    margin-top: 0.75rem;
    font-size: 0.94rem;
    letter-spacing: var(--letter-spacing-widest);
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: justify;
    font-weight: 500;
}

/* 页面内正文高亮（与 V2 主题一致的金色） */
span.highlight {
    color: #FFC25D;
    white-space: nowrap;
}

/* ---------- 企业介绍 ---------- */
.intro-columns {
    display: flex;
    justify-content: center;
    gap: 2.25rem;
    margin-top: 5.81rem;
    align-items: stretch;
}

.intro-left, .intro-right {
    width: 38.88rem;
    background: rgba(20, 60, 126, 0.24);
    border: 0.13rem solid rgba(255, 255, 255, 0.50);
    border-radius: 1.88rem;
    padding: 3.06rem 0;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: flex-start;
}

.intro-embellish {
    display: flex;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.50);
    border-radius: 4rem;
    padding: 1.5rem 1.81rem;
    margin-bottom: 1.81rem;
}

.intro-embellish-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.intro-embellish .intro-embellish-item {
    background: rgba(255, 255, 255, 0.10);
    border-radius: 50%;
    padding: 0.94rem 0.88rem;
}

.intro-embellish .intro-embellish-item img {
    width: 3.31rem;
    height: 3.31rem;
}

.intro-text, .history-text {
    font-size: 1.25rem;
    line-height: 2.38rem;
    color: #FFFFFF;
    width: 34.88rem;
    text-align: justify;
    margin-top: 1.25rem;
    margin-bottom: 0;
    text-indent: 2.5rem;
}

.intro-text-bottom {
    color: #9699C8;
}

.intro-right {

}

.history-text {

}

.history-img {
    margin-top: 0.94rem;
    width: 30.48rem;
    height: 17.13rem;
}

/* ---------- 关于我们 / 我们的目标 ---------- */
.media-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4rem;
    padding-top: 3.5rem;
    position: relative;
    overflow: hidden;
    margin-top: -4rem;
    width: 100%;
}

.about-section-team .media-row {
    height: 64rem;
    margin-top: -11rem;
}

.about-section-team .media-row:after {
    content: "";
    width: 214%;
    height: 60.25rem;
    transform: rotate(-8deg);
    background-image: radial-gradient(ellipse at 50% 50%, #FFFFFF 0%, #F3F3FC 24%, #7A78CB 42%, #231867 44%, #322967 48%, #040812 51%, transparent 100%);
    position: absolute;
    background-repeat: no-repeat;
    filter: blur(3rem);
    top: 6rem;
}

.about-section-team .media-img {
    width: 35.65rem;
    border-radius: 1rem;
    position: relative;
    z-index: 9;
}

.text-cards {
    display: flex;
    flex-flow: column;
    gap: 2rem;
    position: relative;
    z-index: 9;
    width: 42.25rem;
}

.text-card {
    padding: 2rem 2.5rem;
    background: rgba(199, 196, 255, 0.22);
    border: 1px solid #FFFFFF;
    border-radius: 3.63rem;
    font-size: 1.25rem;
    color: #130C13;
    letter-spacing: 0;
    text-align: justify;
    line-height: 2.38rem;
    font-weight: 500;
}

.text-card p {
    margin: 0;
    font-size: 1.38rem;
    line-height: 1.7;
    color: #130C13;
    text-indent: 2.5rem;
}

.highlight-text {
    position: relative;
    z-index: 1;
    color: #130C13;
    font-weight: 500;
    background: linear-gradient(0deg, transparent -8%, #f6d7b8cc 50%, transparent 109%);
    border-radius: 0.5rem;
}

.goal-text {
    width: 84%;
}

.goal-title {
    font-size: 2.63rem;
    line-height: 3.75rem;
    text-align: left;
    color: transparent;
    background-image: linear-gradient(180deg, #CECDFA 12%, #9B9BFF 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    margin-bottom: 5.13rem;
}

.goal-desc {
    margin: 1.5rem 0 5.38rem;
    line-height: 1.7;
    font-size: 1.25rem;
    color: #FFFFFF;
}

.point-bottom {
    margin: 12.25rem auto;
    width: 88rem;
    position: relative;
}

.agent-wrapper {
    width: 100%;
    position: relative;
}

.agent-wrapper:after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    transform: scaleY(-1);
    background-image: linear-gradient(180deg, rgba(33, 66, 173, 0.43) 0%, rgba(36, 30, 159, 0.00) 100%);
    width: 100%;
    height: 14.63rem;
}

/* ---------- 品牌墙（face/brand-list.html）外层样式 ----------
   .brand-* 样式在共享的 face/css/brand-list.css 中 */
.section-content {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.section-title {
    margin-bottom: 4.25rem;
}

h3.section-title-heading {
    margin: 5rem 0 0;
    font-size: 3rem;
    color: #FFFFFF;
    text-align: center;
}

h4.section-title-subtitle {
    margin: 1rem 0 0;
    font-size: 1.5rem;
    font-weight: var(--font-weight-normal);
    color: #9699C8;
    text-align: center;
}

.contact-form-wrapper {
    margin-top: 6.25rem;
}

.contact-wrap {
    margin: -2.94rem auto 8.5rem !important;
}

/* ---------- 区块修饰符（预留钩子） ---------- */
.about-section-intro {
}

.about-section-team {
}

.about-section-goal {
    margin-top: -8rem;
}

.about-section-goal .media-row {
    width: 80rem;
    background-image: linear-gradient(90deg, #2959EB 0%, #0D0A10 100%, transparent 100%);
    border-radius: 4.25rem;
    margin-top: 6.13rem;
}

.about-section-goal img.media-img {
    position: absolute;
    top: 1rem;
    right: 7rem;
}

/* ---------- 继承 base.css / 暂未定制的 class（占位） ---------- */
.company-name {
}

.contact-subtitle {
}

.footer-nav__group {
}

.display-none {
}

/* ---------- 底部区域（contact-information.html + pages-footer.html） ---------- */
/* 在 .content-wrapper 的纵向 flex 中，margin-top:auto 吞掉剩余空间，
   内容不足一屏（如宽度 <1024px 缩放后）也始终贴在页面最底部 */
.last-section {
    margin-top: auto;
}