/* ==========================================================================
   MK 双联画站点样式
   左右分区陈列：左半深色承载体育内容线，右半米色承载电竞内容线，
   两区之间始终保留 1px 中线，全站硬边分割、无圆角、无阴影、无渐变。
   ========================================================================== */

:root {
    --ink: #111111;
    --cream: #f7f5f1;
    --magenta: #d6336c;
    --blue: #2f6df6;
    --line-solid: #cfcabf;
    --line-on-dark: rgba(247, 245, 241, 0.22);
    --line-on-light: rgba(17, 17, 17, 0.16);
    --pad-x: 40px;
    --pad-y: 72px;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

html body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: "Optima", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 15px;
    line-height: 1.95;
    overflow-x: hidden;
}

body h1,
body h2,
body h3 {
    margin: 0;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: 0.01em;
}

body p,
figcaption {
    margin: 0;
}

body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body figure {
    margin: 0;
}

body a {
    color: inherit;
    text-decoration: none;
}

body img {
    display: block;
    max-width: 100%;
    border: 0;
    object-fit: cover;
}

/* ---------- 通用文字链：无边框下划线 ---------- */

.txt-link {
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px solid currentColor;
    font-size: 14px;
    letter-spacing: 0.06em;
}

.txt-link:hover {
    border-bottom-width: 2px;
}

.txt-link:focus-visible {
    outline: 1px solid var(--magenta);
    outline-offset: 3px;
}

.on-dark .txt-link:hover {
    color: var(--magenta);
}

.on-light .txt-link:hover {
    color: var(--blue);
}

.zone-nav a[aria-current="page"],
.site-menu a[aria-current="page"],
.foot-group a[aria-current="page"] {
    border-bottom-color: currentColor;
}

/* ---------- 页头：左右分区导航 ---------- */

.split-head {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--ink);
    border-bottom: 1px solid var(--ink);
}

.head-half {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    min-height: 96px;
    padding: 20px var(--pad-x) 34px;
}

.head-half-dark {
    order: 2;
    background: var(--ink);
    color: var(--cream);
}

.head-half-light {
    order: 3;
    background: var(--cream);
    color: var(--ink);
}

.zone-mark {
    font-size: 13px;
    letter-spacing: 0.14em;
}

.head-half-dark .zone-mark {
    color: var(--magenta);
}

.head-half-light .zone-mark {
    color: var(--blue);
}

.zone-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 22px;
}

.zone-nav a {
    font-size: 14px;
    border-bottom: 1px solid transparent;
}

.zone-nav a:hover {
    border-bottom-color: currentColor;
}

.brand {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px var(--pad-x);
    background: var(--cream);
    border-bottom: 1px solid var(--ink);
}

.brand-word {
    font-size: 16px;
    letter-spacing: 0.05em;
}

.brand-sub {
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--magenta);
}

.nav-toggle {
    order: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px var(--pad-x);
    border: 0;
    background: var(--ink);
    color: var(--cream);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 0.16em;
    cursor: pointer;
}

.site-menu {
    order: 5;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    background: var(--cream);
}

.site-menu[hidden] {
    display: none;
}

.site-menu a {
    padding: 12px var(--pad-x);
    border-bottom: 1px solid var(--line-solid);
    font-size: 14px;
}

.site-menu a:nth-child(odd) {
    border-right: 1px solid var(--line-solid);
}

.head-note {
    order: 6;
    padding: 6px var(--pad-x);
    background: var(--ink);
    color: var(--cream);
    font-size: 12px;
    letter-spacing: 0.16em;
    text-align: center;
}

/* ---------- 首屏：双画幅 ---------- */

.dual-canvas {
    display: grid;
    gap: 1px;
    background: var(--ink);
    border-bottom: 1px solid var(--ink);
}

.canvas-brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 52px var(--pad-x) 40px;
    background: var(--cream);
}

.canvas-brand h1 {
    max-width: 26em;
    font-size: 30px;
}

