@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@500;600&display=swap');

:root {
    --ink       : #151515;
    --muted     : #6b6b6b;
    --line      : #e9e2d8;
    --cream     : #fffaf0;
    --paper     : #fdf8ef;
    --gold      : #b8872d;
    --sage      : #75866b;
    --sage-light: #eef2e7;
    --rose      : #f3ded7;
    --black     : #111;
    --white     : #fff;
    --shadow    : 0 18px 48px rgba(38, 31, 20, .08)
}

* {
    box-sizing: border-box
}

body {
    margin     : 0;
    background : #fff;
    color      : var(--ink);
    font-family: Inter, Arial, sans-serif;
    line-height: 1.5
}

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

.flex {
    display: flex;
}

/* 判断类目 */
.isPc {
    display: block;
}

.isMobile {
    display: none !important;
}

.isMobileFelx {
    display: none !important;
}

.page-shell {
    width: min(1480px, 94%);
    margin: 0 auto;
}

.site-header {
    position       : sticky;
    top            : 0;
    z-index        : 50;
    background     : #FFF;
    backdrop-filter: blur(14px);
}

.nav-wrap {
    width                : min(1400px, 94%);
    margin               : 0 auto;
    height               : 72px;
    display              : grid;
    grid-template-columns: 200px 1fr auto;
    align-items          : center;
    gap                  : 28px
}

.logo-image {
    display    : inline-flex;
    align-items: center;
    white-space: nowrap
}

.logo-image img {
    height : 42px;
    width  : auto;
    display: block
}

.footer-logo img {
    height: 36px
}

.search-box {
    height       : 42px;
    border       : 1px solid #d8d8d8;
    border-radius: 999px;
    display      : flex;
    align-items  : center;
    gap          : 12px;
    padding      : 0 16px;
    color        : #777;
    font-size    : 14px
}

.search-icon {
    font-size  : 24px;
    line-height: 1;
    transform  : rotate(-12deg)
}

.camera-icon {
    margin-left: auto;
    color      : #333
}

.account-actions {
    display    : flex;
    align-items: center;
    gap        : 22px;
    font-size  : 15px
}

.category-nav {
    height         : 54px;
    display        : flex;
    align-items    : center;
    justify-content: center;
    gap            : 52px;
    font-size      : 15px;
    border-top     : 1px solid rgba(233, 226, 216, .65)
}

.category-nav a {
    white-space: nowrap;
}

.category-nav a:hover,
.account-actions a:hover,
.footer-grid a:hover {
    text-decoration: underline
}

.btn {
    min-height        : 49px;
    display           : inline-flex;
    justify-content   : center;
    align-items       : center;
    padding           : 0 22px;
    border-radius     : 4px;
    font-weight       : 500;
    /* border         : 1px solid var(--black); */
    cursor            : pointer
}

.btn-dark {
    background   : var(--black);
    color        : var(--white);
    border-radius: 6px;
}

.btn-dark img {
    width      : 24px;
    height     : 24px;
    margin-left: 8px;
}

.btn-light {
    background: var(--white);
    color     : var(--black)
}

.btn-outline {
    background: transparent;
    color     : var(--black)
}

.text-link {
    display      : inline-flex;
    align-items  : center;
    min-height   : 44px;
    font-weight  : 700;
    border-bottom: 1px solid var(--black)
}

.invite-hero {
    padding      : 34px 0 0;
    /* background: linear-gradient(180deg, #fff 0%, #fbfaf6 100%) */
}

.hero-frame {
    width                   : min(1480px, 94%);
    margin                  : 0 auto;
    min-height              : 580px;
    /* border               : 1.5px solid var(--gold); */
    background              : url("./assets/banner-mb.png") center / cover no-repeat;
    background-size         : contain;
    background-position     : center;
    background-repeat       : no-repeat;
    /* background           : radial-gradient(circle at 78% 22%, rgba(216, 191, 123, .16), transparent 18%), linear-gradient(135deg, #fffdf7 0%, #fff8e9 58%, #f3ead7 100%); */
    position                : relative;
    overflow                : hidden;
    display                 : grid;
    grid-template-columns   : 1fr 380px 310px;
    gap                     : 24px;
    padding                 : 70px 76px 54px
}

.hero-code img {
    width: 100%;
}

.cta-actions .btn{
    width: 200px;
}

.eyebrow {
    color         : var(--gold);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-size     : 12px;
    font-weight   : 800;
    margin-bottom : 16px
}

