/* 数字营销页 — 与积分商城等内页统一色板与排版 */

.marketing-page {
    width: 100%;
    min-width: 1200px;
    background: #fff;
    color: #333;
    /* padding-bottom: 64px; */
}

/* —— Hero —— */
.marketing-hero {
    position: relative;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.marketing-hero-bg {
    position: absolute;
    inset: 0;
    background: url(../../assets/image/pc/marketing/marketing-banner.png) no-repeat center center;
    background-size: 100% 100%;
    /* background:
        radial-gradient(ellipse 55% 75% at 50% 48%, rgba(255, 185, 60, 0.42) 0%, rgba(255, 140, 40, 0.12) 35%, transparent 58%),
        linear-gradient(118deg, rgba(45, 28, 85, 0.55) 0%, transparent 42%),
        linear-gradient(-52deg, rgba(25, 15, 55, 0.65) 0%, transparent 45%),
        linear-gradient(168deg, #07040f 0%, #12081f 35%, #1a0d32 70%, #0c0618 100%); */
}

.marketing-hero-bg::before,
.marketing-hero-bg::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border-radius: 4px;
    opacity: 0.35;
}

.marketing-hero-bg::before {
    width: 38%;
    height: 55%;
    left: 6%;
    bottom: -8%;
    transform: rotate(-12deg) skewX(-6deg);
    background: linear-gradient(160deg, rgba(80, 50, 140, 0.5), rgba(20, 10, 40, 0.3));
    box-shadow: 0 0 60px rgba(255, 170, 50, 0.08);
}

.marketing-hero-bg::after {
    width: 32%;
    height: 48%;
    right: 4%;
    top: -6%;
    transform: rotate(14deg) skewX(8deg);
    background: linear-gradient(200deg, rgba(60, 35, 110, 0.45), rgba(15, 8, 35, 0.25));
}

.marketing-hero-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 72px 24px 64px;
}

.marketing-hero-title {
    margin: 0 0 20px;
    font-size: 48px;
    font-weight: 500;
    line-height: 1.35;
    color: #fff;
    letter-spacing: 0.5px;
}

.marketing-hero-sub {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    color: #fff;
}

.marketing-hero-btn {
    background: url(../../assets/image/pc/marketing/banner-btn.png) no-repeat center center;
    background-size: 100% 100%;
    width: 236px;
    height: 48px;
    margin: 30px auto 0;
    border: none;
    cursor: pointer;
}

/* —— 通用区块 —— */
.marketing-section {
    padding: 56px 0 48px;
}

.marketing-heading {
    margin: 0 auto 20px;
    font-size: 32px;
    font-weight: bold;
    line-height: 1.2;
    color: #000;
    letter-spacing: 0.5px;
}

.marketing-heading-center {
    text-align: center;
}

.marketing-intro {
    margin: 0 auto;
    max-width: 720px;
    font-size: 14px;
    line-height: 1.5;
    color: #666;
}

.marketing-intro-center {
    text-align: center;
}

.marketing-intro-second {
    margin-top: 10px;
}

/* —— 场景营销 · 三卡 —— */
.marketing-card-row {
    list-style: none;
    margin: 40px 0 0;
    padding: 0;
    display: flex;
    gap: 28px;
    justify-content: center;
    align-items: stretch;
}

.marketing-card-row-3 .marketing-feature-card {
    flex: 1;
    max-width: 360px;
}

/* 场景营销卡片（截图样式：6卡、图标100x100、标题20px#000加粗） */
.marketing-section.marketing-scenario .marketing-card-row-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    justify-content: center;
    align-items: stretch;
}

.marketing-section.marketing-scenario .marketing-card-row-3 .marketing-feature-card {
    flex: none;
    max-width: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
}

.marketing-section.marketing-scenario .marketing-card-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 24px;
}

.marketing-section.marketing-scenario .marketing-card-icon img {
    width: 100px;
    height: 100px;
    max-width: 100%;
    max-height: 100%;
}

.marketing-section.marketing-scenario .marketing-card-title {
    font-size: 20px;
    color: #000000;
    font-weight: 700;
    margin-bottom: 20px;
}