.canvas-lead {
    max-width: 34em;
    color: #3d3a34;
}

.canvas-pair {
    display: grid;
    gap: 1px;
    background: var(--ink);
}

.canvas {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 40px var(--pad-x);
}

.canvas-dark {
    background: var(--ink);
    color: var(--cream);
}

.canvas-light {
    background: var(--cream);
    color: var(--ink);
}

.canvas h2 {
    font-size: 24px;
}

.canvas p {
    max-width: 30em;
}

.canvas-dark p {
    color: rgba(247, 245, 241, 0.78);
}

.canvas-light p {
    color: #3d3a34;
}

.canvas-figure {
    overflow: hidden;
}

.canvas-figure img {
    width: 100%;
    max-height: 360px;
    aspect-ratio: 5 / 4;
    object-position: center 28%;
    filter: saturate(0.92) brightness(0.86);
}

.canvas-light .canvas-figure img {
    aspect-ratio: 4 / 5;
    object-position: center 68%;
    filter: none;
}

/* ---------- 双专区 ---------- */

.dual-zone {
    padding: var(--pad-y) var(--pad-x);
    background: var(--cream);
}

.zone-caption {
    max-width: 26em;
    font-size: 20px;
}

.zone-caption-text {
    max-width: 40em;
    margin-top: 14px;
    color: #3d3a34;
}

.zone-pair {
    display: grid;
    gap: 1px;
    margin-top: 32px;
    background: var(--ink);
    border: 1px solid var(--ink);
}

.zone {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 36px 32px 40px;
}

.zone-sport {
    background: var(--ink);
    color: var(--cream);
}

.zone-esport {
    background: var(--cream);
    color: var(--ink);
}

.zone h2 {
    font-size: 23px;
}

.zone-sport h2::after,
.zone-esport h2::after {
    content: "";
    display: block;
    width: 56px;
    margin-top: 12px;
    border-bottom: 2px solid var(--magenta);
}

.zone-esport h2::after {
    border-bottom-color: var(--blue);
}

.zone-intro {
    max-width: 32em;
    font-size: 14px;
    color: rgba(247, 245, 241, 0.74);
}

.zone-esport .zone-intro {
    color: #3d3a34;
}

.zone-figure {
    overflow: hidden;
    border: 1px solid var(--line-on-dark);
}

.zone-esport .zone-figure {
    border-color: var(--line-on-light);
}

.zone-figure img {
    width: 100%;
    max-height: 300px;
    aspect-ratio: 4 / 3;
    object-position: center 40%;
}

.zone-sport .zone-figure img {
    filter: brightness(0.82) saturate(0.9);
}

.zone-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 33em;
}

.zone-list li {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-on-dark);
}

.zone-esport .zone-list li {
    border-bottom-color: var(--line-on-light);
}

.zone-list strong {
    display: block;
    font-size: 14px;
    letter-spacing: 0.08em;
}

.zone-sport .zone-list strong {
    color: var(--magenta);
}

.zone-esport .zone-list strong {
    color: var(--blue);
}

.zone-list span {
    display: block;
    font-size: 14px;
    color: rgba(247, 245, 241, 0.76);
}

.zone-esport .zone-list span {
    color: #3d3a34;
}

/* ---------- 精选内容：2×2 等宽图卡 ---------- */

.picked-content {
    padding: var(--pad-y) var(--pad-x);
    background: var(--cream);
    border-top: 1px solid var(--ink);
}

.pick-caption {
    max-width: 26em;
    font-size: 20px;
}

.pick-caption-text {
    max-width: 42em;
    margin: 12px 0 30px;
    color: #3d3a34;
}

.pick-grid-4 {
    display: grid;
    gap: 1px;
    background: var(--line-solid);
    border: 1px solid var(--line-solid);
}

.pick-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 32px 28px 36px;
    background: var(--cream);
}

.pick-col h2 {
    font-size: 21px;
}