.hero-copy h1.hero-title {
    margin        : 0;
    font-size     : clamp(54px, 5.8vw, 94px);
    line-height   : .98;
    letter-spacing: -.05em;
    font-weight   : 600;
    color         : #FFF;
    ;
    margin-bottom: 12px;
}

.hero-subtitle {
    color      : var(--sage);
    font-size  : 20px;
    font-weight: 700;
    max-width  : 580px;
    margin     : 28px 0 20px
}

.hero-description {
    font-size: 14px;
    max-width: 580px;
    margin   : 0;
    color    : #fff;
}

.hero-actions {
    margin     : 40px 0 0;
    display    : flex;
    align-items: center;
    gap        : 14px;
    flex-wrap  : wrap
}

.trust-points {
    display              : grid;
    grid-template-columns: repeat(3, minmax(120px, 1fr));
    gap                  : 14px;
    max-width            : 720px
}

.trust-item {
    display    : flex;
    gap        : 10px;
    align-items: center;
    font-size  : 13px;
    color      : #333
}

.trust-icon {
    width          : 34px;
    height         : 34px;
    flex           : 0 0 34px;
    border-radius  : 50%;
    border         : 1px solid var(--gold);
    display        : flex;
    align-items    : center;
    justify-content: center;
    color          : var(--gold);
    font-weight    : 800
}

.invite-card {
    align-self: start;
    margin-top: 66px;
    padding   : 24px 26px;
    border    : 1.5px solid var(--gold);
    background: rgba(255, 255, 255, .78);
    box-shadow: var(--shadow);
    text-align: center;
    min-height: 248px;
    position  : relative
}

.invite-card:before {
    content       : '';
    position      : absolute;
    inset         : 8px;
    border        : 1px dashed rgba(184, 135, 45, .55);
    pointer-events: none
}

.card-label,
.invite-code,
.card-note,
.copy-code,
.copy-feedback,
.mini-products {
    position: relative;
    z-index : 1
}

.card-label {
    color      : var(--sage);
    font-size  : 16px;
    font-weight: 700
}

.invite-code {
    color         : var(--gold);
    font-size     : 52px;
    line-height   : 1;
    font-weight   : 800;
    letter-spacing: .06em;
    margin        : 16px 0 12px
}

.copy-code {
    border       : 1px solid var(--black);
    background   : var(--black);
    color        : #fff;
    border-radius: 999px;
    height       : 40px;
    padding      : 0 18px;
    font-weight  : 800;
    cursor       : pointer;
    border-radius: 42px;
}
.copy-code img{
    width: 24px;
    height: 24px;
    margin-left: 8px;
}

.copy-feedback {
    height     : 20px;
    margin-top : 8px;
    color      : var(--sage);
    font-size  : 13px;
    font-weight: 700
}

.card-note {
    color    : #333;
    font-size: 14px
}

.mini-divider {
    width     : 78px;
    height    : 1px;
    margin    : 14px auto 12px;
    background: var(--gold)
}

.mini-products {
    display        : flex;
    justify-content: center;
    gap            : 8px;
    flex-wrap      : wrap;
    font-size      : 11px;
    color          : #555;
    text-transform : uppercase;
    letter-spacing : .08em
}

.hero-product-stack {
    position  : relative;
    min-height: 430px
}

.hero-product-stack img {
    position  : absolute;
    width     : 175px;
    height    : 175px;
    object-fit: cover;
    border    : 8px solid #fff;
    box-shadow: 0 18px 36px rgba(60, 45, 20, .12)
}

.hero-product-stack img:nth-child(1) {
    right        : 80px;
    top          : 16px;
    border-radius: 50%
}

.hero-product-stack img:nth-child(2) {
    right        : 0;
    top          : 180px;
    border-radius: 18px
}

.hero-product-stack img:nth-child(3) {
    right        : 140px;
    bottom       : 20px;
    border-radius: 18px
}

.sparkle {
    position : absolute;
    color    : var(--gold);
    font-size: 26px
}

.s1 {
    top  : 115px;
    right: 22px
}

.s2 {
    bottom: 22px;
    right : 245px
}

.section {
    width  : min(1280px, 92%);
    margin : 0 auto;
    padding: 40px 0 0px
}

.section-title {
    text-align: center;
    margin    : 0 auto 30px
}

