/* ============================================================
   亲爱的DEAR · v5 轻奢零售版设计系统
   奶白 / 香槟金 / 浅灰 · 无衬线 · 极简留白
   ============================================================ */
:root {
    --bg: #FAF7F3;
    --bg-soft: #F3EEE7;
    --bg-card: #FFFFFF;
    --ink: #2B2825;
    --ink-soft: #7A736B;
    --ink-faint: #A8A097;
    --gold: #B08D57;
    --gold-deep: #96784A;
    --gold-soft: #D9BC8C;
    --line: #E9E2D7;
    --shadow: 0 10px 40px rgba(43, 40, 37, .07);
    --shadow-soft: 0 4px 18px rgba(43, 40, 37, .05);
    --radius: 4px;
    --sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
    --serif: 'Georgia', 'Times New Roman', serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--sans);
    background: var(--bg);
    color: var(--ink);
    font-size: 15px;
    line-height: 1.75;
    letter-spacing: .02em;
    -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; transition: color .25s; }
button { font-family: inherit; cursor: pointer; }
::selection { background: var(--gold-soft); color: var(--ink); }

h1, h2, h3 { font-weight: 500; letter-spacing: .08em; line-height: 1.4; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 5vw; }

/* ---------- 通用 kicker / 标题 ---------- */
.kicker {
    font-size: 11px; letter-spacing: .45em; text-transform: uppercase;
    color: var(--gold); font-weight: 500; margin-bottom: 14px;
}
.h-display { font-size: clamp(26px, 3.4vw, 40px); letter-spacing: .12em; }

/* ---------- 按钮 ---------- */
.btn-dear {
    display: inline-block; background: var(--ink); color: #fff;
    border: 1px solid var(--ink); padding: 13px 34px; font-size: 13px;
    letter-spacing: .25em; transition: all .3s; text-align: center;
}
.btn-dear:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn-line {
    display: inline-block; background: transparent; color: var(--ink);
    border: 1px solid var(--ink); padding: 13px 34px; font-size: 13px;
    letter-spacing: .25em; transition: all .3s; text-align: center;
}
.btn-line:hover { border-color: var(--gold); color: var(--gold-deep); }

/* ============================================================
   导航
   ============================================================ */
.nav {
    position: sticky; top: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 5vw; height: 64px;
    background: rgba(250, 247, 243, .92); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}
.nav .logo { display: flex; align-items: baseline; gap: 12px; }
.nav .logo .zh { font-size: 18px; letter-spacing: .3em; font-family: var(--serif); color: var(--ink); }
.nav .logo .en { font-size: 10px; letter-spacing: .4em; color: var(--gold); text-transform: uppercase; }
.nav .links { display: flex; gap: 34px; }
.nav .links a {
    font-size: 13px; letter-spacing: .2em; color: var(--ink-soft);
    padding: 6px 0; position: relative;
}
.nav .links a::after {
    content: ''; position: absolute; left: 50%; right: 50%; bottom: 0;
    height: 1px; background: var(--gold); transition: all .3s;
}
.nav .links a:hover, .nav .links a.on { color: var(--ink); }
.nav .links a.on::after, .nav .links a:hover::after { left: 0; right: 0; }
@media (max-width: 720px) {
    .nav { height: 56px; }
    .nav .links { gap: 16px; }
    .nav .links a { font-size: 12px; letter-spacing: .08em; }
    .nav .logo .zh { font-size: 15px; letter-spacing: .2em; }
    .nav .logo .en { display: none; }
}

/* ============================================================
   首页 Hero 全屏轮播
   ============================================================ */
.hero {
    position: relative; height: 92vh; min-height: 560px; overflow: hidden;
    background: var(--bg-soft);
}
.hero-slides, .hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slides img { object-fit: cover; opacity: 0; transition: opacity 1.6s ease, transform 8s ease; transform: scale(1.06); }
.hero-slides img.on { opacity: 1; transform: scale(1.0); }
.hero-overlay {
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse at 50% 52%, rgba(43, 40, 37, .40) 0%, rgba(43, 40, 37, .10) 62%),
        linear-gradient(to bottom, rgba(43, 40, 37, .30) 0%, rgba(43, 40, 37, .10) 38%, rgba(43, 40, 37, .48) 100%);
}
.hero-content {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center;
    color: #fff; padding: 0 6vw; z-index: 2;
}
.hero-kicker { font-size: 12px; letter-spacing: .5em; text-transform: uppercase; opacity: .92; margin-bottom: 22px; }
.hero-title { font-size: clamp(34px, 6vw, 68px); letter-spacing: .22em; font-weight: 400; text-shadow: 0 2px 30px rgba(43,40,37,.35); }
.hero-title em { font-family: var(--serif); font-style: normal; color: var(--gold-soft); }
.hero-sub { margin-top: 18px; font-size: 14px; letter-spacing: .3em; opacity: .95; }
.hero-cta { margin-top: 40px; display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; }
.hero-cta .btn-dear { background: #fff; border-color: #fff; color: var(--ink); }
.hero-cta .btn-dear:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.hero-cta .btn-line { border-color: rgba(255,255,255,.85); color: #fff; }
.hero-cta .btn-line:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.12); }
.hero-dots { position: absolute; bottom: 26px; left: 0; right: 0; display: flex; gap: 10px; justify-content: center; z-index: 3; }
.hero-dots span { width: 26px; height: 2px; background: rgba(255,255,255,.4); cursor: pointer; transition: background .3s; }
.hero-dots span.on { background: #fff; }
@media (max-width: 720px) { .hero { height: 78vh; } }

/* ---------- 走马灯 ---------- */
.marquee { background: var(--ink); overflow: hidden; padding: 12px 0; }
.marquee-track { white-space: nowrap; color: rgba(255,255,255,.82); font-size: 12px; letter-spacing: .4em; animation: mq 36s linear infinite; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-25%); } }

/* ============================================================
   通用 section
   ============================================================ */
.sec { padding: 88px 5vw; max-width: 1280px; margin: 0 auto; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 42px; }
.sec-head h2 { font-size: clamp(22px, 2.6vw, 32px); letter-spacing: .14em; }
.sec-head .more { font-size: 12px; letter-spacing: .2em; color: var(--gold-deep); border-bottom: 1px solid var(--gold-soft); padding-bottom: 2px; }
@media (max-width: 720px) { .sec { padding: 56px 5vw; } }

/* ---------- 面料工艺板块 ---------- */
.fabric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.fabric-card { position: relative; overflow: hidden; aspect-ratio: 3/4; background: var(--bg-soft); }
.fabric-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s ease; }
.fabric-card:hover img { transform: scale(1.05); }
.fabric-card figcaption {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 18px;
    background: linear-gradient(to top, rgba(43,40,37,.62), transparent);
    color: #fff; font-size: 13px; letter-spacing: .2em;
}
.fabric-card figcaption b { display: block; font-weight: 500; margin-bottom: 2px; }
@media (max-width: 900px) { .fabric-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 产品网格 ---------- */
.grid-products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px 20px; }
@media (max-width: 1024px) { .grid-products { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .grid-products { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; } }
.look-card { display: block; }
.look-card .lc-img { position: relative; overflow: hidden; aspect-ratio: 400/564; background: var(--bg-soft); }
.look-card .lc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.look-card:hover .lc-img img { transform: scale(1.04); }
.look-card .lc-badge {
    position: absolute; top: 10px; left: 10px; font-size: 11px; letter-spacing: .15em;
    background: rgba(250,247,243,.92); color: var(--ink); padding: 3px 10px;
}
.look-card .lc-name { margin-top: 12px; font-size: 14px; letter-spacing: .1em; }
.look-card .lc-meta { font-size: 12px; color: var(--ink-faint); margin-top: 3px; letter-spacing: .06em; }
.look-card .lc-price { font-size: 13px; color: var(--gold-deep); margin-top: 5px; letter-spacing: .08em; }

/* ---------- 客照/案例条 ---------- */
.story-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.story-strip .ss-item { position: relative; overflow: hidden; aspect-ratio: 4/5; background: var(--bg-soft); }
.story-strip .ss-item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; transition: transform 1s ease; }
.story-strip .ss-item:hover img { transform: scale(1.04); }
.story-strip .ss-cap {
    position: absolute; inset: auto 0 0 0; padding: 16px;
    background: linear-gradient(to top, rgba(43,40,37,.6), transparent); color: #fff;
    font-size: 12px; letter-spacing: .18em;
}
@media (max-width: 720px) { .story-strip { grid-template-columns: 1fr; } }