.pick-note {
    max-width: 32em;
    font-size: 14px;
    color: #3d3a34;
}

.pick-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line-on-light);
}

.pick-card:last-child {
    border-bottom: 0;
}

.pick-card figure {
    overflow: hidden;
}

.pick-card img {
    width: 100%;
    max-height: 260px;
    aspect-ratio: 16 / 9;
    object-position: center 45%;
}

.pick-card-wide img {
    aspect-ratio: 21 / 9;
    object-position: center 55%;
}

.pick-card-square img {
    aspect-ratio: 1 / 1;
    max-height: 240px;
    object-position: center 35%;
}

.pick-card h3 {
    font-size: 16px;
}

.pick-card p {
    max-width: 30em;
    font-size: 14px;
    color: #3d3a34;
}

/* ---------- 客户端 ---------- */

.app {
    padding: var(--pad-y) var(--pad-x);
    background: var(--cream);
    border-top: 1px solid var(--ink);
}

.app-pair {
    display: grid;
    gap: 1px;
    background: var(--line-solid);
    border: 1px solid var(--line-solid);
}

.app-copy {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 38px 32px;
    background: var(--cream);
}

.app-copy h2 {
    font-size: 23px;
}

.app-copy p {
    max-width: 32em;
    color: #3d3a34;
}

.app-copy .txt-link {
    align-self: flex-start;
    color: var(--blue);
}

.app-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 38px 32px;
    background: #efece6;
}

.device-frame {
    width: 100%;
    max-width: 258px;
    padding: 14px;
    border: 1px solid var(--ink);
    border-radius: 26px;
    background: var(--ink);
}

.device-frame img {
    width: 100%;
    max-height: 430px;
    aspect-ratio: 9 / 17;
    border-radius: 16px;
    object-position: center 60%;
}

.app-device h3 {
    font-size: 16px;
}

.app-device p {
    max-width: 28em;
    font-size: 14px;
    text-align: center;
    color: #3d3a34;
}

.app-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}

/* ---------- 会员权益 ---------- */

.member {
    padding: var(--pad-y) var(--pad-x);
    background: var(--ink);
    color: var(--cream);
}

.member-caption {
    max-width: 26em;
    font-size: 20px;
    color: var(--magenta);
}

.member-caption-text {
    max-width: 42em;
    margin: 14px 0 30px;
    color: rgba(247, 245, 241, 0.76);
}

.member-pair {
    display: grid;
    gap: 1px;
    background: var(--line-on-dark);
}

.member-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 34px 30px;
}

.member-col h2 {
    font-size: 22px;
}

.member-col-dark h2 {
    color: var(--magenta);
}

.member-col-light {
    background: var(--cream);
    color: var(--ink);
}

.member-col-light h2 {
    color: var(--blue);
}

.member-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 32em;
}

.member-list li {
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line-on-dark);
    font-size: 14px;
}

.member-col-light .member-list li {
    border-bottom-color: var(--line-on-light);
}

.member-list strong {
    display: block;
    letter-spacing: 0.08em;
}

.member-list span {
    display: block;
    color: rgba(247, 245, 241, 0.76);
}

.member-col-light .member-list span {
    color: #3d3a34;
}

.member-note {
    max-width: 32em;
    font-size: 13px;
    color: rgba(247, 245, 241, 0.66);
}

.member-col-light .member-note {
    color: #5a554c;
}

/* ---------- 服务入口 ---------- */

.service {
    padding: var(--pad-y) var(--pad-x);
    background: var(--cream);
}

.svc-pair {
    display: grid;
    gap: 1px;
    background: var(--line-solid);
    border: 1px solid var(--line-solid);
}

.svc-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 40px 32px;
}

.svc-dark {
    background: var(--ink);
    color: var(--cream);
}

.svc-light {
    background: var(--cream);
    color: var(--ink);
}

.svc-block h2 {
    font-size: 22px;
}

.svc-block p {
    max-width: 32em;
    font-size: 14px;
}