.section-title h2 {
    font-family: Times, Times;
    font-size     : 32px;
    line-height   : 1.1;
    font-weight   : 500;
    margin        : 0 0 0px;
    letter-spacing: -.02em
}

.section-title p {
    margin   : 0 auto;
    max-width: 760px;
    color    : var(--muted)
}

.value-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 16px;
    max-width            : 1120px;
    margin               : 0 auto
}

.value-card {
    background   : #fff;
    border       : 1px solid var(--line);
    border-radius: 12px;
    padding      : 26px;
    min-height   : 190px;
    box-shadow   : 0 10px 24px rgba(25, 20, 12, .04)
}

.value-icon {
    width          : 54px;
    height         : 54px;
    border-radius  : 50%;
    background     : #f5ebd8;
    color          : var(--gold);
    display        : flex;
    align-items    : center;
    justify-content: center;
    font-size      : 23px;
    margin-bottom  : 18px
}

.value-card h3 {
    margin   : 0 0 10px;
    font-size: 17px
}

.value-card p {
    margin   : 0;
    color    : #666;
    font-size: 14px
}

.category-grid {
    display                 : flex;
    /* display              : grid;
    grid-template-columns   : repeat(6, 1fr); */
    /* gap                  : 22px */
}

.category-card {
    display: grid;
    gap    : 12px;
    color  : #111;
    margin: 0 10px;
}

.category-card img {
    height       : 150px;
    width        : 100%;
    border-radius: 8px;
    object-fit   : cover;

    background   : #f2eadf
}

.category-card h3 {
    margin         : 0;
    font-size      : 14px;
    color          : #101010;
    text-decoration: underline;
}

.category-card span {
    font-size   : 18px;
    justify-self: end;
    color       : #333
}

.product-grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 24px
}

.product-card {
    background: #fff
}

.product-link {
    display: block
}

.product-image {
    height       : 270px;
    border-radius: 8px;
    border       : 1px solid var(--line);
    position     : relative;
    overflow     : hidden;
    background   : #f7f1e7
}

.product-image img {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: transform .25s
}

.product-card:hover .product-image img {
    transform: scale(1.045)
}

.product-meta {
    padding-top: 14px
}

.product-tag {
    display       : inline-flex;
    background    : #f5ebd8;
    color         : #8f651f;
    border-radius : 999px;
    padding       : 4px 9px;
    font-size     : 11px;
    font-weight   : 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom : 9px
}

.product-name {
    font-size  : 15px;
    line-height: 1.35;
    height     : 62px;
    overflow   : hidden
}

.brand-name {
    margin-top     : 8px;
    color          : #555;
    font-size      : 13px;
    text-decoration: underline
}

.price-row {
    margin-top     : 8px;
    display        : flex;
    align-items    : baseline;
    gap            : 10px;
    justify-content: space-between
}

.price-row strong {
    font-size: 24px
}

.price-row span {
    color    : #777;
    font-size: 14px
}

.center-actions {
    margin-top     : 34px;
    display        : flex;
    gap            : 14px;
    justify-content: center;
    flex-wrap      : wrap
}

.cta-band {
    width        : min(1480px, 94%);
    margin       : 64px auto 40px;
    min-height   : 170px;
    border-radius: 18px;
    background   : #EED98C;

    padding              : 42px 54px;
    display              : grid;
    grid-template-columns: 1fr auto;
    gap                  : 30px;
    align-items          : center;

    display:block;
    text-align: center;
}

.cta-copy h2 {
    font-family: 'Playfair Display', Georgia, serif;
    font-size  : 38px;
    font-weight: 500;
    margin     : 0 0 30px;
    line-height:45px;
}

.cta-copy p {
    margin   : 0;
    color    : #555;
    max-width: 680px
}

.cta-actions {
    display        : flex;
    gap            : 12px;
    flex-wrap      : wrap;
    justify-content: center
}

.site-footer {

    width  : min(1400px, 94%);
    margin : 0 auto;
    padding: 36px 0 24px
}

.footer-top {
    display        : flex;
    align-items    : center;
    justify-content: space-between;
    gap            : 8px;
    border-bottom  : 1px solid #eee;
    padding-bottom : 24px
}

.footer-top p {
    margin     : 0;
    font-family: Times, Times;
    font-size  : 16px;
    color      : #222222;
}

.footer-grid {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 36px;
    padding              : 28px 0
}

.footer-grid h4 {
    margin        : 0 0 14px;
    font-size     : 13px;
    letter-spacing: .14em
}

