/* =========================================================
   TOPlayer · 高阶玩家 — V8 about page
   Faithful clone of OKX /about home-container (4 sections).
   Structure & layout copied 1:1 (original class names kept);
   design tokens mapped to v8 palette, content swapped.
   Loads on top of home.css (nav & footer stay v8).
   ========================================================= */

/* ---- design tokens (OKX -> v8) ---- */
.AboutUs_AboutUs__vmupj {
    --ab-bg: var(--bg);                 /* page base            */
    --ab-content: var(--text);          /* primary text         */
    --ab-surface: var(--panel);         /* mission half surface */
    --ab-inverse-bg: #f3f3ef;           /* inverted band bg     */
    --ab-inverse-content: #0a0a0c;      /* inverted text        */
    --ab-muted: var(--muted);
}

/* ---- wrapper ---- */
.AboutUs_AboutUs__vmupj { background-color: var(--ab-bg); color: var(--ab-content); min-height: 900px; }
.AboutUs_AboutUs__vmupj * { box-sizing: border-box; }
.AboutUs_AboutUs__vmupj section { display: flex; flex-wrap: wrap; }
.AboutUs_AboutUs__vmupj section > div { flex: 0 0 auto; }

/* section side padding centers the inner column; mission is excluded (full-bleed) */
.AboutUs_AboutUs__vmupj section:not(.AboutUs_missionSection__LKkRD) { padding-left: 16px; padding-right: 16px; }
@media (min-width: 1024px) { .AboutUs_AboutUs__vmupj section:not(.AboutUs_missionSection__LKkRD) { padding-left: calc(50% - 480px); padding-right: calc(50% - 480px); } }
@media (min-width: 1270px) { .AboutUs_AboutUs__vmupj section:not(.AboutUs_missionSection__LKkRD) { padding-left: calc(50% - 624px); padding-right: calc(50% - 624px); } }

/* =========================================================
   region 1 · banner  (aria-label="OKX")
   ========================================================= */
.AboutUs_banner__z1CNv { width: 100%; padding: 120px 16px; text-align: center; }
@media (min-width: 768px) { .AboutUs_banner__z1CNv { width: 83.33333333%; margin-left: 8.33333333%; padding: 184px 12px; } }
@media (min-width: 1024px) { .AboutUs_banner__z1CNv { width: 66.66666667%; margin-left: 16.66666667%; } }
@media (min-width: 1270px) { .AboutUs_banner__z1CNv { padding-top: 224px; padding-bottom: 224px; } }

.AboutUs_logoImg__jVTeV { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 16px; margin: auto; }
.AboutUs_logoImg__jVTeV .ab-mark { width: 120px; height: 120px; border-radius: 22px; background: url('../assets/images/toplayer.svg') center/contain no-repeat; }
.AboutUs_logoImg__jVTeV .ab-word { font-family: 'Aboreto', var(--font); font-size: 85px; font-weight: 800; letter-spacing: .04em; color: var(--ab-content); }
.AboutUs_banner__z1CNv .AboutUs_logoImg__jVTeV + h1 { margin-top: 40px; }
.AboutUs_banner__z1CNv h1 { font-size: 19px; line-height: 1.67; font-weight: 400; color: var(--ab-muted); max-width: 760px; margin-left: auto; margin-right: auto; }

/* =========================================================
   region 2 · missionSection  (two inverting halves)
   ========================================================= */
.AboutUs_half__if43k {
    width: 100%;
    background: var(--ab-surface);
    padding: 32px 16px 88px;
    transition: background-color .3s ease, color .3s ease;
    will-change: background-color, color;
}
@media (min-width: 768px) {
    .AboutUs_half__if43k { width: 50%; padding-top: 32px; padding-bottom: 88px; }
    .AboutUs_half__if43k:nth-child(odd) { padding-left: 24px; padding-right: 48px; }
    .AboutUs_half__if43k:nth-child(2n) { padding-left: 48px; padding-right: 24px; }
}
@media (min-width: 1024px) {
    .AboutUs_half__if43k { padding-top: 96px; padding-bottom: 104px; }
    .AboutUs_half__if43k:nth-child(odd) { padding-left: calc(50% - 468px); }
    .AboutUs_half__if43k:nth-child(2n) { padding-right: calc(50% - 468px); }
}
@media (min-width: 1270px) {
    .AboutUs_half__if43k { padding-bottom: 168px; }
    .AboutUs_half__if43k:nth-child(odd) { padding-left: calc(50% - 612px); padding-right: 104px; }
    .AboutUs_half__if43k:nth-child(2n) { padding-left: 104px; padding-right: calc(50% - 612px); }
}
.AboutUs_half__if43k:hover { background: var(--ab-inverse-bg); color: var(--ab-inverse-content); }