.svc-dark p {
    color: rgba(247, 245, 241, 0.76);
}

.svc-light p {
    color: #3d3a34;
}

.svc-dark .txt-link {
    align-self: flex-start;
    color: var(--magenta);
}

.svc-light .txt-link {
    align-self: flex-start;
    color: var(--blue);
}

/* ---------- 页脚：双色分栏 ---------- */

.split-foot {
    display: grid;
    gap: 1px;
    background: var(--ink);
    border-top: 1px solid var(--ink);
}

.foot-half {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 44px var(--pad-x) 48px;
}

.foot-half-dark {
    background: var(--ink);
    color: var(--cream);
}

.foot-half-light {
    background: var(--cream);
    color: var(--ink);
}

.foot-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.foot-group h3 {
    font-size: 13px;
    letter-spacing: 0.18em;
}

.foot-half-dark .foot-group h3 {
    color: var(--magenta);
}

.foot-half-light .foot-group h3 {
    color: var(--blue);
}

.foot-group a {
    align-self: flex-start;
    font-size: 14px;
    color: rgba(247, 245, 241, 0.82);
    border-bottom: 1px solid transparent;
}

.foot-half-light .foot-group a {
    color: #3d3a34;
}

.foot-group a:hover {
    border-bottom-color: currentColor;
}

.foot-note {
    max-width: 34em;
    font-size: 13px;
    color: rgba(247, 245, 241, 0.62);
}

.foot-half-light .foot-note {
    color: #5a554c;
}

/* ==========================================================================
   内页
   ========================================================================== */

.page-head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 56px var(--pad-x) 40px;
    background: var(--cream);
    border-bottom: 1px solid var(--ink);
}

.page-head h1 {
    max-width: 24em;
    font-size: 34px;
}

.page-head p {
    max-width: 34em;
    color: #3d3a34;
}

.page-tail {
    padding: 40px var(--pad-x);
    background: var(--cream);
    border-top: 1px solid var(--ink);
}

/* ---------- about：双栏页头 + 两列文字 ---------- */

.ab-split {
    display: grid;
    gap: 1px;
    background: var(--ink);
}

.ab-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 40px var(--pad-x);
}

.ab-side-dark {
    background: var(--ink);
    color: var(--cream);
}

.ab-side-light {
    background: var(--cream);
    color: var(--ink);
}

.ab-side h2 {
    font-size: 21px;
}

.ab-side-dark h2 {
    color: var(--magenta);
}

.ab-side-light h2 {
    color: var(--blue);
}

.ab-side p {
    max-width: 30em;
    font-size: 14px;
}

.ab-side-dark p {
    color: rgba(247, 245, 241, 0.78);
}

.ab-side-light p {
    color: #3d3a34;
}

.ab-mark {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 46px var(--pad-x);
    background: var(--cream);
    text-align: center;
}

.ab-mark h1 {
    max-width: 22em;
    font-size: 30px;
}

.ab-mark-brand {
    font-size: 13px;
    letter-spacing: 0.16em;
    color: var(--blue);
}

.ab-mark-text {
    max-width: 30em;
    font-size: 14px;
    color: #3d3a34;
}

.ab-two-col-text {
    display: grid;
    gap: 1px;
    background: var(--line-solid);
    border-top: 1px solid var(--ink);
}

.ab-text-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 48px var(--pad-x);
    background: var(--cream);
}

.ab-text-col h2 {
    font-size: 22px;
}

.ab-text-col p {
    max-width: 32em;
    color: #3d3a34;
}

.ab-figure {
    overflow: hidden;
    border: 1px solid var(--line-on-light);
}

.ab-figure img {
    width: 100%;
    max-height: 320px;
    aspect-ratio: 4 / 5;
    object-position: center 32%;
}

.ab-text-col-light .ab-figure img {
    aspect-ratio: 3 / 4;
    object-position: center 62%;
}

