@import "variables-pc.css";
@import "nav-bg-black.css";
@import "invite-content.css";
@import "scrollbar-brown.css";

.content-wrapper {
    background-color: #180D05;
    position: relative;
}

.bg {
    position: relative;
    z-index: 10;
}

.light-spot {
    width: 75%;
    height: 36vh;
    top: -1.5rem;
    left: 10%;
    position: absolute;
    background-image: radial-gradient(circle at 50% -67%, #FF6600 0%, rgba(135, 78, 42, 0.00) 62%);
    z-index: 5;
}

.navigator {
    position: relative;
    z-index: 10;
}

.navigator, .navigator .title, .menu-item {
    color: var(--color-text-inverse);
}

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

.lang-btn.active:hover {
    background-color: var(--color-bg-primary);
}

a.menu-item.price-link {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}

.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 75%;
    margin: auto;
    position: relative;
}

/* ---------- 页面模块容器（仅作结构分组） ----------
   display: contents 让 wrapper 不生成盒子：其子元素仍直接参与父级布局，
   所以模块化分组不改变任何现有样式，只提升模板可读性与可定位性。 */
.recharge-module {
    display: contents;
}

/* 多人团队区块标题的顶部间距（原为模板内联 style，集中到这里） */
.recharge-module--team-yearly .section-header {
    margin-top: 2rem;
}

.promo-hero {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
    width: 66.19rem;
    margin-top: 5rem;
}

.promo-hero h1 {
    font-size: 3.75rem;
    color: #FFFFFF;
    font-weight: var(--font-weight-bold);
    text-align: left;
    margin: 0;
}