.marketing-section.marketing-scenario .marketing-card-body {
    margin-top: 0;
    font-size: 14px;
    color: #666666;
    line-height: 1.8;
}

.marketing-feature-card {
    background: #fff;
    border-radius: 12px;
    padding: 36px 28px 40px;
    text-align: center;
    box-shadow: 0 8px 32px rgba(42, 26, 94, 0.08);
    border: 1px solid rgba(42, 26, 94, 0.06);
}

.marketing-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.marketing-card-icon img {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
}

.marketing-card-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #2a1a5e;
}

.marketing-card-body {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.85;
    color: #999;
}

/* —— 支付营销 · 双卡 —— */
.marketing-card-row-2 {
    gap: 32px;
}

.marketing-card-row-2 .marketing-media-card {
    flex: 1;
    max-width: none;
}

.marketing-media-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(42, 26, 94, 0.08);
    border: 1px solid rgba(42, 26, 94, 0.06);
}

.marketing-media-thumb {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e8e6f0;
}

.marketing-media-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.marketing-media-body {
    padding: 28px 24px 32px;
    text-align: center;
}

/* —— 支付营销（截图布局）—— */
.marketing-section.marketing-pay {
    position: relative;
    color: #fff;
    background: #061524 url("../../assets/image/pc/marketing/pay-bg.png") center top / cover no-repeat;
    overflow: hidden;
}

/* .marketing-section.marketing-pay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/image/pc/marketing/pay-bg.png") no-repeat center center;
    background-size: 100% 100%;
    pointer-events: none;
} */

.marketing-section.marketing-pay .w1200 {
    position: relative;
    z-index: 1;
    padding-bottom: 56px;
}

.marketing-pay-title {
    margin: 72px 0 22px;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.marketing-pay-sub {
    margin: 0 auto;
    max-width: 980px;
    font-size: 18px;
    color: #fff;
    line-height: 1.8;
    text-align: center;
}

.marketing-pay-grid {
    padding-left: 150px;
    margin: 85px auto 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 84px;
    row-gap: 46px;
    align-items: start;
    justify-content: center;
}

.marketing-pay-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}

.marketing-pay-item h3 {
    margin: 0 0 12px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

.marketing-pay-item p {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
    line-height: 1.85;
}

.marketing-pay-item {
    max-width: 360px;
}

.marketing-pay-item-full {
    grid-column: 1 / -1;
    max-width: none;
}

@media (max-width: 1200px) {
    .marketing-section.marketing-pay .w1200 {
        padding-left: 16px;
        padding-right: 16px;
    }

    .marketing-pay-grid {
        column-gap: 40px;
    }
}

/* —— 精准营销 —— */
.marketing-section.marketing-precision {
    background: #eaf3ff url("../../assets/image/pc/marketing/precise-bg.png") center / cover no-repeat;
    padding: 72px 0 84px;
}

.marketing-precision-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.marketing-precision-text {
    flex: 0 1 480px;
    min-width: 0;
}

.marketing-precision-text .marketing-heading {
    text-align: center;
}

.marketing-lead {
    margin: 22px 0 0;
    font-size: 18px;
    line-height: 1.5;
    color: #666;
    text-align: center;
}

.marketing-features {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    width: 100%;
    max-width: 1020px;
}

.marketing-features li {
    display: flex;
    gap: 18px;
    margin-top: 48px;
}

.marketing-features li:first-child {
    margin-top: 0;
}

.marketing-check {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marketing-check img {
    width: 40px;
    height: 40px;
    display: block;
    object-fit: contain;
}

.marketing-feature-title {
    margin: 0;
    font-size: 28px;
    font-weight: 700;
    color: #333333;
}

.marketing-feature-desc {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.8;
    color: #696969;
}

.marketing-precision-visual {
    flex: 1;
    min-width: 0;
    max-width: 640px;
    overflow: hidden;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.marketing-laptop {
    width: 118%;
    max-width: none;
    margin-right: -12%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 24px 56px rgba(42, 26, 94, 0.14);
    border: 1px solid rgba(42, 26, 94, 0.08);
    background: #1a1a1a;
}

.marketing-laptop img {
    display: block;
    width: 100%;
    height: auto;
}