.ab-close {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px var(--pad-x) 64px;
    background: var(--ink);
    color: var(--cream);
    text-align: center;
}

.ab-close h2 {
    font-size: 22px;
    color: var(--magenta);
}

.ab-close p {
    max-width: 32em;
    color: rgba(247, 245, 241, 0.78);
}

/* ---------- product：左右条目对照 ---------- */

.pd-split {
    display: grid;
    gap: 1px;
    background: var(--ink);
}

.pd-intro {
    display: grid;
    gap: 1px;
    background: var(--ink);
}

.pd-intro-main {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 52px var(--pad-x) 44px;
    background: var(--cream);
}

.pd-intro-main h1 {
    max-width: 24em;
    font-size: 34px;
}

.pd-intro-text {
    max-width: 34em;
    color: #3d3a34;
}

.pd-intro-side {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 52px var(--pad-x) 44px;
    background: #efece6;
}

.pd-intro-side h2 {
    font-size: 20px;
}

.pd-intro-side p {
    max-width: 32em;
    font-size: 14px;
    color: #3d3a34;
}

.pd-cols {
    display: grid;
    gap: 1px;
    background: var(--ink);
}

.pd-col {
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 40px 32px 44px;
}

.pd-col-dark {
    background: var(--ink);
    color: var(--cream);
}

.pd-col-light {
    background: var(--cream);
    color: var(--ink);
}

.pd-col h2 {
    font-size: 22px;
}

.pd-col-dark h2 {
    color: var(--magenta);
}

.pd-col-light h2 {
    color: var(--blue);
}

.pd-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line-on-dark);
}

.pd-col-light .pd-item {
    border-bottom-color: var(--line-on-light);
}

.pd-item h3 {
    font-size: 16px;
}

.pd-item p {
    max-width: 30em;
    font-size: 14px;
}

.pd-col-dark .pd-item p {
    color: rgba(247, 245, 241, 0.76);
}

.pd-col-light .pd-item p {
    color: #3d3a34;
}

.pd-item .txt-link {
    align-self: flex-start;
}

.pd-col-dark .pd-item .txt-link {
    color: var(--magenta);
}

.pd-col-light .pd-item .txt-link {
    color: var(--blue);
}

.pd-note {
    max-width: 32em;
    font-size: 13px;
}

.pd-col-dark .pd-note {
    color: rgba(247, 245, 241, 0.68);
}

.pd-col-light .pd-note {
    color: #5a554c;
}

.pd-figure {
    overflow: hidden;
    border: 1px solid var(--line-on-dark);
}

.pd-col-light .pd-figure {
    border-color: var(--line-on-light);
}

.pd-figure img {
    width: 100%;
    max-height: 240px;
    aspect-ratio: 16 / 9;
    object-position: center 38%;
}

.pd-col-light .pd-figure img {
    object-position: center 30%;
}

.pd-tail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 40px var(--pad-x) 52px;
    background: var(--cream);
}

.pd-tail h2 {
    font-size: 20px;
}

.pd-tail p {
    max-width: 34em;
    color: #3d3a34;
}

.pd-tail .txt-link {
    align-self: flex-start;
    color: var(--blue);
}

/* ---------- news：两栏条目 + 贯穿分隔线 ---------- */

.nw-lead {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 52px var(--pad-x) 42px;
    background: var(--cream);
    border-bottom: 1px solid var(--ink);
}

.nw-lead h1 {
    max-width: 24em;
    font-size: 34px;
}

.nw-lead p {
    max-width: 40em;
    color: #3d3a34;
}

.nw-split {
    display: grid;
    gap: 1px;
    background: var(--line-solid);
}

.nw-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 44px var(--pad-x);
    background: var(--cream);
}

.nw-col h2 {
    font-size: 22px;
}

.nw-col-left h2 {
    color: var(--magenta);
}

.nw-col-right h2 {
    color: var(--blue);
}

.nw-note {
    max-width: 32em;
    font-size: 14px;
    color: #3d3a34;
}