.AboutUs_half__if43k h2 { position: relative; padding-top: 72px; font-size: 32px; font-weight: 700; line-height: 1.32; }
@media (min-width: 768px) { .AboutUs_half__if43k h2 { font-size: 44px; } }
/* two overlapping translucent colour blocks (OKX "叠影" deco) */
.AboutUs_half__if43k h2::before,
.AboutUs_half__if43k h2::after { content: ''; position: absolute; top: 0; width: 46px; height: 46px; border-radius: 14px; transition: background .3s ease, transform .3s ease; }
.AboutUs_half__if43k h2::before { left: 0; background: rgba(188, 255, 47, 0.9); }
.AboutUs_half__if43k h2::after { left: 22px; top: 12px; background: rgba(138, 220, 20, 0.55); }
.AboutUs_half__if43k:hover h2::before { background: rgba(10, 20, 0, 0.92); }
.AboutUs_half__if43k:hover h2::after { background: rgba(138, 220, 20, 0.85); }
.AboutUs_half__if43k h2 + p { margin-top: 32px; }
@media (min-width: 768px) { .AboutUs_half__if43k h2 + p { margin-top: 40px; } }
.AboutUs_half__if43k p { font-size: 16px; line-height: 1.8; color: var(--ab-muted); }
.AboutUs_half__if43k:hover p { color: var(--ab-inverse-content); }

/* =========================================================
   region 3 · cryptoSection  (inverted band: text + deco)
   ========================================================= */
.AboutUs_cryptoSection__N2\+Hi { align-items: center; background-color: var(--ab-inverse-bg); color: var(--ab-inverse-content); display: flex; }

.AboutUs_crypto__iKTmU { width: 100%; padding: 64px 16px; }
@media (min-width: 768px) { .AboutUs_crypto__iKTmU { width: 83.33333333%; margin-left: 8.33333333%; padding: 72px 12px; } }
@media (min-width: 1024px) { .AboutUs_crypto__iKTmU { width: 58.33333333%; margin-left: 0; } }
@media (min-width: 1270px) { .AboutUs_crypto__iKTmU { width: 50%; margin-left: 8.33333333%; } }
.AboutUs_crypto__iKTmU h2 { font-size: 32px; font-weight: 700; line-height: 1.32; text-align: left; }
@media (min-width: 768px) { .AboutUs_crypto__iKTmU h2 { font-size: 44px; } }
.AboutUs_crypto__iKTmU h2 + .AboutUs_text__BW8Vn { margin-top: 32px; }
@media (min-width: 768px) { .AboutUs_crypto__iKTmU h2 + .AboutUs_text__BW8Vn { margin-top: 48px; } }

.AboutUs_text__BW8Vn { font-size: 16px; line-height: 1.8; }
.AboutUs_text__BW8Vn + .AboutUs_text__BW8Vn,
.AboutUs_text__BW8Vn + p, p + .AboutUs_text__BW8Vn { margin-top: 28px; }
.AboutUs_crypto__iKTmU .ab-link { color: #3a6b00; text-decoration: underline; text-underline-offset: 2px; font-weight: 600; }
.AboutUs_crypto__iKTmU .ab-link:hover { color: #2a5000; }

.AboutUs_cryptoDeco__bIIGS { display: none; }
@media (min-width: 1024px) { .AboutUs_cryptoDeco__bIIGS { display: block; width: 41.66666667%; padding: 0 12px; } }
.AboutUs_cryptoDeco__bIIGS .ab-deco { margin: auto; max-width: 360px; aspect-ratio: 1 / 1; border-radius: 24px; background: radial-gradient(120% 100% at 30% 0%, rgba(188,255,47,.55), transparent 60%), #0a0a0c; display: grid; place-items: center; color: #BCFF2F; font-size: 84px; }

/* =========================================================
   region 4 · viewpoints  (heading + numbered list)
   ========================================================= */
.AboutUs_viewpoints__UVgI8 { width: 100%; padding: 72px 16px 96px; }
@media (min-width: 768px) { .AboutUs_viewpoints__UVgI8 { width: 83.33333333%; margin-left: 8.33333333%; padding-left: 12px; padding-right: 12px; } }
@media (min-width: 1270px) { .AboutUs_viewpoints__UVgI8 { width: 66.66666667%; margin-left: 16.66666667%; } }
.AboutUs_viewpoints__UVgI8 h2 { font-size: 20px; font-weight: 700; line-height: 1.4; }
@media (min-width: 768px) { .AboutUs_viewpoints__UVgI8 h2 { font-size: 26px; line-height: 1.6; } }
.AboutUs_viewpoints__UVgI8 h2 + ol { margin-top: 32px; }
@media (min-width: 768px) { .AboutUs_viewpoints__UVgI8 h2 + ol { margin-top: 56px; } }
.AboutUs_viewpoints__UVgI8 ol { list-style: none; padding-left: 0; }
.AboutUs_viewpoints__UVgI8 li { font-size: 16px; line-height: 1.8; color: var(--ab-muted); }
.AboutUs_viewpoints__UVgI8 li + li { margin-top: 28px; }

/* =========================================================
   expand / collapse  (clone of CollapseExpand behaviour)
   ========================================================= */
.AboutUs_expandLink__M-UdX { display: inline-flex; align-items: center; gap: 6px; margin-top: 28px; font-size: 16px; font-weight: 600; cursor: pointer; color: inherit; user-select: none; }
.AboutUs_expandLink__M-UdX i { font-size: 13px; transition: transform .2s ease; }
.AboutUs_expandLink__M-UdX.is-open i { transform: rotate(90deg); }
.AboutUs_collapseContent__dtmBE { padding-top: 28px; }
.ab-collapse { display: none; }
.ab-collapse.is-open { display: block; }