/* ---------- 品牌承诺 ---------- */
.pledge { background: var(--bg-soft); }
.pledge-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.pledge-grid .pg-item { text-align: center; padding: 10px; }
.pledge-grid .pg-item b { display: block; font-weight: 500; letter-spacing: .2em; margin-bottom: 8px; font-size: 15px; }
.pledge-grid .pg-item span { font-size: 13px; color: var(--ink-soft); letter-spacing: .06em; }
@media (max-width: 720px) { .pledge-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   页面头（内页）
   ============================================================ */
.page-head { padding: 72px 5vw 40px; max-width: 1280px; margin: 0 auto; }
.page-head h1 { font-size: clamp(26px, 3.2vw, 38px); letter-spacing: .14em; margin-bottom: 10px; }
.page-head p { color: var(--ink-soft); letter-spacing: .08em; font-size: 14px; max-width: 720px; }

/* ============================================================
   产品中心：筛选器
   ============================================================ */
.filters { max-width: 1280px; margin: 0 auto; padding: 0 5vw 34px; display: grid; gap: 14px; }
.filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.filter-row .fr-label { font-size: 12px; color: var(--ink-faint); letter-spacing: .2em; min-width: 64px; }
.chip {
    border: 1px solid var(--line); background: var(--bg-card); color: var(--ink-soft);
    font-size: 12px; letter-spacing: .1em; padding: 7px 16px; transition: all .25s; border-radius: 999px;
}
.chip:hover { border-color: var(--gold-soft); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.count-bar { font-size: 12px; color: var(--ink-faint); letter-spacing: .12em; padding: 0 5vw; max-width: 1280px; margin: 0 auto 20px; }
.grid-entries { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1024px) { .grid-entries { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .grid-entries { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   产品详情页
   ============================================================ */
.pd { max-width: 1280px; margin: 0 auto; padding: 28px 5vw 70px; }
.pd-crumb { font-size: 12px; color: var(--ink-faint); letter-spacing: .1em; margin-bottom: 26px; }
.pd-crumb a:hover { color: var(--gold-deep); }
.pd-crumb i { margin: 0 8px; font-style: normal; color: var(--line); }
.pd-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 52px; align-items: start; }
.pd-main { overflow: hidden; background: var(--bg-soft); aspect-ratio: 400/564; }
.pd-main img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.pd-thumbs figure { position: relative; overflow: hidden; aspect-ratio: 400/500; background: var(--bg-soft); }
.pd-thumbs img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.pd-thumbs figcaption {
    position: absolute; left: 0; bottom: 0; right: 0; text-align: center;
    font-size: 10px; letter-spacing: .2em; color: #fff; padding: 4px;
    background: rgba(43,40,37,.55);
}
.pd-kicker { font-size: 11px; letter-spacing: .45em; color: var(--gold); margin-bottom: 12px; }
.pd-info h1 { font-size: clamp(22px, 2.6vw, 30px); letter-spacing: .1em; }
.pd-info .pd-en { font-size: 13px; color: var(--ink-faint); letter-spacing: .2em; margin-left: 10px; }
.pd-desc { color: var(--ink-soft); margin-top: 12px; letter-spacing: .06em; }
.pd-price { margin-top: 20px; font-size: 24px; color: var(--gold-deep); letter-spacing: .1em; }
.pd-price-note { font-size: 12px; color: var(--ink-faint); margin-left: 12px; letter-spacing: .1em; }
.pd-spec { margin-top: 26px; border-top: 1px solid var(--line); }
.pd-spec > div { display: flex; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.pd-spec dt { width: 64px; color: var(--ink-faint); letter-spacing: .2em; flex-shrink: 0; }
.pd-spec dd { color: var(--ink); letter-spacing: .04em; }
.pd-actions { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; }
.pd-actions .btn-dear, .pd-actions .btn-line { flex: 1; min-width: 140px; padding: 13px 10px; }
.pd-services { margin-top: 22px; display: flex; gap: 8px; flex-wrap: wrap; }
.pd-services span {
    font-size: 11px; letter-spacing: .15em; color: var(--gold-deep);
    border: 1px solid var(--gold-soft); padding: 4px 12px; border-radius: 999px;
}
.pd-section { max-width: 880px; margin: 44px auto 0; }
.pd-section h2 { font-size: 17px; letter-spacing: .22em; margin-bottom: 12px; padding-left: 14px; border-left: 2px solid var(--gold); }
.pd-section p { color: var(--ink-soft); font-size: 14px; letter-spacing: .04em; }
.pd-section a { color: var(--gold-deep); border-bottom: 1px solid var(--gold-soft); }
.pd-more { margin-top: 70px; }
.pd-more-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 26px; }
.pd-more-head h2 { font-size: 18px; letter-spacing: .2em; }
.pd-more-head a { font-size: 12px; color: var(--gold-deep); letter-spacing: .15em; }
.pd-more-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 900px) {
    .pd-grid { grid-template-columns: 1fr; gap: 28px; }
    .pd-more-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- 360 试穿 ---------- */
.try360 { max-width: 880px; margin: 56px auto 0; }
.try360 h2 { font-size: 17px; letter-spacing: .22em; margin-bottom: 14px; padding-left: 14px; border-left: 2px solid var(--gold); }
.try360 .t360-stage { background: linear-gradient(160deg, #F3EEE7 0%, #E9E2D7 100%); border: 1px solid var(--line); overflow: hidden; max-width: 440px; margin: 0 auto; }
.try360 canvas { width: 100%; aspect-ratio: 3 / 4; height: auto; display: block; }
.try360 .t360-views { justify-content: center; }
.try360 .t360-tip { text-align: center; font-size: 12px; color: var(--ink-faint); letter-spacing: .15em; margin-top: 10px; }
.t360-views { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

/* ============================================================
   内容页（品牌故事 / 服务 / 法务）
   ============================================================ */
.article { max-width: 820px; margin: 0 auto; padding: 0 5vw 80px; }
.article h2 { font-size: 17px; letter-spacing: .22em; margin: 40px 0 14px; padding-left: 14px; border-left: 2px solid var(--gold); }
.article p, .article li { color: var(--ink-soft); font-size: 14.5px; letter-spacing: .04em; margin-bottom: 10px; }
.article ul { padding-left: 20px; }
.article table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 13px; }
.article th, .article td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; letter-spacing: .05em; }
.article th { background: var(--bg-soft); font-weight: 500; letter-spacing: .12em; }
.article strong { color: var(--ink); font-weight: 500; }
.store-card { background: var(--bg-card); border: 1px solid var(--line); padding: 26px 28px; margin: 18px 0; }
.store-card b { letter-spacing: .15em; display: block; margin-bottom: 8px; }
.store-card p { margin-bottom: 4px; }
.faq-item { border-bottom: 1px solid var(--line); padding: 16px 0; }
.faq-item b { display: block; font-weight: 500; letter-spacing: .1em; margin-bottom: 6px; }
.faq-item p { margin-bottom: 0; }

/* ============================================================
   页脚
   ============================================================ */
.footer { background: var(--ink); color: rgba(255,255,255,.78); padding: 54px 5vw 34px; margin-top: 40px; }
.footer .f-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 26px; }
.footer .f-brand { font-family: var(--serif); font-size: 17px; letter-spacing: .22em; color: #fff; margin-bottom: 12px; }
.footer .f-brand-col p { font-size: 12px; letter-spacing: .08em; line-height: 2; color: rgba(255,255,255,.6); }
.footer h5 { font-size: 12px; letter-spacing: .3em; color: var(--gold-soft); margin-bottom: 14px; font-weight: 500; }
.footer ul { list-style: none; }
.footer li { margin-bottom: 9px; }
.footer li a { font-size: 12px; letter-spacing: .12em; color: rgba(255,255,255,.72); }
.footer li a:hover { color: #fff; }
.footer .f-base { max-width: 1280px; margin: 34px auto 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); font-size: 11px; letter-spacing: .1em; color: rgba(255,255,255,.45); display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.footer a[href*="beian"] { color: rgba(255,255,255,.45); }
@media (max-width: 860px) { .footer .f-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   浮动客服 FAB + 表单弹窗
   ============================================================ */
.fab { position: fixed; right: 18px; bottom: 22px; z-index: 95; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.fab-main {
    width: 54px; height: 54px; border-radius: 50%; border: none;
    background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 8px 24px rgba(43,40,37,.25); transition: transform .25s, background .25s;
}
.fab-main:hover { background: var(--gold-deep); transform: scale(1.05); }
.fab-menu { display: flex; flex-direction: column; gap: 8px; opacity: 0; pointer-events: none; transform: translateY(8px); transition: all .28s; }
.fab.open .fab-menu { opacity: 1; pointer-events: auto; transform: none; }
.fab-item {
    display: flex; align-items: center; gap: 8px; border: 1px solid var(--line);
    background: var(--bg-card); color: var(--ink); border-radius: 999px;
    font-size: 12px; letter-spacing: .12em; padding: 9px 16px;
    box-shadow: var(--shadow-soft); transition: all .25s;
}
.fab-item:hover { border-color: var(--gold-soft); color: var(--gold-deep); }
.fab-item svg { flex-shrink: 0; }

/* 弹窗 */
.modal-mask {
    position: fixed; inset: 0; background: rgba(43,40,37,.45); z-index: 99;
    display: none; align-items: center; justify-content: center; padding: 20px;
    backdrop-filter: blur(3px);
}
.modal-mask.open { display: flex; }
.modal {
    background: var(--bg); width: 100%; max-width: 400px; max-height: 88vh;
    overflow-y: auto; padding: 30px 28px; position: relative;
    box-shadow: var(--shadow); border-radius: 6px;
}
.modal h3 { font-size: 16px; letter-spacing: .2em; margin-bottom: 6px; }
.modal .m-sub { font-size: 12px; color: var(--ink-soft); letter-spacing: .08em; margin-bottom: 18px; }
.modal .m-close {
    position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
    border: none; background: transparent; font-size: 18px; color: var(--ink-faint);
}
.modal .m-close:hover { color: var(--ink); }
.modal input, .modal textarea {
    width: 100%; border: 1px solid var(--line); background: #fff; padding: 11px 13px;
    font-family: inherit; font-size: 13px; letter-spacing: .05em; margin-bottom: 12px; border-radius: 3px;
    color: var(--ink);
}
.modal input:focus, .modal textarea:focus { outline: none; border-color: var(--gold-soft); }
.modal .m-btn { width: 100%; }
.m-tip { display: block; font-size: 12px; min-height: 18px; margin-top: 4px; letter-spacing: .06em; }
.m-tip.ok { color: var(--gold-deep); }
.m-tip.err { color: #B4543E; }
.m-honey { position: absolute; left: -9999px; }
.m-field-label { font-size: 12px; color: var(--ink-faint); letter-spacing: .15em; margin: 2px 0 6px; display: block; }

/* ---------- Toast ---------- */
.toast {
    position: fixed; left: 50%; bottom: 90px; transform: translate(-50%, 14px);
    background: var(--ink); color: #fff; font-size: 13px; letter-spacing: .1em;
    padding: 11px 26px; border-radius: 999px; opacity: 0; pointer-events: none;
    transition: all .3s; z-index: 100; box-shadow: var(--shadow);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- 滚动渐入 ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .marquee-track { animation: none; }
    .hero-slides img { transition: opacity 1.6s ease; transform: none !important; }
}

/* ============================================================
   图鉴 / 在线试镜（内页工具组件）
   ============================================================ */
.page-wrap { max-width: 1320px; margin: 0 auto; padding: 0 5vw 80px; }
.page-head .desc { color: var(--ink-soft); font-size: 14px; letter-spacing: .08em; }

.atlas-layout { display: grid; grid-template-columns: 190px 1fr; gap: 34px; }
.atlas-tabs { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 80px; align-self: start; max-height: 78vh; overflow-y: auto; }
.atlas-tabs button {
    text-align: left; border: none; background: transparent; color: var(--ink-soft);
    font-size: 13px; letter-spacing: .08em; padding: 8px 12px; border-left: 2px solid transparent;
    transition: all .2s;
}
.atlas-tabs button:hover { color: var(--ink); background: var(--bg-soft); }
.atlas-tabs button.on { color: var(--ink); border-left-color: var(--gold); background: var(--bg-soft); }
.atlas-tabs .cnt { font-size: 10px; color: var(--ink-faint); margin-left: 4px; }
.atlas-hint { font-size: 13px; color: var(--ink-faint); letter-spacing: .08em; margin-bottom: 18px; min-height: 20px; }
.thumb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 14px; }
.thumb {
    background: var(--bg-card); border: 1px solid var(--line); padding: 8px 8px 10px;
    transition: border-color .25s, transform .25s;
}
.thumb:hover { border-color: var(--gold-soft); transform: translateY(-2px); }
.thumb canvas { width: 100%; height: auto; display: block; background: var(--bg-soft); aspect-ratio: 3/4; }
.thumb .t-zh { font-size: 12px; letter-spacing: .06em; margin-top: 7px; color: var(--ink); }
.thumb .t-en { font-size: 10px; color: var(--ink-faint); letter-spacing: .06em; }
@media (max-width: 860px) {
    .atlas-layout { grid-template-columns: 1fr; gap: 16px; }
    .atlas-tabs { flex-direction: row; flex-wrap: wrap; position: static; max-height: none; }
    .atlas-tabs button { border-left: none; border-bottom: 2px solid transparent; padding: 6px 10px; }
    .atlas-tabs button.on { border-bottom-color: var(--gold); }
}

/* 在线试镜 */
.design-layout { display: grid; grid-template-columns: 420px 1fr; gap: 34px; align-items: start; }
.design-side { display: flex; flex-direction: column; gap: 18px; }
.panel { background: var(--bg-card); border: 1px solid var(--line); padding: 18px 20px; }
.panel h4 { font-size: 13px; letter-spacing: .2em; margin-bottom: 14px; font-weight: 500; }
.panel .pm-en { font-size: 10px; color: var(--ink-faint); letter-spacing: .15em; margin-left: 6px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-row .chip { font-size: 12px; }
.style-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 260px; overflow-y: auto; }
.style-pill {
    border: 1px solid var(--line); background: var(--bg); text-align: left; padding: 8px 10px;
    transition: all .2s;
}
.style-pill:hover { border-color: var(--gold-soft); }
.style-pill.on { border-color: var(--gold); background: #fff; }
.style-pill .sp-name { font-size: 12px; letter-spacing: .04em; color: var(--ink); }
.style-pill .sp-era { font-size: 10px; color: var(--ink-faint); }
.body-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.body-grid label { display: block; font-size: 11px; color: var(--ink-faint); letter-spacing: .08em; margin-bottom: 3px; }
.body-grid input {
    width: 100%; border: 1px solid var(--line); background: #fff; padding: 7px 9px;
    font-family: inherit; font-size: 12px; border-radius: 3px;
}
.canvas-card { background: var(--bg-card); border: 1px solid var(--line); padding: 14px; position: sticky; top: 80px; }
.canvas-card canvas { width: 100%; height: auto; display: block; background: linear-gradient(160deg, #F3EEE7 0%, #E9E2D7 100%); }
.view-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.view-tabs button {
    border: 1px solid var(--line); background: var(--bg); color: var(--ink-soft);
    font-size: 11px; letter-spacing: .1em; padding: 6px 12px; border-radius: 999px;
}
.view-tabs button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.canvas-acts { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.act-btn {
    flex: 1; min-width: 90px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
    font-size: 12px; letter-spacing: .15em; padding: 10px; transition: all .2s;
}
.act-btn:hover { border-color: var(--gold); color: var(--gold-deep); }
.act-btn.primary { background: var(--ink); color: #fff; }
.act-btn.primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: #fff; }
.custom-extra { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.custom-extra .hint { font-size: 11px; color: var(--ink-faint); }
@media (max-width: 960px) {
    .design-layout { grid-template-columns: 1fr; }
    .canvas-card { position: static; }
    .style-strip { grid-template-columns: repeat(2, 1fr); max-height: none; }
}

/* ============================================================
   移动端专项优化
   ============================================================ */
@media (max-width: 720px) {
    /* 导航：两行（品牌 + 横向滚动菜单），避免挤压换行 */
    .nav {
        height: auto; padding: 9px 4vw 0; flex-wrap: wrap; gap: 0;
        align-items: center;
    }
    .nav .logo { width: 100%; justify-content: center; padding-bottom: 6px; }
    .nav .logo .zh { font-size: 15px; letter-spacing: .22em; white-space: nowrap; }
    .nav .links {
        width: 100%; gap: 20px; overflow-x: auto; padding: 0 0 8px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .nav .links::-webkit-scrollbar { display: none; }
    .nav .links a { font-size: 12px; letter-spacing: .06em; white-space: nowrap; padding: 4px 0; }

    .marquee { padding: 9px 0; }
    .marquee-track { font-size: 10px; letter-spacing: .2em; }
    .hero-kicker { font-size: 10px; letter-spacing: .3em; }
    .hero-sub { font-size: 12px; letter-spacing: .18em; }
    .hero-cta { gap: 12px; margin-top: 30px; }
    .hero-cta .btn-dear, .hero-cta .btn-line { padding: 11px 24px; font-size: 12px; }

    .sec-head { margin-bottom: 26px; }
    .sec-head h2 { font-size: 20px; }
    .sec-head .more { font-size: 11px; }

    /* 详情页 */
    .pd { padding: 20px 4vw 50px; }
    .pd-thumbs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .pd-actions .btn-dear, .pd-actions .btn-line { flex: 1 1 100%; }
    .pd-price { font-size: 21px; }
    .article h2 { margin-top: 32px; }
    .article table { display: block; overflow-x: auto; white-space: nowrap; }
    .fab { right: 12px; bottom: 16px; }
    .fab-main { width: 50px; height: 50px; }
    .fab-item { font-size: 11.5px; padding: 8px 14px; }
    .modal { padding: 26px 20px; }
    .filters { padding-bottom: 24px; }
    .filter-row .fr-label { min-width: 46px; font-size: 11px; }
    .chip { font-size: 11.5px; padding: 6px 13px; }
    .page-head { padding: 40px 5vw 26px; }
}

/* ============================================================
   v6 · 字体系统升级：西文 Cormorant Garamond 衬线 + 中文宋体标题
   ============================================================ */
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/cormorant-300.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/cormorant-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Cormorant Garamond';
    src: url('/assets/fonts/cormorant-500.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}

:root {
    --serif: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif;
    --song: 'Songti SC', 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
    --display: var(--serif), var(--song);
    --sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
}

body { letter-spacing: .03em; }

/* 标题：中文走宋体、西文走 Cormorant，一次设置全部生效 */
h1, h2, h3, h4, h5 { font-family: var(--display); font-weight: 400; letter-spacing: .1em; }

/* 导航品牌 */
.nav .logo { align-items: baseline; }
.nav .logo .zh {
    font-family: var(--display); font-size: 20px; letter-spacing: .22em; font-weight: 400;
}
.nav .logo .en {
    font-family: var(--serif); font-size: 13px; letter-spacing: .34em; font-weight: 500;
    color: var(--gold); text-transform: uppercase;
}
.nav .links a { font-size: 12.5px; letter-spacing: .18em; }

/* 通用 kicker：小号衬线大写，字距放宽更有版式感 */
.kicker {
    font-family: var(--serif); font-size: 13px; font-weight: 500;
    letter-spacing: .38em; color: var(--gold); margin-bottom: 12px;
}
.pd-kicker {
    font-family: var(--serif); font-size: 12.5px; font-weight: 500;
    letter-spacing: .36em; color: var(--gold); margin-bottom: 12px;
}

/* Hero */
.hero-kicker {
    font-family: var(--serif); font-size: 14px; font-weight: 400;
    letter-spacing: .46em; margin-bottom: 26px;
}
.hero-title {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(38px, 6.4vw, 78px); letter-spacing: .16em; line-height: 1.25;
}
.hero-title em { font-family: var(--serif); font-style: normal; letter-spacing: .1em; }
.hero-sub {
    font-family: var(--song); font-size: 15px; letter-spacing: .28em; font-weight: 400;
}

/* 区块标题 */
.sec-head h2 { font-family: var(--display); font-size: clamp(24px, 2.8vw, 36px); letter-spacing: .12em; }
.page-head h1 { font-family: var(--display); font-size: clamp(28px, 3.4vw, 42px); letter-spacing: .12em; }
.page-head p { letter-spacing: .06em; }

/* 走马灯：衬线大字距 */
.marquee-track { font-family: var(--serif); font-size: 14px; letter-spacing: .32em; font-weight: 400; }

/* 产品 */
.look-card .lc-name { font-family: var(--display); font-size: 15px; letter-spacing: .08em; }
.lc-price, .pd-price { font-family: var(--serif); letter-spacing: .06em; }
.pd-info h1 { font-family: var(--display); font-weight: 400; letter-spacing: .08em; }
.pd-info .pd-en { font-family: var(--serif); font-size: 15px; letter-spacing: .16em; }
.pd-section h2 { font-family: var(--display); letter-spacing: .18em; font-weight: 400; }
.fabric-card figcaption b { font-family: var(--display); letter-spacing: .1em; }
.fabric-card figcaption span { font-family: var(--serif); letter-spacing: .24em; }

/* 页脚 */
.footer .f-brand { font-family: var(--display); font-size: 20px; letter-spacing: .2em; }
.footer h5 { font-family: var(--display); font-size: 13px; letter-spacing: .26em; font-weight: 400; }
.footer .f-en { display: block; font-family: var(--serif); font-size: 11px; letter-spacing: .34em; color: var(--gold-soft); margin-top: 4px; }

/* 产品角标 */
.lc-badge { font-family: var(--display); letter-spacing: .12em; }

/* 图鉴 / 试镜小标题 */
.panel h4 { font-family: var(--display); letter-spacing: .18em; }
.thumb .t-zh { font-family: var(--display); letter-spacing: .05em; }
.thumb .t-en { font-family: var(--serif); letter-spacing: .1em; font-size: 11px; }

@media (max-width: 720px) {
    .nav .logo .zh { font-size: 16px; letter-spacing: .16em; }
    .nav .links a { font-size: 12px; letter-spacing: .06em; }
    .hero-kicker { font-size: 11px; letter-spacing: .3em; }
    .hero-title { font-size: clamp(32px, 9vw, 44px); letter-spacing: .1em; }
    .hero-sub { font-size: 12.5px; letter-spacing: .2em; }
    .kicker { font-size: 11.5px; letter-spacing: .28em; }
    .sec-head h2 { font-size: 21px; letter-spacing: .1em; }
    .marquee-track { font-size: 12px; letter-spacing: .24em; }
}

/* ============================================================
   v6 · 婚纱顾问（右下角常驻入口 + 侧滑顾问面板）
   ============================================================ */
body.cc-lock { overflow: hidden; }

.cc-mask {
    position: fixed; inset: 0; z-index: 96;
    background: rgba(35, 31, 27, .32); backdrop-filter: blur(2px);
    opacity: 0; pointer-events: none; transition: opacity .45s ease;
}
.cc-mask.show { opacity: 1; pointer-events: auto; }

/* ---- 常驻入口：羊皮纸胶囊 ---- */
.cc-fab {
    position: fixed; right: 0; bottom: 34px; z-index: 95;
    display: flex; align-items: center; gap: 13px;
    padding: 12px 26px 12px 15px;
    background: linear-gradient(120deg, #FFFDF9 0%, #F6EEE0 100%);
    border: 1px solid #E5D8C1; border-right: 0;
    border-radius: 999px 0 0 999px;
    box-shadow: -8px 14px 40px rgba(43, 40, 37, .16);
    transition: transform .38s cubic-bezier(.2,.8,.3,1), box-shadow .38s;
}
.cc-fab:hover { transform: translateX(-7px); box-shadow: -12px 18px 48px rgba(43, 40, 37, .22); }
.cc-fab.hide { transform: translateX(135%); }
.cc-fab-ico {
    width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: #2B2825; color: #D9BC8C;
    box-shadow: 0 4px 12px rgba(43, 40, 37, .28);
}
.cc-fab-txt { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.cc-fab-txt b {
    font-family: var(--display); font-size: 14px; font-weight: 400;
    letter-spacing: .2em; color: #2B2825;
}
.cc-fab-txt em {
    font-family: var(--serif); font-style: normal; font-size: 9.5px;
    letter-spacing: .2em; text-transform: uppercase; color: #A98A5C; margin-top: 4px;
}
.cc-fab-dot {
    position: absolute; left: 42px; bottom: 14px; width: 9px; height: 9px; border-radius: 50%;
    background: #86B894; border: 2px solid #FBF7F1; box-sizing: content-box;
    animation: ccp 2.6s ease-in-out infinite;
}
@keyframes ccp {
    0%, 100% { box-shadow: 0 0 0 0 rgba(134, 184, 148, .55); }
    50% { box-shadow: 0 0 0 6px rgba(134, 184, 148, 0); }
}

/* ---- 抽屉 ---- */
.cc {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: 97;
    width: 392px; max-width: 100vw; display: flex; flex-direction: column;
    background: #FBF7F1;
    box-shadow: -24px 0 70px rgba(43, 40, 37, .22);
    transform: translateX(104%);
    transition: transform .62s cubic-bezier(.19,.85,.24,1);
}
.cc.open { transform: none; }

.cc-head {
    position: relative; overflow: hidden; color: #fff;
    background: linear-gradient(150deg, #2B2723 0%, #3E362C 58%, #2A2621 100%);
    padding: 35px 30px 31px;
}
.cc-head::before {
    content: ''; position: absolute; right: -78px; top: -96px; width: 236px; height: 236px;
    border: 1px solid rgba(198, 161, 91, .34); border-radius: 50%;
}
.cc-head::after {
    content: ''; position: absolute; right: -8px; top: -26px; width: 136px; height: 136px;
    border: 1px solid rgba(198, 161, 91, .18); border-radius: 50%;
}
.cc-brand {
    position: relative; font-family: var(--serif); font-size: 10.5px; font-weight: 500;
    letter-spacing: .4em; text-transform: uppercase; color: #D9BC8C;
}
.cc-head h3 {
    position: relative; margin-top: 15px; font-family: var(--display);
    font-size: 30px; font-weight: 400; letter-spacing: .16em;
}
.cc-status {
    position: relative; display: flex; align-items: center; gap: 7px;
    margin-top: 13px; font-size: 11px; letter-spacing: .14em; color: rgba(255, 255, 255, .58);
}
.cc-status i {
    width: 5px; height: 5px; border-radius: 50%; background: #86B894;
    animation: ccp 2.6s ease-in-out infinite;
}
.cc-close {
    position: absolute; top: 15px; right: 15px; z-index: 3;
    width: 30px; height: 30px; border-radius: 50%; font-size: 17px; line-height: 1;
    border: 1px solid rgba(255, 255, 255, .24); background: transparent; color: rgba(255, 255, 255, .8);
    transition: all .25s;
}
.cc-close:hover { background: rgba(255, 255, 255, .14); color: #fff; border-color: rgba(255,255,255,.45); }

.cc-body { flex: 1; overflow-y: auto; padding: 26px 30px 18px; -webkit-overflow-scrolling: touch; }
.cc-hi {
    font-family: var(--display); font-size: 14.5px; line-height: 2;
    color: #4A443C; letter-spacing: .04em;
}
.cc-quick { margin: 20px 0 22px; border-top: 1px solid #E7DDCC; }
.cc-quick button {
    position: relative; width: 100%; text-align: left; background: transparent;
    border: 0; border-bottom: 1px solid #E7DDCC; padding: 12px 26px 12px 0;
    font-family: var(--sans); font-size: 12.5px; letter-spacing: .04em; color: #5C554C;
    transition: color .25s, padding-left .25s;
}
.cc-quick button::after {
    content: '→'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    color: #C0A577; font-size: 13px; transition: transform .25s;
}
.cc-quick button:hover { color: #96784A; padding-left: 5px; }
.cc-quick button:hover::after { transform: translateY(-50%) translateX(3px); }
.cc-quick button.picked { color: #96784A; }

.cc-label {
    display: block; margin: 14px 0 5px; font-family: var(--serif);
    font-size: 10.5px; font-weight: 500; letter-spacing: .3em;
    text-transform: uppercase; color: #A08B6C;
}
.cc-form input[type="text"], .cc-form textarea {
    width: 100%; border: 0; border-bottom: 1px solid #DCD0BA; background: transparent;
    padding: 8px 0; font-family: var(--sans); font-size: 13.5px; color: #2B2825;
    letter-spacing: .03em; resize: none; border-radius: 0;
}
.cc-form input[type="text"]:focus, .cc-form textarea:focus {
    outline: none; border-bottom-color: #B08D57;
}
.cc-form ::placeholder { color: #B8AE9F; font-size: 12.5px; }
.cc-send {
    width: 100%; margin-top: 22px; display: flex; align-items: center; justify-content: center; gap: 10px;
    padding: 13px; background: #2B2825; color: #F6EEE0;
    border: 1px solid #2B2825; font-size: 12.5px; letter-spacing: .24em;
    transition: background .3s, border-color .3s;
}
.cc-send:hover { background: #96784A; border-color: #96784A; }
.cc-send svg { transition: transform .3s; }
.cc-send:hover svg { transform: translateX(4px); }
.cc-tip { display: block; min-height: 16px; margin-top: 10px; font-size: 11.5px; letter-spacing: .05em; }
.cc-note {
    margin-top: 18px; padding-top: 14px; border-top: 1px solid #EADFCE;
    font-family: var(--serif); font-size: 12px; line-height: 1.9;
    letter-spacing: .12em; color: #A79B89;
}
.cc-tip.ok { color: #96784A; }
.cc-tip.err { color: #B4543E; }
.cc-honey { position: absolute; left: -9999px; }

.cc-foot {
    display: flex; flex-direction: column; align-items: stretch; gap: 11px;
    padding: 16px 30px 18px; background: #F7F1E7; border-top: 1px solid #E7DDCC;
}
.cc-foot .cc-tel {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--sans); font-size: 14.5px; font-weight: 500;
    letter-spacing: .1em; color: #2B2825;
}
.cc-foot .cc-tel svg { color: #B08D57; }
.cc-links { display: flex; align-items: center; gap: 12px; }
.cc-links i { width: 1px; height: 10px; background: #D8CCB6; }
.cc-foot button {
    background: none; border: 0; padding: 0; font-family: var(--sans);
    font-size: 11.5px; letter-spacing: .12em; color: #8B7350; transition: color .25s;
}
.cc-foot a:hover, .cc-foot button:hover { color: #2B2825; }

@media (max-width: 720px) {
    .cc {
        top: auto; left: 0; width: 100%; height: 88vh;
        border-radius: 20px 20px 0 0; transform: translateY(104%);
        box-shadow: 0 -18px 50px rgba(43, 40, 37, .26);
    }
    .cc.open { transform: none; }
    .cc-head { padding: 22px 22px 20px; }
    .cc-head h3 { font-size: 22px; margin-top: 9px; }
    .cc-body { padding: 20px 22px 14px; }
    .cc-hi { font-size: 13.5px; line-height: 1.9; }
    .cc-foot { padding: 13px 22px 16px; gap: 10px; }
    .cc-quick button { padding: 11px 24px 11px 0; font-size: 12px; }
    .cc-fab { bottom: 20px; padding: 0; width: 54px; height: 54px; border-radius: 50%; border-right: 1px solid var(--line); justify-content: center; }
    .cc-fab-ico { width: 100%; height: 100%; background: transparent; color: var(--ink); box-shadow: none; }
    .cc-fab-ico svg { width: 22px; height: 22px; }
    .cc-fab-txt { display: none; }
    .cc-fab-dot { top: 9px; right: 9px; }
}

/* v6 收尾微调 */
.pd-desc, .article p, .sec p.lead { line-height: 1.95; letter-spacing: .035em; }
.pd-spec dt { font-family: var(--serif); letter-spacing: .18em; font-size: 12.5px; }
.pd-spec dd { letter-spacing: .03em; }
@media (max-width: 720px) {
    .cc-note { display: none; }
    .cc-body { padding-bottom: 20px; }
}

/* ============================================================
   v7 · 国际婚纱官网风格层（Pronovias / Grace Loves Lace 模式）
   通知条 / 双入口条 / 编辑式卡片 / 寄语 / 数字条 / 全宽 CTA
   ============================================================ */

/* ---- 顶部通知条 ---- */
.announce {
    background: var(--ink); color: rgba(255, 255, 255, .82);
    text-align: center; font-size: 11px; letter-spacing: .22em;
    padding: 8px 4vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Hero：滚动提示 + 副标语 ---- */
.hero-sub { line-height: 2; }
.hero-scroll {
    position: absolute; bottom: 24px; right: 28px; z-index: 3;
    writing-mode: vertical-rl; display: flex; flex-direction: column; align-items: center; gap: 8px;
    color: rgba(255, 255, 255, .72); font-family: var(--serif);
    font-size: 10px; letter-spacing: .4em; text-transform: uppercase;
}
.hero-scroll span { width: 1px; height: 34px; background: linear-gradient(to bottom, rgba(255,255,255,.8), transparent); }
@media (max-width: 720px) { .hero-scroll { display: none; } }

/* ---- 双入口条（预约 / 试镜） ---- */
.quiz-bar {
    display: flex; align-items: stretch; justify-content: center; gap: 0;
    max-width: 1280px; margin: 56px auto 0; padding: 0 5vw;
}
.qb-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center;
    padding: 30px 24px; border: 1px solid var(--line); background: var(--bg-card);
}
.qb-item:first-child { border-right: 0; }
.qb-item b {
    font-family: var(--serif); font-size: 14px; font-weight: 500;
    letter-spacing: .3em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px;
}
.qb-item span { font-size: 12.5px; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 18px; }
.qb-go {
    display: inline-block; border: 1px solid var(--ink); background: transparent; color: var(--ink);
    padding: 10px 34px; font-size: 12px; letter-spacing: .3em; transition: all .3s; font-family: var(--sans);
}
.qb-go:hover { background: var(--ink); color: #fff; }
.qb-sep { width: 1px; background: var(--line); }
@media (max-width: 720px) {
    .quiz-bar { flex-direction: column; gap: 12px; margin-top: 34px; }
    .qb-item:first-child { border-right: 1px solid var(--line); }
    .qb-sep { display: none; }
}

/* ---- 区块间距整体拉大 ---- */
.sec { padding: 104px 5vw 84px; }

/* ---- 编辑式产品卡（去卡片化） ---- */
.grid-products { gap: 46px 34px; }
.look-card {
    border: 0; background: transparent; display: block; text-align: center;
}
.look-card .lc-img {
    position: relative; overflow: hidden; aspect-ratio: 400/500;
    background: var(--bg-soft); box-shadow: none;
    transition: transform .45s ease, box-shadow .45s ease;
}
.look-card:hover .lc-img { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(43, 40, 37, .14); }
.look-card .lc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; }
.look-card:hover .lc-img img { transform: scale(1.045); }
.look-card .lc-badge {
    position: absolute; top: 12px; left: 12px; background: rgba(255, 253, 249, .92);
    color: var(--ink); font-size: 10.5px; letter-spacing: .2em; padding: 4px 12px;
}
.look-card .lc-name { margin-top: 16px; font-size: 15px; letter-spacing: .1em; }
.look-card .lc-meta { margin-top: 5px; font-size: 11.5px; letter-spacing: .08em; color: var(--ink-faint); }
.lc-ask {
    margin-top: 9px; font-family: var(--serif); font-size: 12px; font-weight: 500;
    letter-spacing: .2em; color: var(--gold-deep);
}
.lc-ask::before { content: '— '; }
.look-card:hover .lc-name { color: var(--gold-deep); }

/* ---- 顾问寄语 ---- */
.quotes { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; max-width: 1040px; margin: 0 auto; }
.quotes blockquote { position: relative; padding: 0 8px; }
.quotes blockquote::before {
    content: '“'; position: absolute; top: -34px; left: -6px;
    font-family: var(--serif); font-size: 64px; line-height: 1; color: var(--gold-soft); opacity: .55;
}
.quotes p {
    font-family: var(--display); font-size: clamp(17px, 2vw, 21px);
    line-height: 2; letter-spacing: .06em; color: var(--ink); text-align: center;
}
.quotes cite {
    display: block; margin-top: 18px; font-style: normal; text-align: center;
    font-size: 11px; letter-spacing: .26em; color: var(--ink-faint);
}
@media (max-width: 720px) { .quotes { grid-template-columns: 1fr; gap: 40px; } }

/* ---- 数字条 ---- */
.stats { background: var(--ink); color: #fff; padding: 64px 5vw 58px; }
.stats-grid {
    max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 30px; text-align: center;
}
.stats-grid b {
    display: block; font-family: var(--serif); font-weight: 300;
    font-size: clamp(46px, 5vw, 74px); line-height: 1; color: var(--gold-soft);
}
.stats-grid span {
    display: block; margin-top: 14px; font-size: 12px; letter-spacing: .18em;
    color: rgba(255, 255, 255, .72);
}
.stats-note {
    margin-top: 40px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, .14);
    text-align: center; font-family: var(--serif); font-size: 13px;
    letter-spacing: .32em; color: rgba(255, 255, 255, .55);
}
@media (max-width: 720px) {
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 16px; }
    .stats { padding: 48px 6vw 44px; }
}

/* ---- 全宽收尾 CTA ---- */
.cta-final { position: relative; height: 74vh; min-height: 480px; overflow: hidden; }
.cta-final > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.cta-shade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(43,40,37,.18), rgba(43,40,37,.55)); }
.cta-content {
    position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
    align-items: center; justify-content: center; text-align: center; color: #fff; padding: 0 6vw;
}
.cta-content h2 {
    font-family: var(--display); font-size: clamp(30px, 4.6vw, 54px);
    letter-spacing: .18em; margin: 14px 0 16px; text-shadow: 0 2px 26px rgba(43, 40, 37, .4);
}
.cta-content p { font-family: var(--song); font-size: 15px; letter-spacing: .24em; opacity: .94; }
.cta-btns { margin-top: 38px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.cta-btns .btn-dear { background: #fff; border-color: #fff; color: var(--ink); }
.cta-btns .btn-dear:hover { background: var(--gold-soft); border-color: var(--gold-soft); }
.cta-ghost { border-color: rgba(255,255,255,.85); color: #fff; }
.cta-ghost:hover { border-color: #fff; background: rgba(255,255,255,.12); color: #fff; }

/* ---- 详情页价格区：留言咨询 ---- */
.pd-price {
    margin-top: 20px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
    font-family: var(--display); font-size: 22px; letter-spacing: .08em; color: var(--gold-deep);
}
.pd-ask-mark {
    font-family: var(--serif); font-style: normal; font-size: 11px; font-weight: 500;
    letter-spacing: .32em; text-transform: uppercase; color: var(--ink-faint);
    border: 1px solid var(--line); padding: 3px 10px; margin-right: 6px; align-self: center;
}
.pd-price .pd-price-note { font-family: var(--sans); font-size: 12px; width: 100%; margin-left: 0; }

@media (max-width: 720px) {
    .sec { padding: 66px 5vw 54px; }
    .grid-products { gap: 34px 16px; }
    .announce { font-size: 10px; letter-spacing: .14em; }
    .pd-price { font-size: 19px; }
}

/* v7 修正 */
.footer { margin-top: 0; }
.stats-grid b {
    line-height: 1.05;
    font-feature-settings: "lnum" 1, "kern" 1;
    font-variant-numeric: lining-nums;
}
.quotes p { font-size: clamp(16px, 1.7vw, 19px); text-wrap: balance; }
.quiz-bar { margin-bottom: 78px; }
@media (max-width: 720px) {
    .quiz-bar { margin-bottom: 46px; }
    .quotes p { font-size: 16px; line-height: 1.95; }
}

@media (max-width: 720px) {
    .qb-item b { font-size: 11.5px; letter-spacing: .18em; white-space: nowrap; }
    .qb-item { padding: 24px 16px; }
    .qb-item span { font-size: 12px; letter-spacing: .06em; }
    .announce { white-space: normal; line-height: 1.7; padding: 7px 5vw; }
}

/* 浅色大片上的可读性保障 */
.hero-title { text-shadow: 0 2px 30px rgba(43,40,37,.55), 0 1px 4px rgba(43,40,37,.35); }
.hero-sub, .hero-kicker { text-shadow: 0 1px 14px rgba(43,40,37,.5); }

/* ============================================================
   v8 · 奶油法式（French Cream）整站视觉重构
   象牙白 / 燕麦 / 香槟 / 胭脂 · 细衬线 + 手写体 · 拱形画框 · 大留白
   ============================================================ */
@font-face {
    font-family: 'Parisienne';
    src: url('/assets/fonts/parisienne-400.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}

:root {
    --paper: #FDFAF5;
    --paper-2: #F7EFE4;
    --paper-3: #F0E2D4;
    --bg: #FDFAF5;
    --bg-soft: #F7EFE4;
    --bg-card: #FFFDF9;
    --ink: #3A322B;
    --ink-soft: #6E6154;
    --ink-faint: #A79785;
    --gold: #C0A077;
    --gold-deep: #A27E55;
    --gold-soft: #E2C9A8;
    --blush: #EBD3C8;
    --rose: #C79C8E;
    --line: #E8DAC9;
    --line-soft: #F2E8DA;
    --shadow: 0 20px 60px rgba(90, 70, 50, .10);
    --shadow-soft: 0 8px 26px rgba(90, 70, 50, .07);
    --radius: 2px;
    --script: 'Parisienne', 'Cormorant Garamond', cursive;
    --serif: 'Cormorant Garamond', Georgia, serif;
    --song: 'Songti SC', 'Source Han Serif SC', 'Noto Serif CJK SC', 'STSong', 'SimSun', serif;
    --display: var(--serif), var(--song);
    --sans: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
}

body {
    background: var(--paper); color: var(--ink);
    font-size: 14.5px; line-height: 1.95; letter-spacing: .045em;
    font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "kern" 1;
}
/* 纸感颗粒：让纯色底有印刷质感 */
body::after {
    content: ''; position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .028;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}
::selection { background: var(--blush); color: var(--ink); }

h1, h2, h3, h4, h5 { font-family: var(--display); font-weight: 300; letter-spacing: .06em; line-height: 1.35; }

/* ---- 手写体标签 ---- */
.kicker {
    font-family: var(--script); font-size: clamp(22px, 2.2vw, 27px); font-weight: 400;
    letter-spacing: .015em; text-transform: none; color: var(--gold); margin-bottom: 8px; line-height: 1.1;
}
.pd-kicker {
    font-family: var(--script); font-size: 23px; letter-spacing: .01em;
    color: var(--gold); margin-bottom: 8px; text-transform: none;
}

/* ---- 按钮：柔和胶囊 ---- */
.btn-dear, .btn-line {
    border-radius: 999px; padding: 15px 38px; font-size: 12.5px; letter-spacing: .22em;
    font-family: var(--sans); transition: all .35s ease;
}
.btn-dear { background: var(--ink); border: 1px solid var(--ink); color: #FDFAF5; }
.btn-dear:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn-line { background: transparent; border: 1px solid rgba(58, 50, 43, .26); color: var(--ink); }
.btn-line:hover { border-color: var(--gold); color: var(--gold-deep); background: transparent; }

/* ============================================================
   通知条 + 中心式导航（couture 布局）
   ============================================================ */
.announce {
    background: var(--paper-3); color: #7C6852; border-bottom: 1px solid rgba(58, 50, 43, .04);
    font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em;
    padding: 9px 5vw; text-align: center;
}
.nav {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
    height: auto; padding: 20px 4.5vw;
    background: rgba(253, 250, 245, .93); backdrop-filter: blur(16px) saturate(1.1);
    border-bottom: 1px solid var(--line-soft);
}
.nav-left, .nav-right { display: flex; align-items: center; gap: 30px; }
.nav-right { justify-content: flex-end; gap: 24px; }
.nav a[data-k] {
    position: relative; font-family: var(--sans); font-size: 11.5px;
    letter-spacing: .22em; color: var(--ink-soft); padding: 4px 0;
}
.nav a[data-k]::after {
    content: ''; position: absolute; left: 50%; right: 50%; bottom: -1px;
    height: 1px; background: var(--gold); transition: left .35s ease, right .35s ease;
}
.nav a[data-k]:hover, .nav a[data-k].on { color: var(--ink); }
.nav a[data-k]:hover::after, .nav a[data-k].on::after { left: 0; right: 0; }

.nav .logo { display: flex; flex-direction: column; align-items: center; gap: 3px; line-height: 1; }
.nav .logo .zh {
    font-family: var(--display); font-size: 23px; font-weight: 300;
    letter-spacing: .34em; text-indent: .34em; color: var(--ink);
}
.nav .logo .en {
    font-family: var(--serif); font-size: 14px; font-weight: 500;
    letter-spacing: .58em; text-indent: .58em; color: var(--ink); text-transform: uppercase;
}
.nav .logo em {
    font-family: var(--script); font-style: normal; font-size: 15px;
    letter-spacing: .02em; color: var(--gold); margin-top: 1px;
}
.nav-book {
    background: transparent; border: 1px solid rgba(58, 50, 43, .3); color: var(--ink);
    border-radius: 999px; padding: 9px 22px; font-size: 11px; letter-spacing: .2em;
    transition: all .35s ease;
}
.nav-book:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ============================================================
   首页 Hero：奶油底 + 拱形画框
   ============================================================ */
.hero {
    position: relative; height: auto; min-height: 0; overflow: visible;
    background:
        radial-gradient(90% 80% at 82% 8%, #FBF2E6 0%, rgba(253, 250, 245, 0) 62%),
        var(--paper);
    padding: 46px 5vw 0;
}
.hero-inner {
    max-width: 1320px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(320px, .92fr) minmax(340px, 1fr);
    gap: 5vw; align-items: center;
}
.hero-copy { max-width: 520px; padding: 26px 0 54px; }
.hero-script {
    display: block; font-family: var(--script); font-size: clamp(26px, 2.6vw, 34px);
    color: var(--gold); line-height: 1; margin-bottom: 20px;
}
.hero-title {
    font-family: var(--display); font-weight: 300; text-shadow: none;
    font-size: clamp(40px, 5vw, 70px); letter-spacing: .05em; line-height: 1.14; color: var(--ink);
}
.hero-title em {
    font-family: var(--serif); font-style: italic; font-weight: 300;
    letter-spacing: .02em; color: var(--gold-deep); margin-left: .1em; text-shadow: none;
}
.hero-rule { display: block; width: 58px; height: 1px; background: var(--gold); margin: 28px 0 22px; }
.hero-lede {
    font-family: var(--song); font-size: clamp(15px, 1.45vw, 17.5px);
    line-height: 2.15; letter-spacing: .12em; color: var(--ink-soft); text-shadow: none;
}
.hero-note { margin-top: 16px; font-family: var(--sans); font-size: 10.5px; letter-spacing: .26em; color: var(--ink-faint); }
.hero-cta { margin-top: 40px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.hero-cta .btn-line { border-color: rgba(58, 50, 43, .24); color: var(--ink); }
.hero-cta .btn-dear { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.hero-cta .btn-dear:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

.hero-figure { position: relative; margin: 0; display: flex; flex-direction: column; align-items: flex-start; }
.hero-arch {
    position: relative; width: 100%; max-width: 540px; aspect-ratio: 4 / 5;
    overflow: hidden; background: var(--paper-2);
    border-radius: 50% 50% 2px 2px / 34% 34% 2px 2px;
    box-shadow: 0 34px 80px rgba(90, 70, 50, .14);
}
.hero-arch::after {
    content: ''; position: absolute; inset: 13px; z-index: 3; pointer-events: none;
    border: 1px solid rgba(255, 252, 246, .55);
    border-radius: 50% 50% 1px 1px / 34% 34% 1px 1px;
}
.hero-slides, .hero-slides img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-slides img {
    object-fit: cover; opacity: 0; transform: scale(1.06);
    transition: opacity 1.5s ease, transform 10s ease;
    filter: saturate(.88) contrast(.97) brightness(1.04) sepia(.06);
}
.hero-slides img.on { opacity: 1; transform: scale(1); }
.hero-cap {
    width: 100%; max-width: 540px; margin-top: 18px; display: flex;
    justify-content: flex-start; gap: 26px;
    font-family: var(--serif); font-size: 10.5px; letter-spacing: .3em;
    text-transform: uppercase; color: var(--ink-faint);
}
.hero-dots {
    position: static; width: 100%; max-width: 540px; margin-top: 14px;
    display: flex; gap: 8px; justify-content: flex-start;
}
.hero-dots span { width: 26px; height: 1px; background: var(--line); transition: background .4s; }
.hero-dots span.on { background: var(--gold); }
.hero-scroll { display: none; }

/* ============================================================
   双入口条：无边框分栏
   ============================================================ */
.quiz-bar {
    max-width: 1320px; margin: 74px auto 0; padding: 0 5vw;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.qb-item {
    align-items: flex-start; text-align: left; background: transparent; border: 0;
    padding: 38px 40px 34px 0;
}
.qb-item:first-child { border-right: 1px solid var(--line); padding-right: 46px; margin-right: 46px; }
.qb-item b {
    font-family: var(--script); font-size: 26px; font-weight: 400; text-transform: none;
    letter-spacing: .01em; color: var(--gold-deep); margin-bottom: 6px; line-height: 1.2;
}
.qb-item span { font-size: 12.5px; letter-spacing: .12em; color: var(--ink-soft); margin-bottom: 20px; }
.qb-go {
    border-radius: 999px; border: 1px solid rgba(58, 50, 43, .26); color: var(--ink);
    padding: 11px 30px; font-size: 11.5px; letter-spacing: .24em; background: transparent;
}
.qb-go:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.qb-sep { display: none; }

/* ============================================================
   走马灯：奶油细条
   ============================================================ */
.marquee { background: var(--paper-2); border-bottom: 1px solid var(--line); padding: 10px 0; margin-top: 70px; }
.marquee-track {
    font-family: var(--serif); font-style: italic; font-size: 12px;
    letter-spacing: .3em; color: rgba(58, 50, 43, .48);
}

/* ============================================================
   通用区块
   ============================================================ */
.sec { max-width: 1320px; padding: 112px 5vw 92px; }
.sec-head { margin-bottom: 56px; align-items: flex-end; }
.sec-head h2 {
    font-family: var(--display); font-weight: 300;
    font-size: clamp(26px, 2.9vw, 38px); letter-spacing: .07em;
}
.sec-head .more {
    font-family: var(--serif); font-style: italic; font-size: 14px; letter-spacing: .08em;
    color: var(--gold-deep); border-bottom: 0; padding-bottom: 3px; position: relative;
}
.sec-head .more::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold-soft);
}

/* ---- 面料工艺：拱形画框 ---- */
.fabric-grid { grid-template-columns: repeat(4, 1fr); gap: 30px; }
.fabric-card {
    position: static; aspect-ratio: auto; overflow: visible; background: none;
    display: flex; flex-direction: column;
}
.fabric-card img {
    width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
    border-radius: 50% 50% 2px 2px / 31% 31% 2px 2px;
    filter: saturate(.9) brightness(1.03) sepia(.03);
    box-shadow: 0 18px 46px rgba(90, 70, 50, .10);
    transition: transform .9s cubic-bezier(.2, .7, .2, 1), box-shadow .5s;
}
.fabric-card:hover img { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(90, 70, 50, .16); }
.fabric-card figcaption {
    position: static; background: none; color: var(--ink-soft);
    padding: 18px 4px 0; text-align: center; font-size: 12px; letter-spacing: .1em;
}
.fabric-card figcaption b {
    display: block; font-family: var(--display); font-weight: 400;
    font-size: 16px; letter-spacing: .16em; color: var(--ink); margin-bottom: 5px;
}
.fabric-card figcaption span { font-family: var(--sans); font-size: 11px; letter-spacing: .12em; color: var(--ink-faint); }

/* ---- 产品卡：画廊式三列 ---- */
.grid-products { grid-template-columns: repeat(3, 1fr); gap: 60px 42px; }
.grid-entries { grid-template-columns: repeat(5, 1fr); gap: 30px 22px; }
.look-card { text-align: center; }
.look-card .lc-img {
    aspect-ratio: 3 / 4; overflow: hidden; background: var(--paper-2);
    border-radius: 2px; box-shadow: none; transform: none;
}
.look-card:hover .lc-img { transform: none; box-shadow: none; }
.look-card .lc-img::after { display: none; }
.look-card .lc-img img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(.2) sepia(.1) saturate(.92) contrast(.97) brightness(1.04);
    transition: transform 1.2s cubic-bezier(.2, .7, .2, 1), filter .6s;
}
.look-card:hover .lc-img img { transform: scale(1.04); filter: saturate(.96) brightness(1.05); }
.look-card .lc-badge {
    inset: 12px auto auto 12px; top: 12px; left: 12px; right: auto; bottom: auto;
    background: rgba(253, 250, 245, .9); color: var(--ink); text-align: center;
    padding: 5px 12px; border-radius: 999px;
    font-family: var(--serif); font-size: 9.5px; font-weight: 500;
    letter-spacing: .18em; text-transform: none; z-index: 2;
    backdrop-filter: blur(4px); text-shadow: none;
}
.look-card .lc-name {
    margin-top: 20px; font-family: var(--display); font-weight: 400;
    font-size: 16.5px; letter-spacing: .14em;
}
.look-card .lc-meta { margin-top: 3px; font-size: 11px; letter-spacing: .16em; color: var(--ink-faint); }
.lc-ask {
    margin-top: 9px; font-family: var(--serif); font-style: italic; font-weight: 400;
    font-size: 12.5px; letter-spacing: .1em; color: var(--gold-deep);
}
.lc-ask::before { content: ''; }
.look-card:hover .lc-name { color: var(--gold-deep); }
.grid-entries .lc-name { font-size: 15px; letter-spacing: .1em; }
.grid-entries .lc-ask, .grid-entries .lc-meta { display: none; }

/* ---- 客照条 ---- */
.story-strip { gap: 28px; }
.story-strip .ss-item {
    aspect-ratio: auto; display: flex; flex-direction: column; overflow: visible; background: none;
}
.story-strip .ss-item img {
    width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 26%;
    border-radius: 2px; filter: saturate(.9) brightness(1.03) sepia(.04);
    box-shadow: 0 18px 46px rgba(90, 70, 50, .09);
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}
.story-strip .ss-item:hover img { transform: translateY(-5px); }
.story-strip .ss-cap {
    position: static; background: none; color: var(--ink-soft); padding: 16px 2px 0;
    font-family: var(--serif); font-style: italic; font-size: 12.5px;
    letter-spacing: .12em; text-align: center;
}

/* ---- 顾问寄语：胭脂奶油块 ---- */
.quotes-sec { max-width: none; background: var(--paper-2); padding: 100px 5vw 96px; }
.quotes-sec .kicker { text-align: center; }
.quotes-sec h2 { text-align: center; margin-bottom: 54px; }
.quotes { gap: 64px; max-width: 1000px; }
.quotes blockquote::before {
    content: '”'; font-family: var(--script); font-size: 84px; line-height: .8;
    color: var(--rose); opacity: .45; top: -26px; left: -10px;
}
.quotes p {
    font-family: var(--display); font-weight: 300; font-size: clamp(16px, 1.7vw, 20px);
    line-height: 2.1; letter-spacing: .1em; color: var(--ink);
}
.quotes cite {
    font-family: var(--serif); font-style: italic; font-size: 12px;
    letter-spacing: .16em; color: var(--ink-faint); text-transform: none;
}

/* ---- 数字条：奶油底细线 ---- */
.stats {
    background: var(--paper); color: var(--ink);
    padding: 74px 5vw 68px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.stats-grid b { font-family: var(--serif); font-weight: 300; color: var(--gold-deep); font-size: clamp(46px, 5.2vw, 76px); }
.stats-grid span { color: var(--ink-soft); font-size: 11.5px; letter-spacing: .2em; }
.stats-note {
    border-top: 1px solid var(--line-soft); color: var(--ink-faint);
    font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: .2em;
}

/* ---- 收尾 CTA：双栏奶油 ---- */
.cta-final {
    height: auto; min-height: 0; overflow: visible; background: var(--paper-2); padding: 0;
}
.cta-inner {
    max-width: 1320px; margin: 0 auto; display: grid;
    grid-template-columns: .95fr 1fr; align-items: center; gap: 6vw; padding: 96px 5vw;
}
.cta-media { margin: 0; overflow: hidden; border-radius: 50% 50% 2px 2px / 30% 30% 2px 2px; }
.cta-media img {
    width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
    filter: saturate(.92) brightness(1.04) sepia(.05);
}
.cta-content {
    position: static; inset: auto; display: block; text-align: left; color: var(--ink); padding: 0;
}
.cta-content h2 {
    font-family: var(--display); font-weight: 300; color: var(--ink);
    font-size: clamp(30px, 4vw, 48px); letter-spacing: .08em; margin: 10px 0 18px; text-shadow: none;
}
.cta-content p { font-family: var(--song); font-size: 15px; letter-spacing: .18em; color: var(--ink-soft); opacity: 1; }
.cta-btns { margin-top: 36px; justify-content: flex-start; }
.cta-btns .btn-dear { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cta-btns .btn-dear:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.cta-ghost { border-color: rgba(58, 50, 43, .24); color: var(--ink); }
.cta-ghost:hover { border-color: var(--gold); color: var(--gold-deep); background: transparent; }

/* ============================================================
   页脚：奶油浅底
   ============================================================ */
.footer {
    background: var(--paper-2); color: var(--ink-soft); margin-top: 0;
    padding: 72px 5vw 34px; border-top: 1px solid var(--line);
}
.footer .f-brand {
    font-family: var(--display); font-weight: 300; font-size: 24px;
    letter-spacing: .2em; color: var(--ink); margin-bottom: 14px;
}
.footer .f-en {
    display: block; font-family: var(--script); font-size: 21px; letter-spacing: .02em;
    color: var(--gold); margin-top: 4px; text-transform: none;
}
.footer .f-brand-col p { font-size: 12px; letter-spacing: .1em; line-height: 2.1; color: var(--ink-faint); }
.footer h5 { font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em; color: var(--gold-deep); margin-bottom: 16px; }
.footer li a { font-size: 12px; letter-spacing: .12em; color: var(--ink-soft); }
.footer li a:hover { color: var(--gold-deep); }
.footer .f-base {
    border-top: 1px solid var(--line); color: var(--ink-faint);
    font-size: 10.5px; letter-spacing: .12em; padding-top: 20px;
}
.footer a[href*="beian"] { color: var(--ink-faint); }

/* ============================================================
   内页：页头 / 筛选 / 文章 / 详情
   ============================================================ */
.page-head { padding: 86px 5vw 44px; max-width: 1320px; }
.page-head h1 { font-family: var(--display); font-weight: 300; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: .08em; }
.page-head p { color: var(--ink-soft); letter-spacing: .08em; font-size: 13.5px; }

.filters { max-width: 1320px; padding: 0 5vw 38px; gap: 16px; border-bottom: 1px solid var(--line-soft); }
.filter-row .fr-label { font-family: var(--serif); font-style: italic; font-size: 13px; letter-spacing: .1em; color: var(--ink-faint); min-width: 56px; }
.chip {
    border: 1px solid var(--line); background: transparent; color: var(--ink-soft);
    font-size: 11.5px; letter-spacing: .14em; padding: 8px 18px; border-radius: 999px;
}
.chip:hover { border-color: var(--gold-soft); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.count-bar { font-family: var(--serif); font-style: italic; font-size: 12.5px; letter-spacing: .1em; color: var(--ink-faint); max-width: 1320px; }

.pd-section h2, .try360 h2, .article h2 {
    border-left: 0; padding-left: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line);
    font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: .16em;
}
.pd-main { border-radius: 2px; }
.pd-thumbs figure { border-radius: 2px; }
.pd-thumbs figcaption { background: rgba(46, 38, 31, .5); letter-spacing: .14em; }
.pd-info h1 { font-weight: 300; letter-spacing: .08em; }
.pd-info .pd-en { font-family: var(--serif); font-style: italic; letter-spacing: .1em; }
.pd-price { font-family: var(--display); color: var(--gold-deep); letter-spacing: .06em; }
.pd-ask-mark { border-color: var(--line); color: var(--ink-faint); letter-spacing: .28em; }
.pd-services span { background: transparent; border-color: var(--gold-soft); color: var(--gold-deep); }
.try360 .t360-stage { background: var(--paper-2); border-color: var(--line); }
.store-card { border-color: var(--line); box-shadow: var(--shadow-soft); }
.article th { background: var(--paper-2); }

/* ============================================================
   婚纱顾问：改为奶油羊皮纸风
   ============================================================ */
.cc-fab {
    background: linear-gradient(120deg, #FFFDF8 0%, #F6EBDB 100%);
    border: 1px solid var(--line); border-right: 0;
    box-shadow: -10px 16px 44px rgba(90, 70, 50, .16);
}
.cc-fab-ico { background: var(--ink); color: var(--gold-soft); }
.cc-fab-txt b { font-family: var(--display); font-weight: 400; letter-spacing: .18em; color: var(--ink); }
.cc-fab-txt em { font-family: var(--script); font-size: 13px; letter-spacing: .04em; text-transform: none; color: var(--gold); }
.cc-head { background: linear-gradient(150deg, #4A4038 0%, #5C4E42 60%, #443A32 100%); }
.cc-brand { font-family: var(--script); font-size: 17px; letter-spacing: .04em; text-transform: none; color: var(--gold-soft); }
.cc-head h3 { font-family: var(--display); font-weight: 300; font-size: 28px; letter-spacing: .14em; }
.cc-body { background: var(--paper); }
.cc-hi { font-family: var(--song); color: var(--ink-soft); }
.cc-quick button { border-bottom-color: var(--line); color: var(--ink-soft); }
.cc-quick button:hover { color: var(--gold-deep); }
.cc-label { font-family: var(--serif); font-style: italic; letter-spacing: .16em; text-transform: none; font-size: 12px; color: var(--ink-faint); }
.cc-form input[type="text"], .cc-form textarea { border-bottom-color: var(--line); }
.cc-send { background: var(--ink); border-color: var(--ink); color: var(--paper); border-radius: 999px; letter-spacing: .18em; }
.cc-send:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.cc-foot { background: var(--paper-2); border-top-color: var(--line); }
.cc-note { border-top-color: var(--line-soft); color: var(--ink-faint); }

/* 弹窗与表单 */
.modal { border-radius: 2px; background: var(--paper); }
.modal h3 { font-family: var(--display); font-weight: 300; letter-spacing: .14em; }
.modal input, .modal textarea { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 10px 0; }
.modal input:focus, .modal textarea:focus { border-bottom-color: var(--gold); }
.m-field-label { font-family: var(--serif); font-style: italic; letter-spacing: .1em; }
.toast { background: var(--ink); border-radius: 999px; letter-spacing: .12em; }

/* ============================================================
   v8 响应式
   ============================================================ */
@media (max-width: 1180px) {
    .nav-left, .nav-right { gap: 20px; }
    .nav a[data-k] { letter-spacing: .14em; font-size: 11px; }
    .nav-book { padding: 8px 16px; letter-spacing: .12em; }
    .grid-products { gap: 48px 28px; }
}
@media (max-width: 980px) {
    .nav-left { display: none; }
    .nav { grid-template-columns: auto 1fr; padding: 16px 5vw; }
    .nav .logo { align-items: flex-start; }
    .nav-right { justify-content: flex-end; }
    .hero-inner { grid-template-columns: 1fr; gap: 34px; }
    .hero-copy { max-width: 100%; padding: 14px 0 0; order: 1; text-align: center; }
    .hero-rule { margin: 22px auto 18px; }
    .hero-cta { justify-content: center; }
    .hero-lede br { display: none; }
    .hero-figure { order: 2; align-items: center; margin-top: 8px; }
    .hero-arch, .hero-cap, .hero-dots { max-width: 440px; }
    .hero-dots { justify-content: center; }
    .quiz-bar { grid-template-columns: 1fr; }
    .qb-item:first-child { border-right: 0; border-bottom: 1px solid var(--line); padding-right: 0; margin-right: 0; }
    .qb-item { padding: 30px 0 28px; }
    .fabric-grid { grid-template-columns: repeat(2, 1fr); gap: 26px; }
    .grid-products { grid-template-columns: repeat(2, 1fr); }
    .grid-entries { grid-template-columns: repeat(3, 1fr); }
    .cta-inner { grid-template-columns: 1fr; gap: 36px; padding: 72px 5vw; }
    .cta-media { max-width: 460px; }
    .cta-media img { aspect-ratio: 4 / 5; }
    .quotes { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 720px) {
    body::after { display: none; }
    .announce { font-size: 9.5px; letter-spacing: .16em; white-space: normal; line-height: 1.8; padding: 8px 5vw; }
    .nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 12px 5vw 0; }
    .nav .logo { width: auto; align-items: flex-start; justify-content: flex-start; padding-bottom: 0; }
    .nav .logo .zh { font-size: 19px; letter-spacing: .24em; text-indent: .24em; }
    .nav .logo .en { display: block; font-size: 11px; letter-spacing: .42em; text-indent: .42em; }
    .nav .logo em { font-size: 13px; }
    .nav-right { display: none; }
    .nav .nav-toggle {
        display: block; order: 2; background: none; border: 1px solid var(--line);
        border-radius: 999px; padding: 9px 18px; font-size: 10.5px;
        letter-spacing: .22em; color: var(--ink); font-family: var(--sans);
    }
    .hero { padding: 26px 5vw 0; }
    .hero-script { font-size: 26px; margin-bottom: 14px; }
    .hero-title { font-size: clamp(34px, 10vw, 46px); }
    .hero-lede { font-size: 13.5px; line-height: 2.05; letter-spacing: .1em; }
    .hero-note { font-size: 9.5px; letter-spacing: .18em; }
    .hero-cta { gap: 14px; margin-top: 30px; }
    .hero-cta .btn-dear, .hero-cta .btn-line { padding: 13px 26px; font-size: 12px; letter-spacing: .16em; }
    .hero-figure { width: 100%; }
    .hero-arch { width: 82%; max-width: 320px; margin: 6px auto 0; }
    .hero-cap { font-size: 9px; letter-spacing: .22em; }
    .quiz-bar { margin-top: 44px; padding: 0 5vw; }
    .qb-item b { font-size: 22px; }
    .qb-item span { font-size: 12px; letter-spacing: .06em; }
    .marquee { margin-top: 42px; }
    .sec { padding: 66px 5vw 54px; }
    .sec-head { margin-bottom: 34px; align-items: flex-start; flex-direction: column; gap: 14px; }
    .sec-head h2 { font-size: 23px; }
    .kicker { font-size: 21px; }
    .fabric-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
    .fabric-card figcaption { padding-top: 10px; }
    .fabric-card figcaption b { font-size: 13.5px; letter-spacing: .1em; }
    .fabric-card figcaption span { font-size: 10px; letter-spacing: .06em; }
    .grid-products { gap: 34px 14px; }
    .grid-entries { grid-template-columns: repeat(2, 1fr); gap: 22px 14px; }
    .look-card .lc-name { font-size: 14px; margin-top: 12px; letter-spacing: .08em; }
    .look-card .lc-meta { font-size: 10px; letter-spacing: .08em; }
    .lc-ask { font-size: 11px; }
    .look-card .lc-badge { font-size: 8.5px; letter-spacing: .18em; padding: 0 10px 9px; }
    .story-strip { gap: 22px; }
    .quotes-sec { padding: 60px 5vw 56px; }
    .quotes-sec h2 { margin-bottom: 34px; }
    .quotes blockquote::before { font-size: 62px; top: -18px; }
    .quotes p { font-size: 16px; line-height: 1.95; letter-spacing: .06em; }
    .stats { padding: 48px 6vw 44px; }
    .stats-note { font-size: 11px; letter-spacing: .12em; margin-top: 28px; }
    .cta-inner { padding: 56px 5vw; }
    .cta-content h2 { font-size: 28px; }
    .cta-content p { font-size: 13px; letter-spacing: .1em; }
    .cta-btns { margin-top: 26px; }
    .footer { padding: 48px 5vw 26px; }
    .page-head { padding: 48px 5vw 30px; }
    .pd-section h2, .try360 h2, .article h2 { font-size: 17px; }
}

/* ---- 移动端菜单 ---- */
.nav-toggle { display: none; }
.mnav {
    position: fixed; inset: 0; z-index: 96; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 6px;
    background: var(--paper);
    background-image: radial-gradient(80% 60% at 50% 0%, #FBF2E6 0%, rgba(253, 250, 245, 0) 70%);
    opacity: 0; pointer-events: none; transform: translateY(-8px);
    transition: opacity .4s ease, transform .4s ease;
}
.mnav.open { opacity: 1; pointer-events: auto; transform: none; }
.mnav-close {
    position: absolute; top: 18px; right: 20px; width: 40px; height: 40px;
    background: none; border: 1px solid var(--line); border-radius: 50%;
    font-size: 20px; line-height: 1; color: var(--ink-soft);
}
.mnav-script { font-family: var(--script); font-size: 26px; color: var(--gold); margin-bottom: 28px; }
.mnav-links { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mnav-links a {
    font-family: var(--display); font-size: 25px; letter-spacing: .22em;
    color: var(--ink); padding: 10px 26px;
}
.mnav-links a:active { color: var(--gold-deep); }
.mnav-foot { margin-top: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.mnav-foot .btn-dear { padding: 13px 34px; font-size: 12px; letter-spacing: .2em; }
.mnav-tel { font-family: var(--serif); font-size: 15px; letter-spacing: .16em; color: var(--ink-soft); }

/* ---- 内容页：页头与正文同宽 ---- */
.page-head.narrow { max-width: 820px; margin: 0 auto; padding: 82px 5vw 40px; }
.page-head.narrow .kicker { margin-bottom: 6px; }

/* ---- 在线试镜 / 图鉴：奶油化 ---- */
.panel { background: var(--paper-2); border: 1px solid var(--line); border-radius: 2px; padding: 20px 22px; }
.panel h4 { font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: .16em; }
.panel .pm-en { font-family: var(--serif); font-style: italic; font-size: 11px; letter-spacing: .1em; color: var(--ink-faint); }
.style-pill { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; }
.style-pill.on { background: var(--paper-3); border-color: var(--gold); }
.style-pill .sp-name { font-family: var(--display); letter-spacing: .06em; }
.style-pill .sp-era { font-family: var(--serif); font-style: italic; letter-spacing: .04em; }
.body-grid input { background: var(--paper); border: 1px solid var(--line); border-radius: 2px; }
.canvas-card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 2px; padding: 16px; }
.canvas-card canvas { background: linear-gradient(160deg, #F9F1E6 0%, #EFE2D3 100%); }
.view-tabs button { background: transparent; border-radius: 999px; font-size: 11px; letter-spacing: .12em; }
.view-tabs button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.act-btn { border-radius: 999px; letter-spacing: .16em; font-size: 11.5px; }
.act-btn.primary { background: var(--ink); color: var(--paper); }
.act-btn.primary:hover { background: var(--gold-deep); border-color: var(--gold-deep); color: var(--paper); }
.atlas-tabs button { font-family: var(--serif); letter-spacing: .12em; }

/* ---- 移动端筛选：单行横向滑动，节省首屏 ---- */
@media (max-width: 720px) {
    .filters { padding-bottom: 22px; gap: 10px; }
    .filter-row {
        flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; align-items: center; gap: 8px;
    }
    .filter-row::-webkit-scrollbar { display: none; }
    .filter-row .fr-label { flex: 0 0 auto; position: sticky; left: 0; background: var(--paper); padding-right: 6px; z-index: 2; }
    .filter-row .chip { flex: 0 0 auto; padding: 7px 15px; font-size: 11px; }
    .page-head p { font-size: 12.5px; letter-spacing: .04em; line-height: 1.9; }
    .count-bar { margin-bottom: 14px; }
}

/* ============================================================
   v9 现代设计工坊层（2026-11-05）
   纯白 / 近黑 / 冷灰 · Inter 无衬线 · 方角 · 直线网格
   定位：在线设计 → 预览上身效果 → 下单 → 工厂生产寄出
   ============================================================ */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('/assets/fonts/inter-400.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('/assets/fonts/inter-500.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('/assets/fonts/inter-600.woff2') format('woff2'); }

:root {
    --bg: #FFFFFF;
    --bg-soft: #F5F5F2;
    --bg-card: #FFFFFF;
    --ink: #131313;
    --ink-soft: #6B6B6B;
    --ink-faint: #A6A6A2;
    --gold: #131313;
    --gold-deep: #000000;
    --gold-soft: #DEDED8;
    --blush: #EFEEEA;
    --rose: #6B6B6B;
    --line: #E7E7E2;
    --line-soft: #F0F0EC;
    --shadow: 0 16px 48px rgba(19, 19, 19, .08);
    --shadow-soft: 0 6px 20px rgba(19, 19, 19, .05);
    --radius: 0px;
    --script: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --serif: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --song: 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    --display: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    --sans: 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Arial, sans-serif;
}
body {
    font-family: var(--sans); background: var(--bg); color: var(--ink);
    font-size: 15px; line-height: 1.8; letter-spacing: 0;
    font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1, "kern" 1;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
::selection { background: #131313; color: #fff; }
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 5vw; }

/* kicker：小号大写字距 */
.kicker {
    font-size: 11px; letter-spacing: .32em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 500; margin-bottom: 12px;
    font-family: 'Inter', var(--sans);
}

/* 按钮：黑底方角 / 白底黑框 */
.btn-dear {
    display: inline-block; background: var(--ink); color: #fff;
    border: 1px solid var(--ink); padding: 15px 38px; font-size: 13.5px;
    letter-spacing: .14em; font-weight: 500; transition: all .25s; text-align: center;
    border-radius: 0; box-shadow: none;
}
.btn-dear:hover { background: #000; border-color: #000; }
.btn-line {
    display: inline-block; background: transparent; color: var(--ink);
    border: 1px solid var(--line); padding: 15px 38px; font-size: 13.5px;
    letter-spacing: .14em; font-weight: 500; transition: all .25s; text-align: center;
    border-radius: 0; box-shadow: none;
}
.btn-line:hover { border-color: var(--ink); background: #fff; }

/* 导航：白底细线，现代三段 */
.announce { display: none; }
.nav {
    position: sticky; top: 0; z-index: 90;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 5vw; height: 68px;
    background: rgba(255, 255, 255, .94); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.nav .logo { display: flex; align-items: center; gap: 14px; }
.nav .logo .zh { font-size: 17px; letter-spacing: .18em; font-family: var(--sans); font-weight: 600; color: var(--ink); }
.nav .logo .en { font-size: 9.5px; letter-spacing: .34em; color: var(--ink-soft); text-transform: uppercase; font-weight: 500; font-family: 'Inter', var(--sans); }
.nav .logo em { display: none; }
.nav .nav-left, .nav .nav-right { display: flex; align-items: center; gap: 30px; }
.nav .nav-left a, .nav .nav-right a {
    font-size: 13px; letter-spacing: .12em; color: var(--ink-soft); padding: 6px 0;
    position: relative; font-weight: 400;
}
.nav .nav-left a::after, .nav .nav-right a::after {
    content: ''; position: absolute; left: 50%; right: 50%; bottom: 0;
    height: 1.5px; background: var(--ink); transition: all .25s;
}
.nav .nav-left a:hover, .nav .nav-right a:hover, .nav .nav-left a.on, .nav .nav-right a.on { color: var(--ink); }
.nav .nav-left a.on::after, .nav .nav-right a.on::after,
.nav .nav-left a:hover::after, .nav .nav-right a:hover::after { left: 0; right: 0; }
.nav-book {
    background: var(--ink); color: #fff; border: 1px solid var(--ink);
    padding: 10px 22px; font-size: 12px; letter-spacing: .14em; font-weight: 500;
    transition: all .25s; border-radius: 0;
}
.nav-book:hover { background: #000; }
@media (max-width: 720px) {
    .nav { height: 60px; }
    .nav .logo .zh { font-size: 15px; letter-spacing: .14em; }
    .nav .logo .en { display: block; font-size: 8.5px; letter-spacing: .3em; }
}

/* 走马灯：黑底白字细条 */
.marquee {
    background: var(--ink); color: #fff; overflow: hidden;
    padding: 13px 0; border: none; font-size: 11.5px; letter-spacing: .3em;
    text-transform: uppercase; font-family: 'Inter', var(--sans); font-weight: 500;
}
.marquee-track { white-space: nowrap; display: inline-block; animation: mq 26s linear infinite; }
@keyframes mq { from { transform: translateX(0); } to { transform: translateX(-25%); } }

/* 产品卡：方角、白底、现代信息层 */
.look-card { background: #fff; border: 1px solid var(--line); transition: border-color .3s, box-shadow .3s; }
.look-card:hover { border-color: #131313; box-shadow: var(--shadow); }
.look-card .lc-img { border-radius: 0; overflow: hidden; aspect-ratio: 3/4; position: relative; }
.look-card .lc-img img {
    width: 100%; height: 100%; object-fit: cover; filter: none;
    transition: transform 1s cubic-bezier(.2, .7, .2, 1);
}
.look-card:hover .lc-img img { transform: scale(1.03); }
.look-card .lc-img::after { display: none; }
.lc-badge {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: rgba(19, 19, 19, .86); color: #fff; backdrop-filter: blur(6px);
    padding: 4px 10px; font-size: 10px; letter-spacing: .2em;
    font-family: 'Inter', var(--sans); font-weight: 400; border-radius: 0;
}
.look-card .lc-name { font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--ink); }
.look-card .lc-meta { font-size: 12px; color: var(--ink-soft); letter-spacing: .04em; }
.lc-price, .lc-price.lc-ask { font-size: 12px; color: var(--ink-soft); letter-spacing: .14em; font-weight: 500; }

/* 区块通用 */
.sec { padding: 96px 5vw; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; letter-spacing: -.01em; }
.sec-head .more { font-size: 12.5px; color: var(--ink-soft); letter-spacing: .12em; }
.sec-head .more:hover { color: var(--ink); }

/* 图片滤镜全部关闭 */
.fabric-card img, .ss-item img, .pg-item img, .grid-entries img, .story-strip img,
.hero-arch img, .cta-media img, .pd-media img, .pd-gal img { filter: none !important; }

/* 面料卡（用于生产段落） */
.fabric-card { border: 1px solid var(--line); background: #fff; border-radius: 0; }
.fabric-card img { aspect-ratio: 4/3; object-fit: cover; border-radius: 0; }
.fabric-card figcaption { padding: 16px 18px; }
.fabric-card figcaption b { font-size: 14px; font-weight: 600; letter-spacing: .02em; color: var(--ink); }
.fabric-card figcaption span { font-size: 12px; color: var(--ink-soft); }

/* 页头（内页） */
.page-head { padding: 90px 5vw 46px; border-bottom: 1px solid var(--line); background: #fff; }
.page-head h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 600; letter-spacing: -.01em; }
.page-head p { font-size: 14.5px; color: var(--ink-soft); max-width: 640px; }
.page-head.narrow { max-width: 820px; margin: 0 auto; padding: 82px 5vw 40px; }

/* 筛选 chip */
.chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 8px 18px; font-size: 12.5px; letter-spacing: .06em; color: var(--ink-soft); transition: all .2s; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.filter-row .fr-label { font-size: 11.5px; letter-spacing: .2em; color: var(--ink-faint); font-weight: 500; }

/* 设计器面板 */
.panel { background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 20px 22px; }
.panel h4 { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.panel .pm-en { font-family: 'Inter', var(--sans); font-style: normal; font-size: 10px; letter-spacing: .22em; color: var(--ink-faint); text-transform: uppercase; font-weight: 500; }
.style-pill { background: #fff; border: 1px solid var(--line); border-radius: 0; }
.style-pill.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.style-pill.on .sp-era { color: rgba(255,255,255,.72); }
.style-pill .sp-name { font-family: var(--sans); font-weight: 600; letter-spacing: .02em; font-size: 13px; }
.style-pill .sp-era { font-family: 'Inter', var(--sans); font-style: normal; font-size: 10px; letter-spacing: .16em; color: var(--ink-faint); text-transform: uppercase; }
.body-grid input { background: #fff; border: 1px solid var(--line); border-radius: 0; }
.body-grid input:focus { border-color: var(--ink); outline: none; }
.canvas-card { background: #fff; border: 1px solid var(--line); border-radius: 0; padding: 18px; }
.canvas-card canvas { background: #F5F5F2; border-radius: 0; }
.view-tabs button { background: #fff; border: 1px solid var(--line); border-radius: 999px; font-size: 11.5px; letter-spacing: .1em; color: var(--ink-soft); font-weight: 400; }
.view-tabs button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.act-btn { border-radius: 999px; letter-spacing: .1em; font-size: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 500; }
.act-btn:hover { border-color: var(--ink); }
.act-btn.primary { background: var(--ink); color: #fff; border-color: var(--ink); }
.act-btn.primary:hover { background: #000; }
.custom-extra { border-top: 1px solid var(--line-soft); margin-top: 14px; padding-top: 12px; }

/* 弹窗表单：现代 */
.modal { background: #fff; border-radius: 0; border: 1px solid var(--line); box-shadow: var(--shadow); }
.modal h3 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.modal input, .modal textarea { border: 1px solid var(--line); border-radius: 0; background: #fff; }
.modal input:focus, .modal textarea:focus { border-color: var(--ink); outline: none; }

/* 顾问抽屉：现代白 */
.cc { background: #fff; border-left: 1px solid var(--line); }
.cc-head { border-bottom: 1px solid var(--line); }
.cc-brand { font-family: 'Inter', var(--sans); font-size: 10px; letter-spacing: .3em; color: var(--ink-faint); text-transform: uppercase; }
.cc h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; }
.cc-quick button { background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 12px; }
.cc-quick button:hover { border-color: var(--ink); }
.cc-form input, .cc-form textarea { background: #fff; border: 1px solid var(--line); border-radius: 0; }
.cc-send { background: var(--ink); color: #fff; border-radius: 999px; letter-spacing: .1em; font-weight: 500; border: none; }
.cc-send:hover { background: #000; }
.cc-fab {
    background: var(--ink); color: #fff; border: none; border-radius: 999px;
    box-shadow: 0 10px 30px rgba(19,19,19,.25);
}
.cc-fab-txt b { color: #fff; }
.cc-fab-txt em { color: rgba(255,255,255,.72); }
.cc-fab-ico { background: transparent; color: #fff; box-shadow: none; }

/* 移动菜单：现代白 */
.mnav { background: #fff; background-image: none; }
.mnav-script { display: none; }
.mnav-links a { font-family: var(--sans); font-weight: 600; font-size: 24px; letter-spacing: .04em; color: var(--ink); }
.mnav-close { border: 1px solid var(--line); border-radius: 999px; }

/* 页脚：近黑底 */
.footer { background: #141414; color: #EDEDEA; padding: 72px 5vw 0; border-top: none; }
.footer .f-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.9fr 1fr 1fr 1fr 1fr; gap: 34px; padding-bottom: 56px; }
.footer .f-brand { font-size: 20px; font-weight: 600; letter-spacing: .12em; color: #fff; }
.footer .f-brand .f-en { display: block; font-family: 'Inter', var(--sans); font-size: 9.5px; letter-spacing: .34em; color: #8B8B87; margin-top: 8px; text-transform: uppercase; font-weight: 400; }
.footer .f-brand-col p { font-size: 12.5px; color: #8B8B87; line-height: 2.1; margin-top: 16px; }
.footer h5 { font-size: 11px; letter-spacing: .3em; color: #8B8B87; text-transform: uppercase; font-weight: 500; margin-bottom: 18px; font-family: 'Inter', var(--sans); }
.footer ul { list-style: none; }
.footer ul a { font-size: 13px; color: #D9D9D5; line-height: 2.3; }
.footer ul a:hover { color: #fff; }
.footer .f-base {
    max-width: 1280px; margin: 0 auto; border-top: 1px solid #2A2A2A;
    padding: 22px 0 26px; display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between;
    font-size: 11.5px; color: #8B8B87; letter-spacing: .06em;
}
.footer .f-base a { color: #8B8B87; }
.footer .f-base a:hover { color: #fff; }
@media (max-width: 900px) {
    .footer .f-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

/* ---------- v9 首页专属组件 ---------- */

/* Hero：白底双栏 + 实时渲染演示 */
.hero9 { border-bottom: 1px solid var(--line); background: #fff; }
.hero9-inner {
    max-width: 1280px; margin: 0 auto; padding: 72px 5vw 88px;
    display: grid; grid-template-columns: 1.05fr .95fr; gap: 64px; align-items: center;
}
.hero9-eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
    color: var(--ink-soft); font-weight: 500; font-family: 'Inter', var(--sans);
    margin-bottom: 26px;
}
.hero9-eyebrow i { width: 32px; height: 1px; background: var(--ink); display: inline-block; }
.hero9 h1 {
    font-size: clamp(38px, 5.4vw, 72px); font-weight: 600; letter-spacing: -.02em;
    line-height: 1.12; color: var(--ink); margin-bottom: 26px;
}
.hero9 h1 em { font-style: normal; color: var(--ink-faint); font-family: 'Inter', var(--sans); font-weight: 500; }
.hero9-lede { font-size: 16px; color: var(--ink-soft); max-width: 480px; margin-bottom: 12px; line-height: 2; }
.hero9-flow {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    font-size: 12px; color: var(--ink-soft); letter-spacing: .1em; margin-bottom: 38px;
}
.hero9-flow b { color: var(--ink); font-weight: 500; }
.hero9-flow i { color: var(--ink-faint); font-style: normal; }
.hero9-cta { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 30px; }
.hero9-cta .btn-dear { padding: 17px 42px; }
.hero9-cta .btn-line { padding: 17px 42px; }
.hero9-facts { display: flex; gap: 36px; flex-wrap: wrap; }
.hero9-facts div b { display: block; font-size: 22px; font-weight: 600; letter-spacing: -.01em; font-family: 'Inter', var(--sans); color: var(--ink); }
.hero9-facts div span { font-size: 11.5px; color: var(--ink-soft); letter-spacing: .1em; }

.hero9-demo { position: relative; }
.hero9-demo-frame {
    position: relative; border: 1px solid var(--line); background: #F5F5F2;
    aspect-ratio: 3/4; max-width: 460px; margin-left: auto; overflow: hidden;
}
.hero9-demo-frame canvas { width: 100%; height: 100%; display: block; }
.hero9-demo-ui {
    position: absolute; left: 18px; bottom: 18px; z-index: 3;
    background: rgba(255, 255, 255, .95); backdrop-filter: blur(10px);
    border: 1px solid var(--line); padding: 12px 16px; min-width: 200px;
}
.hero9-demo-ui b { display: block; font-size: 13px; font-weight: 600; letter-spacing: .02em; margin-bottom: 4px; }
.hero9-demo-ui span { font-size: 11px; color: var(--ink-soft); letter-spacing: .06em; line-height: 1.8; display: block; }
.hero9-demo-tag {
    position: absolute; top: 18px; right: 18px; z-index: 3;
    background: var(--ink); color: #fff; padding: 6px 14px;
    font-size: 10.5px; letter-spacing: .22em; font-family: 'Inter', var(--sans); font-weight: 500;
}
@media (max-width: 960px) {
    .hero9-inner { grid-template-columns: 1fr; gap: 44px; padding: 56px 6vw 64px; }
    .hero9-demo-frame { margin: 0 auto; }
    .hero9-facts { gap: 24px; }
}

/* 三步流程 */
.steps9 { padding: 104px 5vw; background: var(--bg-soft); }
.steps9-grid { max-width: 1280px; margin: 0 auto; }
.steps9-row { display: grid; grid-template-columns: 140px 1fr 1fr 1fr; gap: 0; }
.step9 { padding: 30px 30px 30px 0; border-top: 1px solid var(--line); }
.step9 .s-num {
    font-family: 'Inter', var(--sans); font-size: 13px; font-weight: 600;
    letter-spacing: .2em; color: var(--ink-faint);
}
.step9 h3 { font-size: 20px; font-weight: 600; letter-spacing: -.01em; margin: 14px 0 10px; }
.step9 p { font-size: 13.5px; color: var(--ink-soft); line-height: 2; }
.step9 .s-link { display: inline-block; margin-top: 14px; font-size: 12px; letter-spacing: .14em; color: var(--ink); border-bottom: 1.5px solid var(--ink); padding-bottom: 3px; }
.step9 .s-link:hover { color: var(--ink-soft); border-color: var(--ink-soft); }
@media (max-width: 960px) {
    .steps9-row { grid-template-columns: 1fr; }
    .step9 { padding: 26px 0; }
}

/* 深色生产段 */
.mill9 { background: #141414; color: #EDEDEA; padding: 110px 5vw; }
.mill9-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.mill9 .kicker { color: #8B8B87; }
.mill9 h2 { font-size: clamp(30px, 3.8vw, 44px); font-weight: 600; letter-spacing: -.01em; color: #fff; margin-bottom: 22px; }
.mill9 p { font-size: 14.5px; color: #C9C9C4; line-height: 2.1; margin-bottom: 14px; }
.mill9-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin-top: 34px; background: #2A2A2A; }
.mill9-stats div { background: #141414; padding: 22px 24px; }
.mill9-stats b { display: block; font-size: 24px; font-weight: 600; color: #fff; font-family: 'Inter', var(--sans); letter-spacing: -.01em; }
.mill9-stats span { font-size: 11.5px; color: #8B8B87; letter-spacing: .14em; }
.mill9-media { position: relative; }
.mill9-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.mill9-media figure + figure { margin-top: 24px; }
.mill9-media figcaption {
    position: absolute; left: 16px; bottom: 16px; z-index: 2;
    background: rgba(19,19,19,.82); color: #fff; padding: 8px 16px;
    font-size: 10.5px; letter-spacing: .24em; font-family: 'Inter', var(--sans);
    backdrop-filter: blur(8px);
}
@media (max-width: 960px) {
    .mill9-inner { grid-template-columns: 1fr; gap: 44px; }
    .mill9 { padding: 84px 6vw; }
}

/* 交付承诺行 */
.promise9 { border-bottom: 1px solid var(--line); }
.promise9-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.promise9-item { padding: 40px 32px; border-left: 1px solid var(--line); }
.promise9-item:first-child { border-left: none; }
.promise9-item b { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; letter-spacing: .02em; }
.promise9-item span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.9; }
@media (max-width: 960px) {
    .promise9-grid { grid-template-columns: 1fr 1fr; }
    .promise9-item { border-top: 1px solid var(--line); }
    .promise9-item:nth-child(-n+2) { border-top: none; }
    .promise9-item:nth-child(3) { border-left: none; }
}

/* 收尾 CTA：黑底 */
.cta9 { background: var(--ink); color: #fff; text-align: center; padding: 120px 5vw; }
.cta9 h2 { font-size: clamp(32px, 4.6vw, 56px); font-weight: 600; letter-spacing: -.015em; color: #fff; margin-bottom: 18px; }
.cta9 p { font-size: 14.5px; color: #A9A9A4; letter-spacing: .06em; margin-bottom: 40px; }
.cta9-btns { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta9 .btn-inv {
    display: inline-block; background: #fff; color: #131313; border: 1px solid #fff;
    padding: 17px 44px; font-size: 13.5px; letter-spacing: .14em; font-weight: 600; transition: all .25s;
}
.cta9 .btn-inv:hover { background: transparent; color: #fff; }
.cta9 .btn-ghost {
    display: inline-block; background: transparent; color: #fff; border: 1px solid #3A3A3A;
    padding: 17px 44px; font-size: 13.5px; letter-spacing: .14em; font-weight: 500; transition: all .25s;
}
.cta9 .btn-ghost:hover { border-color: #fff; }

/* 设计页新增：照片上传 */
.photo9 { background: #fff; border: 1px solid var(--line); padding: 20px 22px; }
.photo9 h4 { font-weight: 600; font-size: 14px; letter-spacing: .02em; }
.photo9 .pm-en { font-family: 'Inter', var(--sans); font-style: normal; font-size: 10px; letter-spacing: .22em; color: var(--ink-faint); text-transform: uppercase; font-weight: 500; }
.photo9-drop {
    margin-top: 14px; border: 1.5px dashed var(--line); background: var(--bg-soft);
    padding: 26px 18px; text-align: center; cursor: pointer; transition: all .2s;
}
.photo9-drop:hover { border-color: var(--ink); }
.photo9-drop b { display: block; font-size: 13px; font-weight: 500; margin-bottom: 6px; }
.photo9-drop span { font-size: 11.5px; color: var(--ink-soft); }
.photo9-prev { margin-top: 14px; position: relative; display: none; }
.photo9-prev img { width: 100%; display: block; }
.photo9-prev button {
    position: absolute; top: 8px; right: 8px; background: rgba(19,19,19,.8); color: #fff;
    border: none; width: 30px; height: 30px; font-size: 15px; cursor: pointer;
}
.photo9-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 10px; line-height: 1.8; }

/* 提交设计条 */
.design-submit {
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
    border: 1px solid var(--line); background: #fff; padding: 20px 24px; margin-top: 18px; flex-wrap: wrap;
}
.design-submit p { font-size: 13px; color: var(--ink-soft); }
.design-submit .btn-dear { padding: 13px 30px; }

/* 产品页价格区/按钮微调 */
.pd-price { border: 1px solid var(--line); background: #fff; }
.pd-ask-mark { font-family: 'Inter', var(--sans); font-style: normal; text-transform: uppercase; }
.btn-buy { background: var(--ink); border-color: var(--ink); color: #fff; border-radius: 0; }

/* toast */
.toast { background: var(--ink); color: #fff; border-radius: 0; letter-spacing: .08em; }

/* ---- v9.1 修正：首屏构图 / 移动导航 / 无边框卡片 ---- */
.hero9-en {
    font-family: 'Inter', var(--sans); font-size: 12px; letter-spacing: .3em;
    text-transform: uppercase; color: var(--ink-faint); font-weight: 500;
    margin: -10px 0 22px;
}
.hero9-shot {
    position: relative; max-width: 470px; margin-left: auto;
    border: 1px solid var(--line); background: #fff; padding: 10px;
}
.hero9-shot > img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.hero9-shot .hero9-demo-tag { top: 22px; right: 22px; }
.hero9-config {
    position: absolute; left: 22px; bottom: 22px; z-index: 3;
    background: rgba(255,255,255,.96); backdrop-filter: blur(12px);
    border: 1px solid var(--line); padding: 14px 16px 12px; min-width: 208px;
}
.hero9-config .cfg-row {
    display: flex; justify-content: space-between; gap: 18px;
    font-size: 11.5px; color: var(--ink-soft); padding: 4px 0; letter-spacing: .04em;
}
.hero9-config .cfg-row b { color: var(--ink); font-weight: 600; }
.hero9-config .cfg-chips { display: flex; gap: 6px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.hero9-config .cfg-chips i {
    font-style: normal; font-size: 10.5px; letter-spacing: .06em; padding: 3px 9px;
    border: 1px solid var(--line); color: var(--ink-soft);
}
.hero9-config .cfg-chips i.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.hero9-live {
    position: absolute; right: 22px; bottom: 22px; z-index: 3;
    width: 132px; background: #fff; border: 1px solid var(--line); padding: 6px;
}
.hero9-live canvas { width: 100%; aspect-ratio: 3/4; display: block; background: var(--bg-soft); }
.hero9-live span {
    display: block; text-align: center; font-size: 9.5px; letter-spacing: .2em;
    color: var(--ink-soft); padding-top: 5px;
}
@media (max-width: 960px) {
    .hero9-shot { margin: 0 auto; max-width: 100%; }
    .hero9-live { width: 104px; }
    .hero9-config { left: 16px; bottom: 16px; min-width: 176px; padding: 12px 14px 10px; }
    .hero9-shot .hero9-demo-tag { top: 16px; right: 16px; }
}
@media (max-width: 520px) {
    .hero9-live { display: none; }
    .hero9-config { position: static; margin-top: 10px; }
    .hero9-shot { padding: 10px; }
}

/* 移动端导航：隐藏链接，显示菜单按钮 */
@media (max-width: 720px) {
    .nav .nav-right { display: none; }
    .nav .nav-toggle {
        display: block; background: none; border: 1px solid var(--line);
        border-radius: 999px; padding: 8px 18px; font-size: 11px;
        letter-spacing: .18em; color: var(--ink); font-family: var(--sans);
    }
}

/* 卡片：无边框编辑式 */
.look-card { border: none; background: transparent; padding: 0; box-shadow: none; }
.look-card:hover { border: none; box-shadow: none; }
.look-card .lc-img { border: 1px solid var(--line); }
.look-card .lc-name { padding-top: 14px; font-size: 15px; }
.look-card .lc-meta { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }
.look-card .lc-price, .look-card .lc-price.lc-ask {
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft);
    transition: color .25s;
}
.look-card:hover .lc-price { color: var(--ink); }
.look-card .lc-img img { transition: transform 1.1s cubic-bezier(.2,.7,.2,1), filter .4s; }

/* 步骤区去掉空列 */
.steps9-row { grid-template-columns: repeat(3, 1fr); }
.step9 { padding: 30px 34px 30px 0; }
.step9 + .step9 { padding-left: 34px; border-left: 1px solid var(--line); }
@media (max-width: 960px) {
    .steps9-row { grid-template-columns: 1fr; }
    .step9 + .step9 { padding-left: 0; border-left: none; }
}

/* 设计页提交条 */
.design-submit { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 14px; }
.design-submit p { line-height: 1.7; font-size: 12.5px; }
@media (max-width: 720px) {
    .design-submit { grid-template-columns: 1fr; }
    .design-submit input, .design-submit .btn-dear { width: 100%; }
}

/* v9.2 走马灯可读性 */
.marquee, .marquee-track { color: #fff !important; }
.marquee { padding: 15px 0; font-size: 11.5px; letter-spacing: .28em; }
.marquee-track { opacity: .92; }
.marquee-track { opacity: 1; font-weight: 500; letter-spacing: .26em; }

/* ============================================================
   指南栏目（guide/）2026-11-08
   ============================================================ */
.g-article { max-width: 760px; }
.g-article > p { font-size: 15px; line-height: 1.95; color: #4A4640; margin-bottom: 16px; }
.g-article > p:first-of-type { font-size: 15.5px; color: #3A3630; }
.g-article h2 { font-size: 18px; letter-spacing: .1em; margin: 52px 0 18px; padding-left: 0; border-left: none; position: relative; padding-bottom: 12px; }
.g-article h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 1px; background: var(--gold); }
.g-article li { font-size: 14.5px; line-height: 1.9; margin-bottom: 8px; }
.g-article table { font-size: 13px; margin: 20px 0 26px; }
.g-article th, .g-article td { padding: 11px 13px; line-height: 1.7; }
.g-article a { color: var(--gold-deep); border-bottom: 1px solid rgba(176,141,87,.35); }
.g-article a:hover { border-bottom-color: var(--gold-deep); }

.g-more { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 8px; }
.g-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border: 1px solid var(--line); background: #fff; transition: border-color .25s, transform .25s; }
.g-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.g-card span { font-size: 14px; letter-spacing: .05em; color: var(--ink); line-height: 1.6; }
.g-card em { font-style: normal; font-size: 12px; color: var(--ink-faint); letter-spacing: .04em; line-height: 1.65; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.g-more-index { grid-template-columns: repeat(2, 1fr); gap: 16px; }

.g-cta { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 56px 0 10px; padding: 26px 28px; background: #131313; color: #fff; }
.g-cta-txt { display: flex; flex-direction: column; gap: 6px; }
.g-cta-txt b { font-size: 15px; font-weight: 500; letter-spacing: .1em; }
.g-cta-txt em { font-style: normal; font-size: 12px; color: rgba(255,255,255,.6); letter-spacing: .04em; }
.g-cta-btn { flex: 0 0 auto; padding: 11px 22px; background: #fff; color: #131313; font-size: 13px; letter-spacing: .08em; border-bottom: none !important; }
.g-cta-btn:hover { background: var(--gold-soft); color: #131313; }

@media (max-width: 720px) {
    .g-more, .g-more-index { grid-template-columns: 1fr; }
    .g-cta { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
    .g-cta-btn { width: 100%; text-align: center; }
    .g-article > p, .g-article li { font-size: 14.5px; }
    .g-article h2 { margin-top: 40px; }
}

/* 主体信息：品牌方 / 运营方 两行不拆词，版权行避让右下角悬浮按钮 */
.footer .f-ent { white-space: nowrap; font-size: 11px; letter-spacing: .02em; display: inline-block; }
@media (min-width: 861px) {
    .footer .f-base { padding-right: 200px; }
}
@media (max-width: 860px) {
    .footer .f-brand-col p { font-size: 11.5px; letter-spacing: .02em; }
    .footer .f-base { font-size: 10px; letter-spacing: .04em; line-height: 1.9; }
    .footer .f-ent { font-size: 10.5px; }
}

/* 页脚站群链接：四个域名 + 业务标签 */
.footer .f-sites {
    max-width: 1280px; margin: 26px auto 0; padding-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, .1);
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 24px;
}
.footer .f-sites a {
    display: inline-flex; align-items: baseline; gap: 8px;
    font-size: 11.5px; letter-spacing: .04em; color: rgba(255, 255, 255, .62);
    transition: color .25s;
}
.footer .f-sites a:hover { color: #fff; }
.footer .f-sites b { font-weight: 400; }
.footer .f-sites i {
    font-style: normal; font-size: 10px; letter-spacing: .06em;
    color: rgba(255,255,255,.42); padding: 1px 6px;
    border: 1px solid rgba(255,255,255,.18); white-space: nowrap;
}
@media (max-width: 860px) {
    .footer .f-sites { margin-top: 18px; padding-top: 18px; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
    .footer .f-sites a { font-size: 10.5px; }
}

/* 浮动按钮：中文文案（去掉英文副标题） */
.cc-fab-txt b { font-size: 13.5px; letter-spacing: .12em; }
.cc-fab-txt em {
    font-family: var(--sans); font-size: 11px; letter-spacing: .14em;
    text-transform: none; margin-top: 3px;
}

/* ============================================================
   v11 多巴胺配色层（2026-11-09）
   高饱和愉悦色系 · 深紫墨 · 大圆角 · 彩色分区
   粉 #FF4E9B / 橙 #FF8A3D / 黄 #FFC53D / 绿 #00C48C / 蓝 #3E8BFF / 紫 #8C5BFF
   ============================================================ */
:root {
    --bg: #FFFEFB;
    --bg-soft: #FFF6EE;
    --bg-card: #FFFFFF;
    --ink: #221A3D;
    --ink-soft: #6E6685;
    --ink-faint: #A79FC0;
    --gold: #FF4E9B;
    --gold-deep: #E83A87;
    --gold-soft: #FFD7E8;
    --blush: #FFF0F6;
    --rose: #FF4E9B;
    --line: #F1E3F6;
    --line-soft: #F8EFFC;
    --dopa-pink: #FF4E9B;
    --dopa-orange: #FF8A3D;
    --dopa-yellow: #FFC53D;
    --dopa-green: #00C48C;
    --dopa-blue: #3E8BFF;
    --dopa-purple: #8C5BFF;
    --dopa-deep: #241B45;
    --shadow: 0 18px 50px rgba(140, 91, 255, .12);
    --shadow-soft: 0 8px 24px rgba(255, 78, 155, .09);
    --radius: 18px;
}

body { background:
    radial-gradient(900px 420px at 92% -60px, rgba(255, 197, 61, .16), transparent 60%),
    radial-gradient(800px 460px at -80px 30%, rgba(62, 139, 255, .12), transparent 55%),
    radial-gradient(700px 500px at 50% 118%, rgba(255, 78, 155, .10), transparent 60%),
    var(--bg);
}
::selection { background: #FFC53D; color: #221A3D; }

/* kicker 与标题 */
.kicker { color: var(--dopa-purple); }
.kicker::before { content: ''; display: inline-block; width: 22px; height: 2px; border-radius: 2px;
    background: linear-gradient(90deg, var(--dopa-pink), var(--dopa-orange)); margin-right: 12px; vertical-align: middle; }
.mill9 .kicker::before, .cta9 .kicker::before, .footer .kicker::before { display: none; }

/* 按钮：胶囊 + 渐变 */
.btn-dear, .cta9 .btn-inv, .design-submit button, .btn-inv {
    background: linear-gradient(120deg, var(--dopa-pink), var(--dopa-orange));
    border: none; border-radius: 999px; color: #fff; font-weight: 600;
    box-shadow: 0 10px 26px rgba(255, 78, 155, .32); letter-spacing: .12em;
}
.btn-dear:hover, .cta9 .btn-inv:hover, .design-submit button:hover, .btn-inv:hover {
    background: linear-gradient(120deg, var(--dopa-orange), var(--dopa-pink));
    color: #fff; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255, 78, 155, .42);
}
.btn-line { border: 1.5px solid var(--dopa-purple); color: var(--dopa-purple); border-radius: 999px; font-weight: 600; }
.btn-line:hover { background: var(--dopa-purple); color: #fff; }

/* 导航 */
.nav { background: rgba(255, 254, 251, .92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav .nav-cta, .nav a.btn { background: linear-gradient(120deg, var(--dopa-pink), var(--dopa-orange)); border-radius: 999px; color: #fff; }
.nav .on { color: var(--dopa-pink); }
.nav a:hover { color: var(--dopa-pink); }

/* 首屏：彩色渐变底 */
.hero9 { border-bottom: none;
    background: linear-gradient(120deg, #FFF0F6 0%, #FFFEFB 42%, #EDF4FF 100%); }
.hero9-eyebrow i { background: linear-gradient(90deg, var(--dopa-pink), var(--dopa-orange)); height: 2px; border-radius: 2px; }
.hero9 h1 em { color: var(--dopa-purple); }
.hero9-facts div b { color: var(--dopa-blue); }
.hero9-flow i { color: var(--dopa-orange); }
.hero9-demo-tag { background: linear-gradient(120deg, var(--dopa-green), var(--dopa-blue)); color: #fff; border-radius: 999px; }
.hero9-config { background: #fff; border-radius: 22px; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden; }
.hero9-config .cfg-chips i { border-radius: 999px; }
.hero9-config .cfg-chips i:nth-child(5n+1) { background: var(--dopa-pink); }
.hero9-config .cfg-chips i:nth-child(5n+2) { background: var(--dopa-orange); }
.hero9-config .cfg-chips i:nth-child(5n+3) { background: var(--dopa-yellow); }
.hero9-config .cfg-chips i:nth-child(5n+4) { background: var(--dopa-green); }
.hero9-config .cfg-chips i:nth-child(5n+5) { background: var(--dopa-blue); }

/* 走马灯：渐变彩条 */
.marquee { background: linear-gradient(90deg, var(--dopa-pink), var(--dopa-purple) 45%, var(--dopa-blue)); }
.marquee, .marquee-track { color: #fff !important; }

/* 三步流程：奶黄底 + 彩色编号 */
.steps9 { background: linear-gradient(180deg, #FFF9E8, #FFFEFB); }
.step9 .s-num { color: var(--dopa-blue); }
.step9:nth-child(2) .s-num { color: var(--dopa-green); }
.step9:nth-child(3) .s-num { color: var(--dopa-pink); }
.step9 .s-link { color: var(--dopa-purple); border-color: var(--dopa-purple); }
.step9 .s-link:hover { color: var(--dopa-pink); border-color: var(--dopa-pink); }

/* 生产段：深紫 */
.mill9 { background: linear-gradient(135deg, #241B45, #35215E); }
.mill9 .kicker { color: var(--dopa-yellow); }
.mill9-stats { background: rgba(255, 255, 255, .16); border-radius: 18px; overflow: hidden; }
.mill9-stats div { background: var(--dopa-deep); }
.mill9-stats b { color: var(--dopa-yellow); }

/* 承诺条 */
.promise9 { background: linear-gradient(180deg, #F2FBF7, #FFFEFB); }
.promise9-item .ic, .promise9-item b { color: var(--dopa-green); }
.promise9-item:nth-child(2) .ic, .promise9-item:nth-child(2) b { color: var(--dopa-blue); }
.promise9-item:nth-child(3) .ic, .promise9-item:nth-child(3) b { color: var(--dopa-pink); }
.promise9-item:nth-child(4) .ic, .promise9-item:nth-child(4) b { color: var(--dopa-purple); }

/* 底部 CTA：粉紫渐变 */
.cta9 { background: linear-gradient(120deg, var(--dopa-pink) 0%, var(--dopa-purple) 60%, var(--dopa-blue) 120%); }
.cta9 p { color: rgba(255, 255, 255, .85); }
.cta9 .btn-inv { background: #fff; color: var(--dopa-purple); box-shadow: 0 12px 30px rgba(0, 0, 0, .18); }
.cta9 .btn-inv:hover { background: var(--dopa-yellow); color: #221A3D; }

/* 底稿网格 / 产品卡 */
.grid-products .card, .grid-products > a, .p-card { border-radius: var(--radius); }
.card:hover, .grid-products > a:hover, .p-card:hover { box-shadow: var(--shadow); }

/* 页脚：深紫 */
.footer { background: var(--dopa-deep); color: rgba(255, 255, 255, .78); }
.footer a:hover { color: var(--dopa-yellow); }
.footer .f-sites i { border-color: rgba(255, 255, 255, .25); color: rgba(255, 255, 255, .5); }

/* 指南卡片 / 文章页 */
.g-card { border-radius: var(--radius); border: 1px solid var(--line); transition: all .3s; background: #fff; }
.g-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--gold-soft); }
.g-cta { background: linear-gradient(120deg, #FFF0F6, #EDF4FF); border-radius: var(--radius); }
.article h2 { border-left: 4px solid var(--dopa-pink); padding-left: 14px; border-radius: 2px; }
.article table th { background: #FFF0F6; color: var(--dopa-deep); }

/* 表单 */
.photo9-drop { border: 2px dashed var(--dopa-blue); border-radius: var(--radius); background: #F3F8FF; }
.photo9-drop:hover { border-color: var(--dopa-pink); background: #FFF0F6; }

/* 移动端抽屉导航 */
.mnav { background: var(--dopa-deep); }
.mnav a { color: rgba(255, 255, 255, .9); }

/* 悬浮顾问按钮：渐变胶囊 */
.cc-fab { background: linear-gradient(120deg, var(--dopa-pink), var(--dopa-orange)) !important; border-radius: 999px; box-shadow: 0 12px 30px rgba(255, 78, 155, .4); }
.cc-fab-txt em { color: rgba(255, 255, 255, .9); }

/* 通用区块圆角统一 */
input, select, textarea { border-radius: 10px; border: 1px solid var(--line); }
.page-head.narrow { background: linear-gradient(180deg, #FFF0F6, transparent); }

/* ---- v11.1 多巴胺加强：渐变标题 / 导航按钮 / 彩色角标 ---- */
.hero9 h1 .grad {
    background: linear-gradient(96deg, var(--dopa-pink) 0%, var(--dopa-purple) 48%, var(--dopa-blue) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-fill-color: transparent;
}
.nav .nav-book, .nav .nav-left a.nav-book, .nav .nav-right a.nav-book {
    background: linear-gradient(120deg, var(--dopa-pink), var(--dopa-orange)) !important;
    color: #fff !important; border: none !important; border-radius: 999px !important;
    padding: 8px 22px !important; font-weight: 600 !important;
    letter-spacing: .1em !important; box-shadow: 0 6px 18px rgba(255, 78, 155, .3);
    margin-left: 10px;
}
.nav .nav-book:hover, .nav .nav-left a.nav-book:hover, .nav .nav-right a.nav-book:hover {
    color: #fff !important; transform: translateY(-1px);
    background: linear-gradient(120deg, var(--dopa-orange), var(--dopa-pink)) !important;
}
.lc-badge {
    background: linear-gradient(120deg, var(--dopa-pink), var(--dopa-orange)) !important;
    border-radius: 999px !important; font-weight: 500 !important;
    box-shadow: 0 4px 12px rgba(255, 78, 155, .3);
}
.look-card:nth-child(3n+2) .lc-badge { background: linear-gradient(120deg, var(--dopa-blue), var(--dopa-green)) !important; box-shadow: 0 4px 12px rgba(62, 139, 255, .28); }
.look-card:nth-child(3n+3) .lc-badge { background: linear-gradient(120deg, var(--dopa-purple), var(--dopa-blue)) !important; box-shadow: 0 4px 12px rgba(140, 91, 255, .28); }
.hero9-facts div:nth-child(1) b { color: var(--dopa-pink); }
.hero9-facts div:nth-child(2) b { color: var(--dopa-purple); }
.hero9-facts div:nth-child(3) b { color: var(--dopa-blue); }
.hero9-facts div:nth-child(4) b { color: var(--dopa-green); }
.look-card a, .look-card .lc-more { color: var(--dopa-purple); }
.sec-head .more, a.more { color: var(--dopa-pink); }

/* ---- v11.2 设计页主按钮 / 指南卡片彩色点缀 ---- */
.act-btn.primary { background: linear-gradient(120deg, var(--dopa-pink), var(--dopa-orange)); border: none; color: #fff; font-weight: 600; box-shadow: 0 8px 22px rgba(255, 78, 155, .28); }
.act-btn.primary:hover { background: linear-gradient(120deg, var(--dopa-orange), var(--dopa-pink)); color: #fff; }
.act-btn { border-radius: 999px; }
.act-btn:hover { border-color: var(--dopa-purple); color: var(--dopa-purple); }
.g-card { position: relative; overflow: hidden; }
.g-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, var(--dopa-pink), var(--dopa-orange)); }
.g-card:nth-child(3n+2)::before { background: linear-gradient(90deg, var(--dopa-blue), var(--dopa-green)); }
.g-card:nth-child(3n+3)::before { background: linear-gradient(90deg, var(--dopa-purple), var(--dopa-blue)); }
.filter-chip.on, .chip.on { background: var(--dopa-purple); color: #fff; border-color: var(--dopa-purple); }

/* 页脚品牌锚文本 */
.footer .f-brand-link { color: rgba(255,255,255,.92); border-bottom: 1px solid rgba(255,255,255,.25); }
.footer .f-brand-link:hover { color: var(--dopa-yellow); border-color: var(--dopa-yellow); }

/* ============================================================
   v12 品牌 LOGO 落位（2026-11-09）
   心形渐变标 + 品牌名同色系渐变，导航 / 抽屉 / 页脚 / 顾问框 / 404 统一
   ============================================================ */

/* 导航：标在左，名字在右 */
.nav .logo { display: flex; flex-direction: row; align-items: center; gap: 11px; }
.nav .logo .logo-mark {
    width: 40px; height: 40px; flex: 0 0 40px; display: block; object-fit: contain;
    filter: drop-shadow(0 3px 8px rgba(255, 78, 155, .22));
    transition: transform .35s cubic-bezier(.2, .8, .3, 1);
}
.nav .logo:hover .logo-mark { transform: rotate(-4deg) scale(1.04); }
.nav .logo .logo-text { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; line-height: 1; }
.nav .logo .zh {
    font-family: var(--display); font-size: 21px; font-weight: 600;
    letter-spacing: .14em; text-indent: 0;
    background: linear-gradient(96deg, #2B76E8 0%, #7A3FD8 30%, #F0247E 66%, #F5731A 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    padding-right: .02em;
}
.nav .logo .en {
    font-family: var(--sans); font-size: 9px; font-weight: 500;
    letter-spacing: .34em; text-indent: .06em; color: #9B87C9;
    text-transform: uppercase;
}
.nav .logo:hover .en { color: #FF4E9B; }

/* 移动端抽屉：顶部大标 */
.mnav-logo {
    display: block; width: 76px; height: 76px; margin: 6px auto 14px;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .28));
}

/* 页脚品牌块 */
.footer .f-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.footer .f-brand .f-brand-mark {
    width: 38px; height: 38px; flex: 0 0 38px; display: block;
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, .3));
}
.footer .f-brand-txt { display: flex; flex-direction: column; gap: 4px; }
.footer .f-brand .f-brand-name {
    font-family: var(--display); font-size: 19px; letter-spacing: .14em; color: #fff;
    background: linear-gradient(96deg, #9EC4FF 0%, #C9A8FF 40%, #FFA6CD 72%, #FFC48A 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.footer .f-brand .f-en { margin-top: 0; color: rgba(255, 255, 255, .5); font-size: 9px; letter-spacing: .3em; }

/* 顾问抽屉头部 */
.cc-brand { display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: .16em; font-size: 11px; }
.cc-brand img { width: 22px; height: 22px; display: block; flex: none; }
.cc-brand span { white-space: nowrap; }

/* 404 页 */
.nf9 .nf-logo { width: 96px; height: 96px; display: block; margin: 0 auto 22px;
    filter: drop-shadow(0 10px 24px rgba(255, 78, 155, .25)); }

@media (max-width: 860px) {
    .nav .logo { gap: 8px; }
    .nav .logo .logo-mark { width: 32px; height: 32px; flex-basis: 32px; }
    .nav .logo .zh { font-size: 16px; letter-spacing: .1em; }
    .nav .logo .en { font-size: 8px; letter-spacing: .26em; }
    .footer .f-brand .f-brand-mark { width: 32px; height: 32px; flex-basis: 32px; }
    .footer .f-brand .f-brand-name { font-size: 17px; }
}

/* 顾问弹窗头部：从旧棕色改为品牌深紫，与 LOGO 同色系 */
.cc-head { background: linear-gradient(150deg, #2A1E4E 0%, #3A2463 56%, #241B45 100%); }
.cc-head::before { border-color: rgba(255, 78, 155, .32); }
.cc-head::after { border-color: rgba(62, 139, 255, .26); }
.cc-brand { color: rgba(255, 255, 255, .74); }
.cc-status i { background: #00C48C !important; }
.cc-send { background: linear-gradient(120deg, var(--dopa-pink), var(--dopa-orange)); }
.cc-send:hover { background: linear-gradient(120deg, var(--dopa-orange), var(--dopa-pink)); }
.cc-quick button:hover { border-color: var(--dopa-purple); color: var(--dopa-purple); }

/* ============================================================
   扫码联系（公众号 / 小程序 / 一对一客服）
   ============================================================ */
.qr9 {
    position: relative; overflow: hidden;
    padding: 96px 5vw 100px;
    background: #FFFBF6;
    border-top: 1px solid var(--line);
}
.qr9::before, .qr9::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.qr9::before {
    left: -130px; top: -150px; width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(255, 78, 155, .16) 0%, rgba(255, 78, 155, 0) 68%);
}
.qr9::after {
    right: -150px; bottom: -170px; width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(62, 139, 255, .15) 0%, rgba(62, 139, 255, 0) 68%);
}
.qr9-inner { position: relative; max-width: 1040px; margin: 0 auto; text-align: center; }
.qr9 .kicker { justify-content: center; }
.qr9 h2 {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(25px, 3.2vw, 40px); letter-spacing: .1em; color: var(--ink);
}
.qr9 .qr-lead {
    max-width: 620px; margin: 16px auto 0;
    font-size: 13.5px; line-height: 2.05; letter-spacing: .04em; color: var(--ink-soft);
}
.qr9-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 24px; margin-top: 48px;
}
.qr-card {
    position: relative; overflow: hidden;
    background: #fff; border-radius: 20px;
    padding: 26px 20px 22px;
    box-shadow: 0 12px 34px rgba(36, 27, 69, .07);
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s;
}
.qr-card::before {
    content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--dopa-pink), var(--dopa-orange));
}
.qr-card:nth-child(2)::before { background: linear-gradient(90deg, var(--dopa-blue), var(--dopa-purple)); }
.qr-card:nth-child(3)::before { background: linear-gradient(90deg, var(--dopa-green), var(--dopa-blue)); }
.qr-card:hover { transform: translateY(-7px); box-shadow: 0 24px 54px rgba(36, 27, 69, .14); }
.qr-img {
    display: block; width: 100%; max-width: 180px; margin: 0 auto;
    aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: #fff;
}
.qr-img img { width: 100%; height: 100%; display: block; object-fit: contain; }
.qr-card figcaption { margin-top: 18px; }
.qr-card b {
    display: block; font-size: 15px; font-weight: 600;
    letter-spacing: .1em; color: var(--ink);
}
.qr-card em {
    display: block; margin-top: 7px; font-style: normal;
    font-size: 12px; letter-spacing: .04em; color: var(--ink-soft);
}
.qr9-tip {
    margin-top: 36px; font-size: 12px; letter-spacing: .05em; color: var(--ink-faint);
    line-height: 2;
}
.qr9-tip b { color: var(--dopa-pink); font-weight: 600; }
.qr9-tip i { font-style: normal; margin: 0 9px; color: var(--ink-faint); }
.qr9-tip a { color: var(--ink); border-bottom: 1px solid var(--line); }

/* 文章页内嵌版本（更紧凑） */
.qr9.qr-inline { padding: 52px 24px 56px; background: #FFFBF6; border: 1px solid var(--line); border-radius: 20px; margin: 40px 0 8px; }
.qr9.qr-inline::before, .qr9.qr-inline::after { display: none; }
.qr9.qr-inline h2 { font-size: clamp(19px, 2.2vw, 26px); border: 0; padding: 0; margin: 0; letter-spacing: .1em; }
.qr9.qr-inline .qr-lead { font-size: 12.5px; max-width: 520px; }
.qr9.qr-inline .qr9-grid { gap: 16px; margin-top: 30px; }
.qr9.qr-inline .qr-card { padding: 18px 14px 16px; box-shadow: 0 8px 22px rgba(36, 27, 69, .06); border-radius: 16px; }
.qr9.qr-inline .qr-img { max-width: 132px; }
.qr9.qr-inline .qr-card b { font-size: 13.5px; }
.qr9.qr-inline .qr-card em { font-size: 11.5px; }
.qr9.qr-inline .qr9-tip { margin-top: 24px; font-size: 11.5px; }

@media (max-width: 720px) {
    .qr9 { padding: 62px 4vw 66px; }
    .qr9 h2 { font-size: 21px; letter-spacing: .06em; line-height: 1.65; }
    .qr9 .qr-lead { font-size: 12.5px; line-height: 1.95; margin-top: 12px; }
    .qr9-grid { gap: 10px; margin-top: 28px; }
    .qr-card { padding: 14px 8px 12px; border-radius: 14px; }
    .qr-img { max-width: none; border-radius: 8px; }
    .qr-card figcaption { margin-top: 10px; }
    .qr-card b { font-size: 12px; letter-spacing: .02em; }
    .qr-card em { display: none; }
    .qr9-tip { margin-top: 24px; font-size: 11px; }
    .qr9-tip span { display: block; }
    .qr9-tip i { display: none; }
    .qr9.qr-inline { padding: 32px 14px 34px; margin: 30px 0 6px; }
    .qr9.qr-inline .qr9-grid { gap: 8px; margin-top: 22px; }
    .qr9.qr-inline .qr-card { padding: 12px 6px 10px; }
    .qr9.qr-inline .qr-img { max-width: none; }
}

/* 顾问抽屉里的三码 */
.cc-qr { margin-top: 18px; padding-top: 16px; border-top: 1px solid #EADFCE; }
.cc-qr-t {
    font-family: var(--display); font-size: 11px; letter-spacing: .22em;
    color: #A08B6C; text-transform: uppercase;
}
.cc-qr-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.cc-qr-item { text-align: center; }
.cc-qr-item img {
    width: 100%; height: auto; aspect-ratio: 1 / 1; display: block;
    background: #fff; border: 1px solid #EFE5D6; border-radius: 8px;
    transition: border-color .25s, transform .25s;
}
.cc-qr-item:hover img { border-color: var(--dopa-pink); transform: translateY(-2px); }
.cc-qr-item span { display: block; margin-top: 7px; font-size: 10.5px; letter-spacing: .04em; color: #7A736B; }

/* ============================================================
   v12 整体版式校准
   ============================================================ */

/* 1) 左右边界统一：所有 section 内容统一从同一基线起（修正 .sec 双重内边距导致的 124px 缩进） */
.sec-pick { padding-left: 0; padding-right: 0; max-width: 1280px; padding-top: 88px; padding-bottom: 76px; }
.steps9 { padding-top: 96px; padding-bottom: 78px; }
.sec-pick > .wrap { padding-left: 0 !important; padding-right: 0 !important; max-width: none; }

/* 2) 首屏正文：避免末行孤字 */
.hero9-lede { max-width: 520px; text-wrap: pretty; }
.hero9 h1 { text-wrap: balance; }
.sec-head h2, .mill9 h2, .qr9 h2, .cta9 h2 { text-wrap: balance; }

/* 3) 工艺段：改为双联竖构图，修掉图注重叠与超长留白 */
.mill9 { padding: 96px 5vw; }
.mill9-media {
    display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
    align-content: center;
}
.mill9-media figure { position: relative; margin: 0; overflow: hidden; }
.mill9-media figure + figure { margin-top: 0; }
.mill9-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.mill9-media figure:hover img { transform: scale(1.04); }
.mill9-media figcaption {
    position: absolute; left: 12px; bottom: 12px; right: auto;
    font-size: 9.5px; letter-spacing: .2em; padding: 7px 12px;
}

/* 4) 款式底稿：补第 9 格 CTA，消除 3 列网格的缺口 */
.look-card-more {
    position: relative; overflow: hidden; border: 1px solid transparent;
    display: flex; height: 100%;
    background: linear-gradient(150deg, #FF4E9B 0%, #8C5BFF 58%, #3E8BFF 100%);
    color: #fff; text-align: center;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.look-card-more::before {
    content: ''; position: absolute; right: -46px; top: -46px; width: 170px; height: 170px;
    border: 1px solid rgba(255, 255, 255, .34); border-radius: 50%;
}
.look-card-more::after {
    content: ''; position: absolute; left: -34px; bottom: -34px; width: 120px; height: 120px;
    border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
}
.look-card-more:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(140, 91, 255, .3); }
.look-card-more .lm-inner {
    position: relative; z-index: 2; flex: 1 1 auto; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 100%; padding: 34px 22px 38px;
}
.look-card-more .lm-kicker {
    font-style: normal; font-size: 9.5px; letter-spacing: .32em; text-transform: uppercase;
    color: rgba(255, 255, 255, .78); font-family: 'Inter', var(--sans);
    margin-bottom: 34px;
}
.look-card-more .lm-mid { display: block; }
.look-card-more b {
    display: block; font-family: 'Inter', var(--sans); font-size: 76px; font-weight: 600;
    line-height: .96; letter-spacing: -.04em;
    text-shadow: 0 6px 26px rgba(46, 20, 92, .22);
}
.look-card-more i { display: block; margin-top: 12px; font-style: normal; font-size: 12.5px; letter-spacing: .24em; opacity: .92; }
.look-card-more .lm-cta {
    display: inline-block; font-size: 12px; letter-spacing: .14em;
    padding: 12px 24px; border: 1px solid rgba(255, 255, 255, .62); border-radius: 999px;
    transition: background .3s, border-color .3s, color .3s;
}
.look-card-more .lm-cta { margin-top: 40px; }
.look-card-more:hover .lm-cta { background: #fff; color: #6A3FD0; border-color: #fff; }

/* 5) 扫码区：与全站同宽、留白收紧 */
.qr9 { padding: 76px 5vw 82px; }
.qr9-inner { max-width: 1280px; }
.qr9 .qr-img { max-width: 200px; }
.qr9 .qr-card { padding: 28px 22px 24px; }

/* 6) 联系方式（防爬占位，加载后替换为真实号码） */
.tel-safe { font-variant-numeric: tabular-nums; }
a.tel-safe { text-decoration: none; }

@media (max-width: 720px) {
    .sec-pick { padding-left: 4vw; padding-right: 4vw; }
    .mill9 { padding: 68px 5vw; }
    .mill9-media { gap: 10px; }
    .mill9-media figcaption {
        left: 8px; bottom: 8px; padding: 5px 9px;
        font-size: 8.5px; letter-spacing: .08em; white-space: nowrap;
    }
    .qr9 { padding: 56px 4vw 60px; }
    .qr9 .qr-img { max-width: none; }
    .qr9 .qr-card { padding: 14px 8px 12px; }
    .look-card-more { grid-column: span 2; min-height: 0; }
    .look-card-more .lm-inner { padding: 22px 16px 24px; gap: 14px; }
    .look-card-more .lm-kicker { font-size: 8.5px; letter-spacing: .24em; }
    .look-card-more b { font-size: 40px; }
    .look-card-more i { margin-top: 6px; font-size: 11px; }
    .look-card-more .lm-cta { margin-top: 22px; padding: 9px 18px; font-size: 11px; }
    .look-card-more .lm-kicker { margin-bottom: 14px; }
}

/* ============================================================
   v13 全站二维码横条（除首页/服务页以外的所有页面）
   ============================================================ */
.qrband {
    position: relative; overflow: hidden;
    padding: 62px 5vw;
    background: #FFFBF6;
    border-top: 1px solid var(--line);
}
.qrband::before, .qrband::after {
    content: ''; position: absolute; border-radius: 50%; pointer-events: none;
}
.qrband::before {
    left: -120px; top: -170px; width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(255, 78, 155, .13) 0%, rgba(255, 78, 155, 0) 70%);
}
.qrband::after {
    right: -140px; bottom: -190px; width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(62, 139, 255, .12) 0%, rgba(62, 139, 255, 0) 70%);
}
.qrband-inner {
    position: relative; max-width: 1280px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 56px;
}
.qb-kicker {
    font-size: 10.5px; letter-spacing: .32em; text-transform: uppercase;
    color: #B08D57; margin-bottom: 14px;
}
.qrband h2 {
    font-family: var(--display); font-weight: 400;
    font-size: clamp(23px, 2.5vw, 32px); letter-spacing: .08em;
    line-height: 1.5; color: var(--ink); text-wrap: balance;
}
.qb-lead {
    max-width: 470px; margin-top: 14px;
    font-size: 13px; line-height: 2; letter-spacing: .04em; color: var(--ink-soft);
}
.qb-tip {
    margin-top: 16px;
    font-size: 11.5px; letter-spacing: .05em; color: var(--ink-faint);
}
.qb-tip b { color: var(--dopa-pink); font-weight: 600; }
.qb-tip i { font-style: normal; margin: 0 8px; color: var(--line); }

.qb-codes {
    display: grid; grid-template-columns: repeat(3, 150px); gap: 16px;
}
.qb-codes .qr-card {
    padding: 16px 12px 14px; border-radius: 15px;
    box-shadow: 0 8px 24px rgba(36, 27, 69, .07);
}
.qb-codes .qr-img { max-width: none; border-radius: 8px; }
.qb-codes figcaption { margin-top: 11px; }
.qb-codes .qr-card b { font-size: 12.5px; letter-spacing: .04em; }
.qb-codes .qr-card em { margin-top: 5px; font-size: 11px; }

.qrband, .qr9 { scroll-margin-top: 92px; }

@media (max-width: 980px) {
    .qrband-inner { gap: 32px; }
    .qb-codes { grid-template-columns: repeat(3, 126px); gap: 12px; }
    .qb-codes .qr-card { padding: 12px 8px 11px; }
}

@media (max-width: 860px) {
    .qrband { padding: 46px 5vw 50px; }
    .qrband-inner { grid-template-columns: 1fr; gap: 26px; text-align: center; }
    .qrband h2 { font-size: 21px; letter-spacing: .06em; line-height: 1.6; }
    .qb-lead { margin: 10px auto 0; font-size: 12.5px; line-height: 1.95; }
    .qb-tip { margin-top: 12px; font-size: 11px; }
    .qb-codes { grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 420px; margin: 0 auto; width: 100%; }
    .qb-codes .qr-card { padding: 9px 6px 9px; border-radius: 11px; }
    .qb-codes .qr-card em { display: none; }
    .qb-codes .qr-card b { font-size: 11px; margin-top: 8px; }
}