.promo-hero h1 span {
    font-size: 3.75rem;
    white-space: nowrap;
    background-image: linear-gradient(180deg, #FFF1B9 0%, #E67F1C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    /* 旧浏览器回退：不认 background-clip:text 时显示纯色，避免文字隐形 */
    color: #E67F1C;
    -webkit-text-fill-color: transparent;
    font-weight: var(--font-weight-bold);
    margin-left: var(--spacing-7);
}

.promo-hero h2 {
    font-size: 2.625rem;
    color: #FFFFFF;
    text-align: left;
    font-weight: var(--font-weight-medium);
}

.highlight-primary {
    background: #562D0F;
    border-bottom-left-radius: 3.25rem;
    border-top-left-radius: 3.25rem;
    padding: var(--spacing-3_5) var(--spacing-20) var(--spacing-3_5) var(--spacing-10);
}

.highlight-secondary {
    background-image: linear-gradient(133deg, #F8A73B 0%, #F77B31 23%, #E84411 100%);
    border-radius: 3.25rem;
    padding: var(--spacing-3_5) var(--spacing-16);
    margin-left: -4rem;
}

.promo-hero small {
    font-size: 1.5rem;
    color: #FFFFFF;
    font-weight: var(--font-weight-normal);
    text-align: left;
    display: flex;
    align-items: center;
}

.star-logo {
    --star-color: #FF4700;
    --star-size: 1.5rem;

    width: var(--star-size);
    height: var(--star-size);
    background: #FF4700;
    background: var(--star-color);
    /* 旧浏览器回退：Safari 13 以下需要 -webkit- 前缀 */
    -webkit-clip-path: polygon(
            50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%
    );
    clip-path: polygon(
            50% 0%,
            61% 35%,
            98% 35%,
            68% 57%,
            79% 91%,
            50% 70%,
            21% 91%,
            32% 57%,
            2% 35%,
            39% 35%
    );
}

.hero-chart {
    width: 62.19rem;
    margin: 0 auto;
}

.chart-stages {
    font-size: var(--font-size-xl);
    color: #FFFFFF;
    font-weight: var(--font-weight-normal);
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: -2rem;
}

.hero-description {
    font-size: 1.875rem;
    color: #FFFFFF;
    text-align: center;
    font-weight: var(--font-weight-medium);
    margin: 3.375rem auto 6rem;
}

/* ---------- 轻量协作区（按量扣费） ---------- */
.lightweight-section {
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 0.84fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
        "header image"
        "body image";
    column-gap: 2rem;
    row-gap: 1.25rem;
    align-items: center;
    width: 71.875rem;
    max-width: 100%;
    height: 38.75rem;
    padding: 0 3.25rem 2.25rem;
    margin-top: 8.81rem;
    margin-bottom: 2.13rem;
    background-image: url(../images/recharge/bg15.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    color: #422203;
}

@supports (aspect-ratio: 1150 / 620) {
    .lightweight-section {
        height: auto;
        aspect-ratio: 1150 / 620;
    }
}

/* 标题区：靠左上，颜色适配浅色卡片 */
.lightweight-section .section-header {
    grid-area: header;
    align-items: flex-start;
    justify-content: flex-start;
}

.lightweight-section .section-title {
    min-width: 0;
    font-size: 2.5rem;
    padding: 0.3rem 1.5rem;
}

.lightweight-section .section-subtitle {
    margin: 0.75rem 0 0;
    font-size: 1.38rem;
    color: #8A5A34;
    text-align: left;
}

/* 左侧文案列：清掉原来深色卡片的外框与固定尺寸 */
.lightweight-section .flexible-plan {
    grid-area: body;
    width: auto;
    height: auto;
    border: 0;
    border-radius: 0;
    align-items: flex-start;
    justify-content: flex-start;
}

.lightweight-section .plan-title {
    margin: 0;
    font-size: 2.5rem;
    color: #3B2314;
    font-weight: 500;
}

.lightweight-section .plan-card {
    margin-top: 2.36rem;
    padding: 0;
    align-items: flex-start;
    justify-content: flex-start;
}

.lightweight-section .plan-feature {
    margin: 0;
    background: #542010;
    border-radius: 1.25rem;
    font-size: 1.5rem;
    color: #FFFFFF;
    text-align: justify;
    line-height: 2.38rem;
    font-weight: 400;
    padding: 1rem 1.56rem;
}

.lightweight-section .plan-description {
    margin: 0.75rem 0 0;
    line-height: 1.8;
    font-size: 1.38rem;
    color: #3B2314;
    font-weight: 400;
    white-space: nowrap;
}

.lightweight-section .flexible-btn-wrapper {
    margin: 3.69rem 0 0;
    align-items: flex-start;
}

.lightweight-section a.btn.btn-secondary {
    width: auto;
    padding: 0 2.25rem 0 0;
}

.lightweight-section a.btn.btn-secondary .price {
    margin-left: -0.11rem;
    margin-right: 1.69rem;
    padding: 1rem 2.25rem;
    font-size: 1.9rem;
    line-height: 1.2;
    border-radius: 3rem;
}

/* 右侧插图（bg16） */
.lightweight-section .plan-image {
    grid-area: image;
    position: static;
    width: 100%;
    max-width: 20rem;
    justify-self: center;
    align-self: center;
}

.lightweight-section .plan-image img {
    display: block;
    width: 29.19rem;
    height: auto;
    position: absolute;
    top: -6.5rem;
}

.section-header {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.coupon-section .section-header {
    position: relative;
    z-index: 10;
}

.section-title {
    background-image: linear-gradient(133deg, #F8A73B 0%, #F77B31 23%, #E84411 100%);
    border-radius: 5.625rem;
    font-size: 3.25rem;
    color: #FFFFFF;
    font-weight: var(--font-weight-medium);
    text-align: center;
    padding: 0.38rem 2rem;
    margin-top: 0;
    min-width: 39.88rem;
}

p.section-subtitle {
    font-size: 1.875rem;
    color: #FFFFFF;
    font-weight: var(--font-weight-normal);
    margin: 1.13rem auto 0rem;
    text-align: center;
}

.flexible-plan {
    border-radius: 3.75rem;
    border: 0.1875rem solid transparent;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 41.88rem;
    height: 39.5rem;
    position: relative;
    z-index: 6;
}

img {
    width: 100%;
}

.plan-card {
    margin-top: 3rem;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    padding: 0 3.19rem;
}

.flexible-btn-wrapper {
    margin: 0 0.54rem 0 0rem;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: center;
}

.btn.btn-secondary {
    margin: 0;
}

a.btn.btn-secondary {
    background-image: linear-gradient(147deg, #F67E0A 54%, #E71F0A 100%);
    border: 0.1875rem solid #FFD09C;
    border-radius: 3.625rem;
    font-size: var(--font-size-4xl);
    color: #FFFFFF;
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21.56rem;
    padding: 0;
}

a.btn.btn-secondary {
    width: 31.38rem;
}

a.btn.btn-secondary .price {
    padding: 1rem 2.94rem;
    font-size: var(--font-size-5xl);
    line-height: 1.65;
    background-image: linear-gradient(179deg, #FFFFE4 0%, #FBE7A4 100%);
    color: #9F321E;
    border-radius: 3.63rem;
    border-left: 0.19rem solid #FFD09C;
    border-right: 0.19rem solid #FFD09C;
    margin-left: -2rem;
}

.plan-image {
    position: absolute;
    width: 13.2rem;
    top: 1rem;
    right: 4rem;
    z-index: 3;
}

.invite-section {
    font-size: var(--font-size-xl);
    color: #F2DBB6;
    text-align: left;
    font-weight: 400;
}

p.discount-price {
    font-size: var(--font-size-xl);
    color: #FF1A00;
    font-weight: 500;
    margin: 0;
}

p.discount-price span {
    font-size: 1.125rem;
    color: #FFF2DF;
    text-align: center;
    font-weight: 400;
}

p.discount-price span.bigger {
    font-size: 3rem;
    color: #FF1A00;
    font-weight: 500;
    margin: 0 0.875rem;
}

.invite-section {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 10;
}

.redeem-wrapper {
    width: 71.5rem;
    margin: 0 auto;
}

p.invite-title {
    white-space: nowrap;
    margin-bottom: var(--spacing-4);
    margin-top: 0;
    font-size: var(--font-size-7xl);
    font-weight: 400;
    color: transparent;
    background-image: linear-gradient(180deg, #FFF9B3 0%, #FF8E25 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.coupon-section {
    margin: 10rem auto 11rem;
    width: 100%;
    position: relative;
    z-index: 5;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 4rem;
}

.coupon-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    align-items: center;
    font-size: var(--font-size-xl);
    color: #FDFEEC;
    text-align: center;
    font-weight: 400;
    justify-content: space-between;
    gap: 1.88rem;
    position: relative;
    z-index: 10;
    width: 75.14rem;
    margin: 0 auto;
}

/* 旧浏览器回退：flex gap 不支持时用 margin 模拟间距；支持 gap 的浏览器经 @supports 取消 */
.coupon-cards > * + * {
    margin-left: 1.88rem;
}

@supports (gap: 1.88rem) {
    .coupon-cards > * + * {
        margin-left: 0;
    }
}

.coupon-item {
    background-image: linear-gradient(136deg, #FC882C 0%, #EA400F 66%, #EB4410 100%);
    border: 0.1875rem solid #FDEFA8;
    border-radius: 1.25rem;
    padding-top: 2.75rem;
}

.coupon-item p {
    margin: 0;
}

p.coupon-condition {
    margin: 0 0 2.125rem;
}

.coupon-amount span {
    font-size: var(--font-size-7xl);
    color: #FDFEEC;
    font-weight: 500;
}

a.btn-coupon {
    background-image: linear-gradient(179deg, #FFFFE4 0%, #FBE7A4 100%);
    border: 0.1875rem solid #FDEFA8;
    border-radius: 1.25rem;
    padding: 0.56rem 4.25rem;
    font-size: 2.25rem;
    color: #9F321E;
    text-align: center;
    font-weight: 500;
    white-space: nowrap;
}

.card-badge {
    position: absolute;
    top: -0.95rem;
    right: -0.9rem;
    width: 12.72rem;
}

/* ---------- 超值年卡推荐：两张卡片并排一行 ---------- */
.value-plans {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1.87rem;
    width: 71.49rem;
    max-width: 100%;
    margin-top: 5.38rem;
    margin-bottom: 7rem;
    position: relative;
    z-index: 10;
}

/* 旧浏览器回退：flex gap 不支持时用 margin 模拟间距 */
.value-plans > * + * {
    margin-left: 1.87rem;
}

@supports (gap: 1.87rem) {
    .value-plans > * + * {
        margin-left: 0;
    }
}

.value-plan-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    padding: 2.94rem 3.06rem 2.38rem;
    border-radius: 1.25rem;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    aspect-ratio: 550 / 502;
    color: #422203;
}

/* 两张卡片各自的背景图 */
.value-plan-card--100g {
    background-image: url('../images/recharge/bg13.svg');
}

.value-plan-card--500g {
    background-image: url('../images/recharge/bg14.svg');
}

.value-plan-card__title {
    font-size: 2rem;
    font-weight: 600;
    border-radius: 0.63rem;
    padding: 0.3rem 1rem;
    /* 中文视觉居中：flex 居中行盒 + 行高压到 1（详见 base.css 的 .cjk-center） */
    display: flex;
    align-items: center;
    line-height: 1;
}

.value-plan-card--100g .value-plan-card__title {
    background-image: linear-gradient(270deg, #994A36 0%, #2D1803 100%);
}

.value-plan-card--500g .value-plan-card__title {
    background-image: linear-gradient(270deg, #996336 0%, #2D1803 100%);
}

.img-wrapper {
    position: absolute;
    top: -1rem;
    right: 0.5rem;
    width: 42%;
    height: 42%;
}

.img-wrapper::after {
    content: "";
    display: block;
    position: absolute;
    transform: rotate(40deg);
    width: 75%;
    height: 79%;
    filter: blur(4rem);
    top: 3rem;
    z-index: 4;
    right: 2rem;
}

.value-plan-card--100g .img-wrapper::after {
    background: #5A1800;
}

.value-plan-card--500g .img-wrapper::after {
    background: #5A2500;
}

.value-plan-card img {
    width: 100%;
    height: 100%;
    z-index: 10;
    position: relative;
}

/* 标题内层 <p> 去掉默认外边距，样式继承外层 */
.value-plan-card__title p {
    margin: 0;
    font: inherit;
    line-height: inherit;
    color: transparent;
    background-image: linear-gradient(180deg, #FFF1B9 0%, #DCAD66 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.value-plan-card__original {
    margin-top: 1.38rem;
    text-decoration: line-through;
    font-size: 1.13rem;
    color: #422203;
    font-weight: 400;
}

.value-plan-card__price {
    margin: 1.25rem 0 3.5rem;
    font-size: 1.5rem;
    color: transparent;
    background-image: linear-gradient(180deg, #180D05 0%, #DC4B00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.value-plan-card__price-value {
    font-size: 2.5rem;
    font-weight: 500;
    color: #B53A0C;
}

.value-plan-card__buy {
    padding: 0.5rem 0;
    border-radius: 1rem;
    background-image: linear-gradient(270deg, #582113 0%, #9E4D39 100%);
    color: #FDFEEC;
    font-size: 1rem;
    text-align: center;
    white-space: nowrap;
    width: 100%;
}

.value-plan-card__notes {
    margin-top: auto;
    padding-top: 2.56rem;
    font-size: 1.25rem;
    color: #422203;
    line-height: 2.25rem;
    font-weight: 500;
}

.value-plan-card__note {
    margin: 0;
    line-height: 1.6;
}

.yearly-plans {
    display: block;
    display: grid;
    justify-items: stretch;
    align-items: center;
    grid-template-columns: repeat(3, 23.13rem);
    gap: 1.25rem;
    margin-top: 4rem;
    position: relative;
    z-index: 10;
    margin-bottom: 4.31rem;
}

.yearly-card .card-badge {
    position: absolute;
    top: 1rem;
    right: 0.3125rem;
    width: 9.31rem;
}

.yearly-card {
    border-radius: 1.25rem;
    position: relative;
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
}

.yearly-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0.05rem;
    background: rgba(255, 200, 86, 0.76);
    border-radius: inherit;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.yearly-card:hover::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 0.05rem;
    background: linear-gradient(to bottom, rgba(158, 190, 255, 0.6) 0%, rgba(255, 200, 86, 0.76) 100%);
    border-radius: inherit;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.yearly-name {
    width: 100%;
    font-size: 1.38rem;
    color: #422203;
    font-weight: 500;
    padding: 1.69rem 1.19rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.yearly-name p {
    color: #FDFEE2;
    position: relative;
    margin: 0 0 0 0.75rem;
    background-image: linear-gradient(270deg, #4D4944 0%, #2D1803 100%);
    border-radius: 0.38rem;
    padding: 0 0.69rem;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 1.13rem;
}

.yearly-detail {
    width: 21.75rem;
    max-height: 19.56rem;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin: 0.79rem 0 2.19rem;
}

.detail-wrapper {
    height: 100%;
    display: inline-flex;
    flex-flow: column;
    justify-content: space-between;
    padding: 0 1.19rem 1.94rem;
}

.yearly-card-advanced .yearly-detail {
    background-image: linear-gradient(180deg, #FFBA4A 0%, #F8E5C7 100%);
    border: 0.125rem solid #FDEFA8;
    border-radius: 0.75rem;
}

.yearly-card-flagship .yearly-detail {
    background-image: linear-gradient(180deg, #FBB680 0%, #EEF8C7 100%);
    border: 0.125rem solid #FDEFA8;
    border-radius: 0.75rem;
}

.yearly-card-luxury .yearly-detail {
    background-image: linear-gradient(180deg, #F5FDAE 0%, #F8F4C7 100%);
    border: 0.125rem solid #FDEFA8;
    border-radius: 0.75rem;
}

p.yearly-title {
    font-size: 1.875rem;
    color: #3B2314;
    font-weight: 500;
    margin: 0 0 0.38rem;
}

p.yearly-description {
    font-size: var(--font-size-md);
    color: #6A5547;
    font-weight: 400;
    margin: 0;
}

.yearly-card-flagship p.yearly-description {
    font-size: var(--font-size-md);
    color: #FFFFFF;
    font-weight: 400;
}

.yearly-card p.original-price {
    font-size: var(--font-size-md);
    color: #3B2314;
    font-weight: 400;
    text-decoration: line-through;
    position: relative;
    text-align: left;
}

.yearly-card .bigger {
    font-size: var(--font-size-5xl);
}

.yearly-card p.discount-price {
    background-image: linear-gradient(180deg, #FF671E 0%, #422203 100%);
    white-space: nowrap;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.25rem;
    color: #422203;
    line-height: 45px;
    font-weight: 500;
}

.yearly-card p.discount-price .bigger {
    font-size: 2rem;
    font-weight: 500;
}

.yearly-card .price-action {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-flow: column;
}

.yearly-card p.discount-price span {
    font-size: 1.44rem;
    text-align: center;
    font-weight: 400;
    background-image: linear-gradient(180deg, #FF671E 0%, #422203 100%);
    white-space: nowrap;
    -webkit-background-clip: text;
    background-clip: text;
    /* 旧浏览器回退 */
    color: #FD8715;
    -webkit-text-fill-color: transparent;
}

a.btn-buy {
    border-radius: 3.125rem;
    font-size: 1rem;
    color: #FFFFFF;
    font-weight: 500;
    padding: 0.56rem 0;
    white-space: nowrap;
    background-image: linear-gradient(270deg, #4D4944 0%, #2D1803 100%);
    width: 19.38rem;
    text-align: center;
    /* hover 提亮/上浮的过渡（filter/transform 均为老浏览器长期支持的属性） */
    transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
}

/* 悬停状态：提亮（比原色淡）+ 轻微上浮凸出 + 投影，年卡卡与推荐卡按钮通用 */
a.btn-buy:hover {
    filter: brightness(1.2);
    transform: translateY(-2px);
    box-shadow: 0 0.375rem 0.875rem rgba(0, 0, 0, 0.28);
}

.recommend-section {
    display: flex;
    flex-flow: column;
    margin-bottom: 6.25rem;
    position: relative;
    z-index: 6;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
}

.recommend-section span {
    font-size: var(--font-size-8xl);
    color: #FFFFFF;
    font-weight: 500;
    margin-bottom: var(--spacing-12);
    text-align: center;
}

a.link-calculator {
    background-image: linear-gradient(172deg, #F67E0A 0%, #E71F0A 100%);
    border: 0.1875rem solid #FFD09C;
    border-radius: 5.25rem;
    font-size: 3rem;
    color: #FFFFFF;
    font-weight: 500;
    text-align: center;
    padding: 1.06rem 0rem;
    width: 60%;
    margin: 0 auto;
}

.last-section {
    background-image: none;
    z-index: 3;
    position: relative;
    background-color: transparent;
}

.backlight {
    width: 70%;
    height: 65rem;
    position: absolute;
    z-index: 0;
    bottom: 0;
    left: 15%;
    overflow: hidden;
}

.backlight .light-spot {
    width: 100%;
    height: 101.5rem;
    bottom: 0rem;
    left: 0;
    position: absolute;
    background-image: radial-gradient(ellipse 65% 91% at 50% 0%, #FF6600 0%, #FF6600 15%, rgba(255, 102, 0, 0.7) 30%, rgba(255, 102, 0, 0.3) 50%, transparent 80%);
    z-index: 4;
    transform: scaleY(-1);
}

.featured-card {
    display: flex;
    position: relative;
    border-radius: 1.25rem;
    padding: 4.06rem 4.41rem;
    margin-top: 6rem;
    margin-bottom: 10rem;
    background-image: linear-gradient(90deg, #382323 0%, #180D05 72%);
    align-items: flex-end;
}

.featured-card::before {
    content: '';
    position: absolute;
    top: -20%;
    left: -6%;
    width: 112%;
    height: 156%;
    z-index: -1;
    background-image: url(/static/face/images/recharge/bg9.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
    filter: blur(0.35rem);

}

.featured-head {
    border-radius: 0 0 1.875rem 1.875rem;
    position: absolute;
    left: 41%;
    top: 0;
    background: #4D3E3E;
    padding: 0.13rem 3.16rem 0.06rem;
}

p.featured-capacity {
    font-size: 2rem;
    color: transparent;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #FFBF5D 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
    margin: 0;

}

.featured-tag {
    position: absolute;
    background-image: linear-gradient(270deg, #4D4944 0%, #4F2A07 100%);
    border-radius: 0.88rem;
    padding: 0.25rem 1.38rem;
    right: 2rem;
    top: 4.19rem;
}

.featured-tag span {
    text-align: left;
    color: transparent;
    background-image: linear-gradient(180deg, #FFFFFF 0%, #DCAD66 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 1.75rem;
    margin: 0;
}

.featured-name {
    position: relative;
    margin-bottom: 1.3rem;
}

p.standard-yearly-title {
    text-align: left;
    color: transparent;
    background-image: linear-gradient(180deg, #FBE594 0%, #E77438 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2rem;
    margin: 0 0 0 2.5rem;
}

.featured-card p.original-price {
    font-size: 1.285rem;
    color: #FFFEFD;
    line-height: 2.06rem;
    font-weight: 400;
    text-decoration: line-through;
    margin: 5.94rem 0 2.13rem;
}

.star-icon {
    background-color: #FF6715;
    /* 旧浏览器回退：Safari 13 以下需要 -webkit- 前缀 */
    -webkit-clip-path: polygon(50% 0%, /* 顶部尖角 */ 60% 40%, /* 右上凹陷 */ 100% 50%, /* 右侧尖角 */ 60% 60%, /* 右下凹陷 */ 50% 100%, /* 底部尖角 */ 40% 60%, /* 左下凹陷 */ 0% 50%, /* 左侧尖角 */ 40% 40% /* 左上凹陷 */);
    clip-path: polygon(50% 0%, /* 顶部尖角 */ 60% 40%, /* 右上凹陷 */ 100% 50%, /* 右侧尖角 */ 60% 60%, /* 右下凹陷 */ 50% 100%, /* 底部尖角 */ 40% 60%, /* 左下凹陷 */ 0% 50%, /* 左侧尖角 */ 40% 40% /* 左上凹陷 */);
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    z-index: 5;
    margin-left: 0.81rem;
    bottom: 0.5rem;
    left: -0.5rem;
}

.star-icon.star-icon2 {
    background-color: #FFB215;
    position: absolute;
    width: 0.88rem;
    height: 0.88rem;
    top: 0.5rem;
    left: 0.5rem;
}

img.bg2 {
    width: 27.73rem;
    height: 16.38rem;
}

.featured-card p.yearly-description {
    color: #FFFFFF;
    font-weight: 400;
    font-size: 1.38rem;
    width: 35.06rem;
    margin-bottom: 6.56rem;
}

.featured-card p.discount-price {
    color: #FFFFFF;
    margin-top: 0.5rem;
    margin-bottom: 3rem;
}

.featured-card a.btn-buy {
    border: none;
    line-height: 1;
    padding: 0 2rem 0 0;
    border-radius: 1.88rem;
    font-size: 1.35rem;
    background-image: linear-gradient(176deg, #F7881A 0%, #F66B12 55%, #F53C16 100%);
    color: #FFFFFF;
    font-weight: 500;
    display: flex;
    width: max-content;
    align-items: center;
    overflow: hidden;
    position: relative;
}

.featured-card a.btn-buy img {
    width: 1.6rem;
    height: 3.85rem;
    position: absolute;
    right: 7.91rem;
}

.featured-card a.btn-buy p {
    padding: 0.38rem 1.5rem 0.38rem 2rem;
    color: #FB6101;
    background: #FCEDDA;
    border-radius: 1.88rem 0 0.9rem 1.88rem;
    margin: 0 1.5rem 0 0;
    height: 2.5rem;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    line-height: 1.45;
}

.featured-body span.bigger {
    font-size: 1.75rem;
    color: #FB6101;
    border-radius: 0;
    padding: 0;
    margin-left: 0.3rem;
}

p.first-recharge-rule-note {
    font-size: 1.25rem;
    color: #FFFEFD;
    font-weight: 400;
    margin-bottom: 0;
}

/* 推荐卡按钮悬停：提亮 + 上浮 + 橙色光晕投影 */
.featured-card a.btn-buy:hover {
    filter: brightness(1.12);
    transform: translateY(-2px);
    box-shadow: 0 0.375rem 1rem rgba(255, 89, 8, 0.4);
}

.feature-lists {
    display: flex;
    flex-flow: column;
    width: 100%;
    align-items: flex-start;
    margin-left: 5rem;
}

.feature-list {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    width: 78%;
}

.feature-list.list1 {
    border-bottom: 0.0625rem solid #2D231B;
    margin-bottom: 1.44rem;
}

.feature-list span {
    text-align: left;
    color: transparent;
    background-image: linear-gradient(180deg, #E07B27 0%, #F4C690 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.feature-item {
    color: #FFFFFF;
    letter-spacing: 0;
    font-weight: 400;
    font-size: 1.13rem;
    margin-bottom: 1.25rem;
}

p.desc, a.footer-nav__link, .footer, .footer a {
    color: #FFFFFF;
}

.product-info-wrapper:after {
    background: #FFFFFF;
}

.contact-card {
    background-image: linear-gradient(to bottom, #E1BC72 0%, transparent 73%);
    border-radius: 2.5rem;
    display: flex;
    width: 64.74rem;
    align-items: center;
    position: relative;
    padding: 2.25rem 3.38rem 2.13rem;
    margin-bottom: 6.38rem;
    justify-content: space-between;
    z-index: 10;
}

.contact-card:after {
    content: "";
    background: #291F17;
    width: calc(100% - 0.12rem);
    height: calc(100% - 0.12rem);
    position: absolute;
    border-radius: 2.5rem;
    top: 0.06rem;
    left: 0.06rem;
}

.contact-card__item {
    position: relative;
    z-index: 9;
    display: flex;
    flex-flow: column;
    align-items: stretch;
    justify-content: center;
}

.contact-card__head {
    display: flex;
    align-items: center;
    gap: 1.08rem;
}

.contact-card__head span.contact-card__label {
    color: transparent;
    background-image: linear-gradient(180deg, #FFF1B9 0%, #E67F1C 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 2.25rem;
    letter-spacing: 0;
    text-align: justify;
    font-weight: 500;
    margin-top: 0;
}

img.contact-card__icon {
    width: 3.63rem;
}

img.contact-card__qr {
    width: 9.25rem;
    border-radius: 0.88rem;
}

span.contact-card__body {
    font-size: 1.38rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
    font-weight: 400;
    margin-top: 2.25rem;
}

span.contact-card__label {
    font-size: 1.25rem;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: justify;
    font-weight: 400;
    margin-top: 1.25rem;
}