.nw-figure {
    overflow: hidden;
    border-bottom: 1px solid var(--line-on-light);
}

.nw-figure img {
    width: 100%;
    max-height: 160px;
    aspect-ratio: 16 / 5;
    object-position: center 40%;
}

.nw-col-right .nw-figure img {
    aspect-ratio: 12 / 5;
    object-position: center 66%;
}

.nw-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-on-light);
}

.nw-item:last-child {
    border-bottom: 0;
}

.nw-date {
    font-size: 12px;
    letter-spacing: 0.14em;
    color: #6f695f;
}

.nw-item h3 {
    font-size: 16px;
}

.nw-item p {
    max-width: 30em;
    font-size: 14px;
    color: #3d3a34;
}

.nw-tail {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 44px var(--pad-x) 56px;
    background: var(--cream);
    border-top: 1px solid var(--ink);
}

.nw-tail h2 {
    font-size: 20px;
}

.nw-tail p {
    max-width: 34em;
    color: #3d3a34;
}

.nw-tail .txt-link {
    align-self: flex-start;
    color: var(--blue);
}

/* ---------- contact：说明 / 表单 / 问答 ---------- */

.ct-top {
    display: grid;
    gap: 1px;
    background: var(--ink);
}

.ct-top-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 46px var(--pad-x);
}

.ct-top-left {
    background: var(--ink);
    color: var(--cream);
}

.ct-top-right {
    background: var(--cream);
    color: var(--ink);
}

.ct-top-col h2 {
    font-size: 22px;
}

.ct-top-left h2 {
    color: var(--magenta);
}

.ct-top-right h2 {
    color: var(--blue);
}

.ct-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 32em;
}

.ct-list li {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-on-dark);
    font-size: 14px;
}

.ct-top-right .ct-list li {
    border-bottom-color: var(--line-on-light);
}

.ct-list strong {
    display: block;
    letter-spacing: 0.08em;
}

.ct-list span {
    display: block;
    color: rgba(247, 245, 241, 0.76);
}

.ct-top-right .ct-list span {
    color: #3d3a34;
}

.ct-note {
    max-width: 32em;
    font-size: 13px;
    color: rgba(247, 245, 241, 0.7);
}

.ct-top-right .ct-note {
    color: #5a554c;
}

.ct-lead {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 52px var(--pad-x) 32px;
    background: var(--cream);
}

.ct-lead h1 {
    max-width: 24em;
    font-size: 34px;
}

.ct-lead p {
    max-width: 34em;
    color: #3d3a34;
}

.ct-banner {
    padding: 0 var(--pad-x) 40px;
    background: var(--cream);
}

.ct-banner img {
    width: 100%;
    max-height: 260px;
    aspect-ratio: 21 / 9;
    object-position: center 42%;
}

.ct-form-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 46px var(--pad-x) 50px;
    background: #efece6;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
}

.ct-form-block h2 {
    font-size: 22px;
}

.ct-form-block > p {
    max-width: 34em;
    font-size: 14px;
    color: #3d3a34;
}

.ct-form-pair {
    display: grid;
    gap: 1px;
    margin-top: 10px;
    background: var(--line-solid);
}

.ct-form-figure {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
    background: var(--cream);
}

.ct-form-figure img {
    width: 100%;
    max-width: 320px;
    max-height: 320px;
    aspect-ratio: 1 / 1;
    object-position: center 32%;
}

.ct-form {
    display: grid;
    gap: 16px;
    padding: 2px 0;
    max-width: 640px;
}

.ct-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.ct-field label {
    font-size: 13px;
    letter-spacing: 0.1em;
}

.ct-field input,
.ct-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.8;
}

.ct-field textarea {
    min-height: 120px;
    resize: vertical;
}