.footer-grid a {
    display  : block;
    color    : #333;
    margin   : 9px 0;
    font-size: 14px
}

.footer-bottom {
    border-top     : 1px solid var(--line);
    padding-top    : 18px;
    padding-bottom : 40px;
    color          : #777;
    font-size      : 13px;
    display        : flex;
    justify-content: space-between;
    gap            : 8px;
    flex-wrap      : wrap
}


@media(max-width:1180px) {
    .nav-wrap {
        grid-template-columns: 180px 1fr
    }

    .account-actions {
        display: none
    }

    .category-nav {
        gap            : 28px;
        overflow-x     : auto;
        justify-content: flex-start;
        padding        : 0 4%
    }

    .hero-frame {
        grid-template-columns: 1fr 340px;
        padding              : 54px
    }

    .hero-product-stack {
        display: none
    }

    .value-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .category-grid,
    .product-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .cta-band {
        grid-template-columns: 1fr
    }

    .cta-actions {
        justify-content: flex-start
    }
}

@media(max-width:760px) {
    .youxiang{
        display: block !important;
    }
    .cta-actions .btn{
        width: 100% !important;
    }
    /* 判断类目 */
    .isPc {
        display: none !important;
    }

    .isMobile {
        display: block !important;
    }

    .isMobileFelx {
        display: flex !important;
    }

    .nav-wrap {
        height               : auto;
        padding              : 18px 0;
        grid-template-columns: 1fr;
        gap                  : 14px;
        justify-content      : space-between;
    }

    .keff-header {
        align-items: center;

    }

    .keff-header img {
        width      : 21px;
        height     : 21px;
        margin-left: 6px;
    }

    .keff-header p {
        margin         : 0;
        font-size      : 14px;
        color          : #101010;
        text-decoration: underline;
    }

    .logo-image img {
        height: 25px
    }

    .search-box {
        width  : 100%;
        display: none;
    }

    .category-nav {
        height   : 46px;
        gap      : 22px;
        font-size: 14px
    }

    .invite-hero {
        padding: 0;
    }

    .hero-frame {
        grid-template-columns: 1fr;
        padding              : 40px 32px;
        min-height           : auto
    }

    .hero-copy h1.title-mb {
        margin       : 0;
        font-size    : 27px;
        line-height  : 36px;
        font-weight  : 500;
        color        : #FFF;
        margin-bottom: 12px;
    }

    .invite-card {
        margin-top: 10px
    }

    .trust-points {
        grid-template-columns: 1fr
    }

    .value-grid,
    .category-grid,
    .product-grid,
    .footer-grid {
        grid-template-columns: 1fr
    }

    .product-image {
        height: 240px
    }

    .footer-top {
        flex-direction: column;
        align-items   : flex-start
    }

    .site-footer {
        padding: 24px 0
    }

    .cta-band {
        padding: 30px 24px;
        display: grid;
    text-align: center;
    }

    .cta-actions {
        display: grid
    }

    .btn {
        width: 100%
    }

    .category-grid {
        display        : flex;
        flex-wrap      : wrap;
        justify-content: space-between;
        grid           : 0;
    }

    .category-card {
        width: 48%;
    }

    .category-card {
        position     : relative;
        margin: 0;
        margin-bottom: 15px;
        
    }

    .category-card img {
        height: 132px;
    }

    .category-card h3 {
        position: absolute;
        bottom  : 0;
        left    : 0;
        bottom  : 10px;
        left    : 12px;
    }

    .cta-band {
        margin-top: 30px;
    }

    .cta-copy h2 {
        font-size: 28px;
        margin   : 0;
        text-align: left;
    }

    .cta-actions {
        display: block;
    }

    .cta-actions .btn {
        margin-bottom: 10px;
    
    }

    .category-card h3{
        color: #FFF;
    }
}
@media(max-width:375px) {
    .hero-frame {
        grid-template-columns: 1fr;
        padding              : 40px 24px;
        min-height           : auto
    }

}
/* ==================== 首屏 Banner 模块 ==================== */
.hero-section-bra {
    width : min(1480px, 94%);
    margin: 64px auto 40px;
}