.ct-submit {
    justify-self: start;
    padding: 10px 26px;
    border: 1px solid var(--ink);
    border-radius: 0;
    background: var(--ink);
    color: var(--cream);
    font-family: inherit;
    font-size: 14px;
    letter-spacing: 0.14em;
    cursor: pointer;
}

.ct-submit:hover {
    background: var(--magenta);
    border-color: var(--magenta);
}

.ct-form-hint {
    max-width: 34em;
    font-size: 13px;
    color: #5a554c;
}

.ct-faq {
    display: grid;
    gap: 1px;
    background: var(--line-solid);
}

.ct-faq-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 46px var(--pad-x);
    background: var(--cream);
}

.ct-faq-col h2 {
    font-size: 22px;
}

.ct-faq-col:first-child h2 {
    color: var(--magenta);
}

.ct-faq-col:last-child h2 {
    color: var(--blue);
}

.faq-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-on-light);
}

.faq-item:last-child {
    border-bottom: 0;
}

.faq-item h3 {
    font-size: 15px;
}

.faq-item p {
    max-width: 32em;
    font-size: 14px;
    color: #3d3a34;
}

/* ---------- game：专区双画幅页 ---------- */

.gm-dual-hero {
    display: grid;
    gap: 1px;
    background: var(--ink);
}

.gm-hero-cols {
    display: grid;
    gap: 1px;
    background: var(--ink);
}

.gm-hero-title {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 52px var(--pad-x) 40px;
    background: var(--cream);
}

.gm-hero-title h1 {
    max-width: 24em;
    font-size: 34px;
}

.gm-hero-title p {
    max-width: 34em;
    color: #3d3a34;
}

.gm-hero-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 40px var(--pad-x) 44px;
}

.gm-hero-dark {
    background: var(--ink);
    color: var(--cream);
}

.gm-hero-light {
    background: var(--cream);
    color: var(--ink);
}

.gm-hero-col h2 {
    font-size: 23px;
}

.gm-hero-dark h2 {
    color: var(--magenta);
}

.gm-hero-light h2 {
    color: var(--blue);
}

.gm-hero-col p {
    max-width: 30em;
    font-size: 14px;
}

.gm-hero-dark p {
    color: rgba(247, 245, 241, 0.78);
}

.gm-hero-light p {
    color: #3d3a34;
}

.gm-hero-figure {
    overflow: hidden;
}

.gm-hero-figure img {
    width: 100%;
    max-height: 340px;
    aspect-ratio: 7 / 5;
    object-position: center 30%;
}

.gm-hero-dark .gm-hero-figure img {
    filter: brightness(0.84);
}

.gm-hero-light .gm-hero-figure img {
    aspect-ratio: 5 / 4;
    object-position: center 64%;
}

.gm-dual-grid {
    display: grid;
    gap: 1px;
    background: var(--ink);
}

.gm-grid-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 44px 32px;
}

.gm-grid-dark {
    background: var(--ink);
    color: var(--cream);
}

.gm-grid-light {
    background: var(--cream);
    color: var(--ink);
}

.gm-grid-col h2 {
    font-size: 22px;
}

.gm-grid-dark h2 {
    color: var(--magenta);
}

.gm-grid-light h2 {
    color: var(--blue);
}

.gm-grid-figure {
    overflow: hidden;
    border: 1px solid var(--line-on-dark);
}

.gm-grid-light .gm-grid-figure {
    border-color: var(--line-on-light);
}

.gm-grid-figure img {
    width: 100%;
    max-height: 200px;
    aspect-ratio: 16 / 7;
    object-position: center 44%;
}

.gm-grid-light .gm-grid-figure img {
    object-position: center 58%;
}

.gm-entry {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--line-on-dark);
}

.gm-grid-light .gm-entry {
    border-bottom-color: var(--line-on-light);
}

.gm-entry:last-child {
    border-bottom: 0;
}

.gm-entry h3 {
    font-size: 16px;
}

.gm-grid-dark .gm-entry h3 {
    color: var(--cream);
}

.gm-entry p {
    max-width: 30em;
    font-size: 14px;
}