.hero-section {
    position             : relative;
    display              : flex;
    justify-content: space-between;
    min-height           : 652px;
    grid-template-columns: minmax(0, 1fr) 290px;
    align-items          : center;
    gap                  : 58px;
    padding              : 56px 90px;
    overflow             : hidden;
    border-radius        : var(--radius-lg);
    background-image     :
        linear-gradient(90deg, rgba(58, 43, 23, 0.66) 0%, rgba(58, 43, 23, 0.28) 47%, rgba(255, 255, 255, 0.04) 100%),
        url("assets/pcbaner.png");
    background-position: center;
    background-size    : cover;
    border-radius      : 16px;
}

.hero-section::after {
    position: absolute;
    inset   : 0;
    background:
        radial-gradient(circle at 16% 20%, rgba(255, 255, 255, 0.12), transparent 28%),
        linear-gradient(135deg, rgba(255, 255, 255, 0.02), rgba(74, 43, 9, 0.08));
    content       : "";
    pointer-events: none;
}

.hero-copy,
.coupon-card {
    position: relative;
    z-index : 1;
}

.eyebrow {
    margin        : 0 0 10px;
    color         : rgba(255, 255, 255, 0.78);
    font-size     : 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-description-pc {
    max-width  : 435px;
    margin     : 22px 0 0;
    color      : var(--white);
    font-size  : 16px;
    font-weight: 400;
    line-height: 28px;
}

.hero-buttons {
    display   : flex;
    flex-wrap : wrap;
    gap       : 15px;
    margin-top: 24px;
}

.coupon-card {
    position  : relative;
    width     : 100%;
    max-width : 420px;
    text-align: center;
    transform: translateX(-35px);
}

.coupon-card-bg {
    width : 100%;
    height: auto;
    filter: drop-shadow(0 20px 50px rgba(33, 22, 7, 0.14));
}
.coupon-line{
    position: absolute;
    bottom: 49%;
    width: 100%;
}

.coupon-card-content {
    position      : absolute;
    inset         : 26px 24px 14px;
    display       : flex;
    flex-direction: column;
    align-items   : center;
}

.coupon-kicker {
    margin     : 0;
    color: #135611;
    font-size  : 18px;
}

.coupon-discount {
    display    : block;
    color: #101010;
    margin-top: 20px;
    font-size  : 36px;
}

.coupon-note {
    margin     : 12px 0 0;
    font-size  : 14px;
    line-height: 1.35;
}

.coupon-divider {
    margin    : 18px -10px 16px;
    border-top: 1px dashed #c59a5a;
}

.coupon-code {
    color: #B78529;
    font-size     : 52px;
    font-weight   : 700;
    letter-spacing: 6px;
}

.copy-button {
    display        : inline-flex;
    min-height     : 31px;
    align-items    : center;
    justify-content: center;
    gap            : 5px;
    margin-top     : 13px;
    padding        : 7px 15px;
    border         : 0;
    border-radius  : 999px;
    color          : var(--white);
    background     : var(--text);
    cursor         : pointer;
    font-size      : 10px;
}

.copy-button:hover {
    background: #2b2b2b;
}

.copy-status {
    min-height: 14px;
    margin    : 5px 0 0;
    color     : var(--green);
    font-size : 9px;
}

/* ==================== 三步说明模块 ==================== */
.steps-section {
    padding-top: 55px;
    
    margin: 0 auto;
}

.section-title-th {
    margin     : 0;
    font-family: Times, Times;
    font-size  : 32px;
    font-weight: 400;
    line-height: 1.2;
    text-align : center;
}

.step-row {
    justify-content: space-between;
    display              : flex;
    min-height           : 355px;
    align-items          : center;
    gap                  : 95px;
    padding              : 44px 58px;
}

.step-row--reverse {
 
}

.step-row--reverse .step-content {
  
}

.step-row--reverse .step-visual {
  
}
.thrrsimg{
    width: 750px;

}
.step-band {
    background: rgba(244,212,173,0.13);
}

.step-content {
  
}

.step-pill {
    display        : inline-flex;
    min-width      : 145px;
    height         : 46px;
    align-items    : center;
    justify-content: center;
    border-radius  : 999px;
    color          : var(--white);
    background: #101010;
    font-size      : 15px;
    font-weight    : 400;
}

.step-content h3 {
    margin        : 22px 0 10px;
    font-size     : 32px;
    font-weight   : 600;
    letter-spacing: -0.5px;
}

.step-content p {
    margin     : 4px 0;
    color: #999;
    font-size  : 18px;
    line-height: 1.45;
}

.step-visual {
 
}

.step-visual--wide {
    
}

.step-visual img {
    object-fit: contain;
}