.gm-grid-dark .gm-entry p {
    color: rgba(247, 245, 241, 0.76);
}

.gm-grid-light .gm-entry p {
    color: #3d3a34;
}

.gm-dual-notes {
    display: grid;
    gap: 1px;
    background: var(--line-solid);
    border-top: 1px solid var(--ink);
}

.gm-note {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 48px var(--pad-x);
    background: var(--cream);
}

.gm-note h2 {
    font-size: 21px;
}

.gm-note-left h2 {
    color: var(--magenta);
}

.gm-note-right h2 {
    color: var(--blue);
}

.gm-note p {
    max-width: 32em;
    color: #3d3a34;
}

.gm-dual-cta {
    display: grid;
    gap: 1px;
    background: var(--ink);
}

.gm-cta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 46px var(--pad-x) 52px;
}

.gm-cta-dark {
    background: var(--ink);
    color: var(--cream);
}

.gm-cta-light {
    background: var(--cream);
    color: var(--ink);
}

.gm-cta h2 {
    font-size: 21px;
}

.gm-cta-dark h2 {
    color: var(--magenta);
}

.gm-cta-light h2 {
    color: var(--blue);
}

.gm-cta p {
    max-width: 32em;
    font-size: 14px;
}

.gm-cta-dark p {
    color: rgba(247, 245, 241, 0.78);
}

.gm-cta-light p {
    color: #3d3a34;
}

.gm-cta .txt-link {
    align-self: flex-start;
}

/* ---------- 页头滚动状态 ---------- */

.split-head.is-scrolled {
    border-bottom-color: var(--magenta);
}

/* ---------- 平板与桌面 ---------- */

@media (min-width: 768px) {
    .nav-toggle,
    .site-menu {
        display: none;
    }

    .split-head {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .head-half {
        order: 0;
        padding: 22px 32px 36px;
    }

    .head-half-dark {
        grid-column: 1;
        grid-row: 1;
    }

    .head-half-light {
        grid-column: 2;
        grid-row: 1;
    }

    .brand {
        position: absolute;
        top: 44%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-bottom: 0;
        border-left: 1px solid var(--ink);
        border-right: 1px solid var(--ink);
    }

    .head-note {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .canvas-pair,
    .zone-pair,
    .pick-grid-4,
    .app-pair,
    .member-pair,
    .svc-pair,
    .ab-two-col-text,
    .pd-intro,
    .pd-cols,
    .nw-split,
    .ct-top,
    .ct-form-pair,
    .ct-faq,
    .gm-hero-cols,
    .gm-dual-grid,
    .gm-dual-notes,
    .gm-dual-cta,
    .split-foot {
        grid-template-columns: 1fr 1fr;
    }

    .ab-split {
        grid-template-columns: 1fr 1.25fr 1fr;
    }

    .canvas-pair,
    .zone-pair,
    .pick-grid-4,
    .app-pair,
    .member-pair,
    .svc-pair,
    .pd-cols,
    .ct-top,
    .ct-faq {
        align-items: stretch;
    }

    .canvas-brand h1,
    .page-head h1,
    .pd-intro h1,
    .nw-lead h1,
    .ct-lead h1,
    .gm-hero-title h1 {
        font-size: 46px;
    }

    .canvas h2 {
        font-size: 26px;
    }
}

@media (min-width: 1100px) {
    :root {
        --pad-x: 72px;
    }

    .pick-col,
    .zone,
    .pd-col,
    .gm-grid-col {
        padding-left: 48px;
        padding-right: 48px;
    }
}

@media (max-width: 767px) {
    .canvas-figure img {
        aspect-ratio: 16 / 9;
        max-height: 260px;
    }

    .canvas-light .canvas-figure img {
        aspect-ratio: 16 / 9;
    }

    .ct-banner img {
        aspect-ratio: 16 / 9;
    }

    .device-frame {
        max-width: 220px;
    }
}