/* ========================================
   卿云碧霞 - 茶叶网站样式
   大气恢弘 · 东方雅韵
   ======================================== */

/* ===== 基础重置 ===== */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    /* 主色调 - 墨金 */
    --color-ink: #1a1a1a;
    --color-ink-light: #2d2d2d;
    --color-gold: #c9a86a;
    --color-gold-light: #e0c896;
    --color-gold-dark: #a08550;
    --color-paper: #f5f0e8;
    --color-paper-dark: #e8e0d0;
    --color-cream: #faf6ef;

    /* 红茶色系 */
    --color-black-tea: #8B4513;
    --color-black-tea-light: #c4956a;
    --color-black-tea-dark: #5c2e0a;
    --color-black-tea-bg: #1a0e08;
    --color-black-tea-bg2: #2a1810;

    /* 绿茶色系 */
    --color-green-tea: #4a7c3f;
    --color-green-tea-light: #6b8e5a;
    --color-green-tea-dark: #2d5a25;
    --color-green-tea-bg: #0e1a0c;
    --color-green-tea-bg2: #1a2818;

    /* 花茶色系 */
    --color-flower-tea: #b8527e;
    --color-flower-tea-light: #d488aa;
    --color-flower-tea-dark: #8c3a5e;
    --color-flower-tea-bg: #1a0e14;
    --color-flower-tea-bg2: #2a1820;

    /* 白茶色系（珍珠银白） */
    --color-white-tea: #b8c5cc;
    --color-white-tea-light: #d4dde3;
    --color-white-tea-dark: #8a9aa3;
    --color-white-tea-bg: #0f1318;
    --color-white-tea-bg2: #1a1f24;

    /* 尺寸 */
    --nav-height: 70px;
    --max-width: 1200px;

    /* 字体 */
    --font-serif: 'Noto Serif SC', 'Songti SC', 'SimSun', serif;
    --font-brush: 'ZCOOL XiaoWei', 'Ma Shan Zheng', 'Long Cang', cursive;
    --font-brush-logo: 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'Long Cang', cursive;
}

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

body {
    font-family: var(--font-serif);
    background: var(--color-paper);
    color: var(--color-ink);
    overflow-x: hidden;
    line-height: 1.8;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

ul {
    list-style: none;
}

img {
    max-width: 100%;
    display: block;
}

/* ===== 加载动画 ===== */
.loader {
    position: fixed;
    inset: 0;
    background: var(--color-ink);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
}

.loader.hide {
    opacity: 0;
    visibility: hidden;
}

.loader-tea {
    animation: float 2s ease-in-out infinite;
}

.loader-logo-text {
    display: block;
    height: 42px;
    width: auto;
    margin-top: 20px;
    filter: drop-shadow(0 0 8px rgba(201, 168, 106, 0.35));
    animation: fadeIn 1.5s ease;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== 导航栏 ===== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--nav-height);
    z-index: 1000;
    transition: all 0.4s ease;
    background: transparent;
}

.navbar.scrolled {
    background: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.nav-container {
    max-width: 1400px;
    margin: 0 auto;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
}

/* ── Logo 笔画扫光（羽化渐变光带） ── */
.nav-logo-wrap {
    display: inline-block;
    position: relative;
}

.nav-logo-img {
    display: block;
    height: 46px;
    width: auto;
    position: relative;
    z-index: 1;
}

/* ---- 扫光容器 ---- */
.nav-logo-sweep {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    overflow: hidden;
}

/* ---- 亮版 logo：双图叠加，mask 渐变只透出光带部分扫过文字笔画 ---- */
.nav-logo-bright {
    display: block;
    height: 46px;
    width: auto;
    position: absolute;
    top: 0;
    left: 0;
    filter: brightness(3.2) saturate(0.15);
    -webkit-mask-image: linear-gradient(90deg,
        transparent 38%,
        rgba(0,0,0,0.25) 42%,
        rgba(0,0,0,0.65) 46%,
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,0.65) 54%,
        rgba(0,0,0,0.25) 58%,
        transparent 62%
    );
    mask-image: linear-gradient(90deg,
        transparent 38%,
        rgba(0,0,0,0.25) 42%,
        rgba(0,0,0,0.65) 46%,
        rgba(0,0,0,1) 50%,
        rgba(0,0,0,0.65) 54%,
        rgba(0,0,0,0.25) 58%,
        transparent 62%
    );
    mask-size: 300% 100%;
    -webkit-mask-size: 300% 100%;
    mask-position: 150% 0;
    -webkit-mask-position: 150% 0;
    opacity: 1;
    animation: logoSweep 6s linear infinite alternate;
    animation-delay: 1s;
}

@keyframes logoSweep {
    0%   { mask-position: 150% 0; -webkit-mask-position: 150% 0; }
    100% { mask-position: -50% 0; -webkit-mask-position: -50% 0; }
}

.hero-logo-link {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.nav-menu {
    display: flex;
    gap: 36px;
}

.nav-link {
    color: rgba(255, 255, 255, 0.92);
    font-size: 1.1rem;
    letter-spacing: 0.15em;
    font-weight: 500;
    position: relative;
    padding: 5px 0;
    transition: color 0.3s;
}

.nav-link span {
    display: inline-block;
    transition: opacity 0.3s ease;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 1px;
    background: var(--color-gold);
    transition: all 0.3s;
    transform: translateX(-50%);
}

.nav-link:hover,
.nav-link.active {
    color: var(--color-gold);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

/* 导航悬停显示副标题：红茶·卿云 / 绿茶·碧霞 */
.nav-link[data-hover] {
    position: relative;
}

.nav-link[data-hover]::before {
    content: attr(data-hover);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    color: var(--color-gold);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    font-size: 1.1rem;
    letter-spacing: 0.15em;
}

.nav-link[data-hover]:hover span {
    opacity: 0;
}

.nav-link[data-hover]:hover::before {
    opacity: 1;
}

.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.nav-toggle span {
    width: 25px;
    height: 2px;
    background: var(--color-gold);
    transition: all 0.3s;
    border-radius: 2px;
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* ===== Hero 首屏 ===== */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-video {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: #0a0a0a;
}

.hero-video video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0.85;
}

.hero-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.85) 0%,
        rgba(15, 15, 15, 0.6) 40%,
        rgba(10, 10, 10, 0.88) 100%
    );
    z-index: 1;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.mountain-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
}

/* 用SVG生成山水画意境 */
.mountain-back {
    height: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M0,400 L0,280 Q100,200 200,240 Q300,280 400,200 Q500,120 600,180 Q700,240 800,160 Q900,80 1000,160 Q1100,240 1200,200 L1200,400 Z' fill='%23151515' opacity='0.6'/%3E%3C/svg%3E") no-repeat bottom center / cover;
    opacity: 0.5;
}

.mountain-mid {
    height: 45%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M0,400 L0,300 Q80,220 180,260 Q280,300 380,220 Q480,140 580,200 Q680,260 780,180 Q880,100 980,180 Q1080,260 1200,220 L1200,400 Z' fill='%231a1a1a' opacity='0.7'/%3E%3C/svg%3E") no-repeat bottom center / cover;
}

.mountain-front {
    height: 35%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cpath d='M0,300 L0,220 Q100,160 200,200 Q300,240 400,160 Q500,80 600,140 Q700,200 800,120 Q900,40 1000,120 Q1100,200 1200,160 L1200,300 Z' fill='%230a0a0a' opacity='0.9'/%3E%3C/svg%3E") no-repeat bottom center / cover;
}

/* ---- 波浪倒影：两层渐变波峰翻转映射到黑色区域 ---- */
.mountain-reflection {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 34%;
    z-index: 4;
    pointer-events: none;
    display: none;
}

.mountain-reflection-back,
.mountain-reflection-mid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: cover;
    transform: scaleY(-1);
    transform-origin: center bottom;
}

.mountain-reflection-back {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M0,400 L0,280 Q100,200 200,240 Q300,280 400,200 Q500,120 600,180 Q700,240 800,160 Q900,80 1000,160 Q1100,240 1200,200 L1200,400 Z' fill='%23c9a86a'/%3E%3C/svg%3E");
    opacity: 0.70;
}

.mountain-reflection-mid {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cpath d='M0,400 L0,300 Q80,220 180,260 Q280,300 380,220 Q480,140 580,200 Q680,260 780,180 Q880,100 980,180 Q1080,260 1200,220 L1200,400 Z' fill='%23c9a86a'/%3E%3C/svg%3E");
    opacity: 0.55;
}

.mist-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
        transparent 0%,
        transparent 40%,
        rgba(201, 168, 106, 0.03) 55%,
        rgba(201, 168, 106, 0.06) 70%,
        rgba(10, 10, 10, 0.4) 90%,
        rgba(10, 10, 10, 0.8) 100%
    );
    animation: mistFlow 12s ease-in-out infinite;
}

.sun-glow {
    position: absolute;
    top: 15%;
    right: 10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(201, 168, 106, 0.15) 0%, rgba(201, 168, 106, 0.05) 40%, transparent 70%);
    border-radius: 50%;
    animation: glowPulse 6s ease-in-out infinite;
    z-index: 2;
}

/* 首屏底部右下书法寄语 */
.hero-quote {
    position: absolute;
    bottom: 28px;
    right: 50px;
    z-index: 10;
    font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'Long Cang', cursive;
    font-size: 1.6rem;
    letter-spacing: 0.14em;
    color: rgba(201, 168, 106, 0.78);
    text-align: right;
    writing-mode: horizontal-tb;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5);
    pointer-events: auto;
    transition: opacity 0.1s linear;
}

/* 寄语白色流光（hover 触发，参考 footer TEA 扫光） */
.hero-quote::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    font-family: inherit;
    font-size: inherit;
    letter-spacing: inherit;
    text-align: inherit;
    writing-mode: inherit;
    color: transparent;
    background: linear-gradient(
        90deg,
        transparent 38%,
        rgba(255,255,255,0.25) 42%,
        rgba(255,255,255,0.65) 46%,
        rgba(255,255,255,1) 50%,
        rgba(255,255,255,0.65) 54%,
        rgba(255,255,255,0.25) 58%,
        transparent 62%
    );
    background-size: 300% 100%;
    background-position: 150% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    pointer-events: none;
    opacity: 0;
}

.hero-quote:hover::after {
    opacity: 1;
    animation: heroQuoteShine 6s linear infinite alternate;
}

@keyframes heroQuoteShine {
    0% { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}

@keyframes mistFlow {
    0%, 100% { opacity: 0.8; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(30px); }
}

/* 底部中式线条祥云 */
.hero-clouds {
    display: none;
}

.cloud-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    background-position: bottom left;
    background-size: 1200px auto;
}

.cloud-1 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 280'%3E%3Cpath d='M0,240 Q100,220 200,240 T400,240 T600,240 T800,240 T1000,240 T1200,240' fill='none' stroke='%23e0c896' stroke-width='1.2' opacity='0.4'/%3E%3Cpath d='M0,215 Q100,195 200,215 T400,215 T600,215 T800,215 T1000,215 T1200,215' fill='none' stroke='%23c9a86a' stroke-width='1' opacity='0.3'/%3E%3Cpath d='M0,190 Q100,170 200,190 T400,190 T600,190 T800,190 T1000,190 T1200,190' fill='none' stroke='%23c9a86a' stroke-width='0.8' opacity='0.2'/%3E%3C/svg%3E");
    animation: cloudFlow 32s linear infinite;
    opacity: 0.35;
}

.cloud-2 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 280'%3E%3Cpath d='M0,250 Q100,232 200,250 T400,250 T600,250 T800,250 T1000,250 T1200,250' fill='none' stroke='%23ffffff' stroke-width='1.5' opacity='0.22'/%3E%3Cpath d='M0,228 Q100,210 200,228 T400,228 T600,228 T800,228 T1000,228 T1200,228' fill='none' stroke='%23ffffff' stroke-width='1' opacity='0.16'/%3E%3Cpath d='M0,206 Q100,188 200,206 T400,206 T600,206 T800,206 T1000,206 T1200,206' fill='none' stroke='%23ffffff' stroke-width='0.7' opacity='0.12'/%3E%3C/svg%3E");
    animation: cloudFlow 44s linear infinite reverse;
    bottom: 6%;
    opacity: 0.28;
}

.cloud-3 {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 280'%3E%3Cpath d='M0,258 Q100,242 200,258 T400,258 T600,258 T800,258 T1000,258 T1200,258' fill='none' stroke='%23c9a86a' stroke-width='1' opacity='0.25'/%3E%3Cpath d='M0,240 Q100,224 200,240 T400,240 T600,240 T800,240 T1000,240 T1200,240' fill='none' stroke='%23e0c896' stroke-width='0.7' opacity='0.18'/%3E%3C/svg%3E");
    animation: cloudFlow 56s linear infinite;
    bottom: 14%;
    opacity: 0.22;
}

@keyframes cloudFlow {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-1200px, 0, 0); }
}

.hero-content {
    position: relative;
    z-index: 10;
    color: var(--color-gold);
    padding: 0 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px 30px;
    width: 100%;
    max-width: 1200px;
    margin: 40px auto 0;
}

.hero-seal {
    display: none;
}

.hero-title {
    display: none;
}

.title-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(60px);
    animation: charReveal 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    animation-delay: calc(var(--i) * 0.2s + 0.5s);
    background: linear-gradient(180deg, #e0c896 0%, #c9a86a 50%, #a08550 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes charReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-brand {
    display: none;
}

.hero-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    height: 115px;
    margin: clamp(450px, 60vh, 680px) 0 12px 0;
    position: relative;
    animation: logoFloat 4s ease-in-out infinite;
}

.hero-logo img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 25px rgba(201, 168, 106, 0.45));
    position: relative;
    z-index: 2;
}

/* 古风元气涟漪光环：由内圈向外圈扩散震荡 */
.hero-logo-ripples {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    z-index: 1;
    pointer-events: none;
}

.hero-logo-ripples span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: none;
    background: radial-gradient(circle,
        rgba(201, 168, 106, 0.28) 0%,
        rgba(201, 168, 106, 0.10) 32%,
        rgba(201, 168, 106, 0.03) 55%,
        rgba(201, 168, 106, 0) 72%);
    box-shadow: 0 0 55px 22px rgba(201, 168, 106, 0.13);
    filter: blur(2.8px);
    opacity: 0;
    transform: scale(0.7);
    animation: logoRipple 5.2s ease-out infinite;
}

.hero-logo-ripples span:nth-child(1) { animation-delay: 0s; }
.hero-logo-ripples span:nth-child(2) { animation-delay: 1.3s; }
.hero-logo-ripples span:nth-child(3) { animation-delay: 2.6s; }
.hero-logo-ripples span:nth-child(4) { animation-delay: 3.9s; }

@keyframes logoRipple {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    22% {
        opacity: 0.85;
    }
    58% {
        opacity: 0.18;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes logoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

.hero-subtitle {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: var(--font-brush);
    font-size: clamp(2.2rem, 7vw, 4.4rem);
    letter-spacing: 0.05em;
    color: var(--color-gold-light);
    font-weight: 400;
    margin: 20px 0 30px;
    opacity: 0;
    animation:
        fadeInUp 1s ease 0.5s forwards,
        breathe 5s ease-in-out 1.5s infinite;
    text-shadow: 0 0 50px rgba(201, 168, 106, 0.4);
    line-height: 1.4;
    text-align: center;
}

.hero-center {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}

.hero-poem-left,
.hero-poem-right {
    display: flex;
    gap: 42px;
    align-items: flex-start;
}

.hero-poem-left {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    align-self: end;
    margin-bottom: clamp(60px, 12vh, 140px);
    margin-left: calc(-1 * max(0px, (100vw - 1200px) / 2) - 20px);
    padding-left: 170px;
    flex-direction: row;
    align-items: flex-start;
}

.hero-poem-right {
    display: none;
}

.poem-offset {
    margin-top: 1.2em;
}

.poem-col {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'Long Cang', cursive;
    font-size: clamp(1.25rem, 2.8vw, 1.75rem);
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.9;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.08);
}

@keyframes charIn {
    0% {
        opacity: 0;
        transform: scale(1.5);
        text-shadow: 0 0 0 rgba(255, 255, 255, 0);
    }
    60% {
        opacity: 1;
        transform: scale(1.35);
        text-shadow: 0 0 30px rgba(255, 255, 255, 0.35);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        text-shadow: 0 0 22px rgba(255, 255, 255, 0.25);
    }
}

.poem-char {
    display: inline-block;
    transform-origin: center;
    opacity: 0;
    animation: charIn 0.5s ease var(--reveal-delay, 1s) forwards;
    transition: opacity 0.35s ease, transform 0.35s ease, text-shadow 0.35s ease;
}

.poem-char.dim {
    opacity: 0.42;
    transform: scale(1);
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.05);
}

.poem-char.reading {
    opacity: 1;
    transform: scale(1.4);
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.45), 0 0 12px rgba(255, 255, 255, 0.3);
}

.poem-title-vertical {
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: 'Ma Shan Zheng', 'ZCOOL XiaoWei', 'Long Cang', cursive;
    font-size: clamp(1.25rem, 2.8vw, 1.75rem);
    color: rgba(255, 255, 255, 0.62);
    line-height: 1.9;
    font-weight: 400;
    letter-spacing: 0.18em;
    margin-top: 2.85em;
    opacity: 0;
    animation: fadeInUp 1s ease 0.9s forwards;
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.08);
}

.subtitle-left,
.subtitle-right,
.poem-left,
.poem-right,
.poem-dot,
.subtitle-dot,
.hero-desc {
    display: none;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-scroll {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    color: var(--color-gold);
    font-size: 0.9rem;
    letter-spacing: 0.2em;
    opacity: 0;
    animation: fadeInUp 1s ease 2.2s forwards;
    transition: opacity 0.3s;
}

.hero-scroll:hover {
    opacity: 0.8;
}

.scroll-arrow {
    width: 1px;
    height: 50px;
    background: linear-gradient(180deg, var(--color-gold), transparent);
    position: relative;
    overflow: hidden;
}

.scroll-arrow::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg, transparent, var(--color-gold));
    animation: scrollDown 2s ease-in-out infinite;
}

@keyframes scrollDown {
    0% { top: -50%; }
    100% { top: 100%; }
}

.hero-decor-left,
.hero-decor-right {
    display: none;
}

/* ===== 通用区块 ===== */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
}

.divider-line {
    width: 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.divider-dot {
    color: var(--color-gold);
    font-size: 0.8rem;
}

.section-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 600;
    letter-spacing: 0.2em;
    text-align: center;
    margin-bottom: 10px;
}

.section-en {
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    color: var(--color-gold);
    opacity: 0.7;
    margin-bottom: 40px;
}

/* ===== 品牌故事 ===== */
.story-section {
    padding: 100px 30px 20px;
    background: var(--color-cream);
    position: relative;
    overflow: hidden;
}

.story-section .series-bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27420%27%20viewBox%3D%270%200%20300%20420%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23c9a86a%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20transform%3D%27translate%28100%2C140%29%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C132%20C23%2C128%207%2C97%207%2C67%20C7%2C37%2026%2C13%2050%2C5%20C74%2C13%2093%2C37%2093%2C67%20C93%2C97%2077%2C128%2050%2C132%20Z%27%20stroke-width%3D%273.5%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C128%20L50%2C8%27%20stroke-width%3D%272.8%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C23%20L33%2C16%20M50%2C23%20L67%2C16%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C38%20L21%2C29%20M50%2C38%20L79%2C29%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C53%20L15%2C44%20M50%2C53%20L85%2C44%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C68%20L13%2C59%20M50%2C68%20L87%2C59%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C83%20L16%2C74%20M50%2C83%20L84%2C74%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C98%20L22%2C89%20M50%2C98%20L78%2C89%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C113%20L34%2C105%20M50%2C113%20L66%2C105%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
    opacity: 0.08;
}

.story-section::before {
    content: '';
    position: absolute;
    top: 10%;
    right: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(201, 168, 106, 0.05), transparent 70%);
    border-radius: 50%;
}

/* ===== 品牌故事介绍 ===== */
.story-intro {
    max-width: 700px;
    margin: 0 auto 60px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.story-quote {
    font-size: 1.15rem;
    line-height: 2.4;
    color: var(--color-gold-dark);
    font-weight: 400;
    letter-spacing: 0.08em;
    margin-top: 10px;
}

/* ===== 朝暮双霞对比 ===== */
.dawn-dusk {
    max-width: var(--max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

.dawn-dusk-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    background: #fff;
    position: relative;
    z-index: 0;
}

/* ── 方块 hover 抖动 + 残影 ── */
.dawn-dusk-card {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    background: #fff;
    position: relative;
    z-index: 1;
}

/* 残影层：两张半透明副本在卡后延迟跟随 */
.dawn-dusk-card::before,
.dawn-dusk-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: inherit;
    box-shadow: inherit;
    z-index: -1;
    opacity: 0;
    pointer-events: none;
}

.dawn-dusk-card:hover {
    animation: cardShake 0.4s ease-in-out;
}

.dawn-dusk-card:hover::before {
    animation: cardShake 0.4s ease-in-out;
    animation-delay: 0.05s;
    opacity: 0.35;
}

.dawn-dusk-card:hover::after {
    animation: cardShake 0.4s ease-in-out;
    animation-delay: 0.1s;
    opacity: 0.18;
}

@keyframes cardShake {
    0%   { transform: translateX(0) rotate(0); }
    12%  { transform: translateX(-4px) rotate(-0.6deg); }
    25%  { transform: translateX(4px) rotate(0.6deg); }
    37%  { transform: translateX(-3px) rotate(-0.4deg); }
    50%  { transform: translateX(3px) rotate(0.4deg); }
    62%  { transform: translateX(-1.5px) rotate(-0.2deg); }
    75%  { transform: translateX(1px); }
    88%  { transform: translateX(0); }
    100% { transform: translateX(0) rotate(0); }
}

.dawn-card {
    border: 1px solid rgba(107, 142, 90, 0.2);
}

.dusk-card {
    border: 1px solid rgba(196, 149, 106, 0.2);
}

.white-card {
    border: 1px solid rgba(184, 197, 204, 0.3);
}

.flower-card {
    border: 1px solid rgba(184, 82, 126, 0.2);
}

.dawn-dusk-scene {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
    border-radius: 12px 12px 0 0;
}

.dawn-scene {
    background: linear-gradient(180deg, #2a3d28 0%, #4a6b3f 30%, #6b8e5a 60%, #1a2818 100%);
}

.dusk-scene {
    background: linear-gradient(180deg, #3a1a0a 0%, #6b3520 30%, #c4956a 60%, #1a0e08 100%);
}

.white-scene {
    background: linear-gradient(180deg, #3a4248 0%, #6a7a82 30%, #b8c5cc 60%, #2a3036 100%);
}

.flower-scene {
    background: linear-gradient(180deg, #3a1a2a 0%, #6a3550 30%, #b8527e 60%, #2a1020 100%);
}

.dawn-dusk-scene svg {
    width: 100%;
    height: 100%;
    display: block;
}

.dawn-dusk-body {
    padding: 35px 30px 30px;
    text-align: center;
}

.dawn-dusk-time {
    display: inline-block;
    font-size: 0.85rem;
    letter-spacing: 0.3em;
    color: var(--color-gold-dark);
    padding: 4px 16px;
    border: 1px solid rgba(201, 168, 106, 0.4);
    border-radius: 20px;
    margin-bottom: 18px;
}

.dawn-card .dawn-dusk-time {
    color: #4a7c3f;
    border-color: rgba(74, 124, 63, 0.4);
}

.dusk-card .dawn-dusk-time {
    color: #8B4513;
    border-color: rgba(139, 69, 19, 0.4);
}

.white-card .dawn-dusk-time {
    color: #6a7a82;
    border-color: rgba(106, 122, 130, 0.4);
}

.flower-card .dawn-dusk-time {
    color: #8c3a5e;
    border-color: rgba(140, 58, 94, 0.4);
}

.dawn-dusk-name {
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    margin-bottom: 8px;
}

.dawn-card .dawn-dusk-name {
    color: #2d5a25;
}

.dusk-card .dawn-dusk-name {
    color: #5c2e0a;
}

.white-card .dawn-dusk-name {
    color: #4a5a62;
}

.flower-card .dawn-dusk-name {
    color: #6a2040;
}

.dawn-dusk-en {
    font-size: 0.75rem;
    letter-spacing: 0.25em;
    color: var(--color-gold-dark);
    opacity: 0.6;
    margin-bottom: 20px;
    font-style: italic;
}

.dawn-dusk-text {
    font-size: 1rem;
    line-height: 2.1;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-ink);
    text-align: justify;
    margin-bottom: 25px;
}

.dawn-dusk-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(201, 168, 106, 0.2);
}

.dawn-dusk-tag {
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    color: var(--color-gold-dark);
    opacity: 0.8;
}

.dawn-dusk-arrow {
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    cursor: pointer;
    transition: transform 0.3s, opacity 0.3s;
}

.dawn-card .dawn-dusk-arrow {
    color: #4a7c3f;
}

.dusk-card .dawn-dusk-arrow {
    color: #8B4513;
}

.white-card .dawn-dusk-arrow {
    color: #6a7a82;
}

.flower-card .dawn-dusk-arrow {
    color: #8c3a5e;
}

.dawn-dusk-card:hover .dawn-dusk-arrow {
    transform: translateX(6px);
    opacity: 1;
}

/* 中间分隔 */
.dawn-dusk-divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    gap: 20px;
}

.dawn-dusk-circle {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    letter-spacing: 0.1em;
    color: var(--color-gold);
    border: 1px solid var(--color-gold);
    background: var(--color-cream);
    font-weight: 500;
    flex-shrink: 0;
}

.dawn-dusk-line {
    width: 40px;
    flex: 1;
    min-height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2040%20200%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27mg%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%270%27%20y2%3D%271%27%3E%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23c9a86a%27%20stop-opacity%3D%270.15%27%2F%3E%3Cstop%20offset%3D%2750%25%27%20stop-color%3D%27%23c9a86a%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23c9a86a%27%20stop-opacity%3D%270.15%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolyline%20points%3D%2720%2C0%2020%2C8%2020%2C18%2022%2C22%2020%2C26%2018%2C30%2020%2C34%2024%2C40%2020%2C46%2015%2C52%2020%2C58%2027%2C64%2020%2C70%2012%2C76%2020%2C82%208%2C88%2020%2C94%205%2C100%2020%2C106%2032%2C112%2012%2C118%2020%2C124%2028%2C130%2020%2C136%2015%2C142%2020%2C148%2025%2C154%2020%2C160%2018%2C166%2020%2C170%2022%2C174%2020%2C178%2020%2C184%2020%2C192%2020%2C200%27%20fill%3D%27none%27%20stroke%3D%27url%28%23mg%29%27%20stroke-width%3D%271.8%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

/* ===== 品牌总结 ===== */
.story-summary {
    max-width: var(--max-width);
    margin: 60px auto 0;
    position: relative;
    z-index: 1;
}

.story-stats {
    display: flex;
    justify-content: center;
    gap: 60px;
    padding: 40px 0;
    border-top: 1px solid rgba(201, 168, 106, 0.3);
}

.stat-item {
    text-align: center;
}

.stat-num {
    display: block;
    font-size: 2.8rem;
    font-weight: 700;
    color: var(--color-gold-dark);
    line-height: 1;
    margin-bottom: 8px;
}

.stat-value {
    font-size: inherit;
    font-weight: inherit;
    color: inherit;
}

.stat-suffix {
    font-size: 1.2rem;
    color: var(--color-ink-light);
    font-weight: 700;
    margin-left: 2px;
}

.stat-label {
    font-size: 1.2rem;
    color: var(--color-ink-light);
    letter-spacing: 0.1em;
}

.story-origin {
    text-align: center;
    font-size: 1.05rem;
    line-height: 2.2;
    color: var(--color-gold-dark);
    margin-top: 30px;
    letter-spacing: 0.05em;
    font-weight: 400;
}

/* ===== 茶系列通用 ===== */
.tea-series {
    position: relative;
    padding: 120px 30px;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
}

.series-bg-pattern {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 140%;
    height: 140%;
    opacity: 0.025;
    background-size: 390px;
    background-repeat: repeat;
    background-position: center;
    transform: rotate(15deg);
    z-index: 0;
    pointer-events: none;
}

/* 红茶：叶子线稿（暖金色，3倍留白稀疏平铺） */
.black-tea .series-bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27420%27%20viewBox%3D%270%200%20300%20420%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23c9a86a%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20transform%3D%27translate%28100%2C140%29%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C132%20C23%2C128%207%2C97%207%2C67%20C7%2C37%2026%2C13%2050%2C5%20C74%2C13%2093%2C37%2093%2C67%20C93%2C97%2077%2C128%2050%2C132%20Z%27%20stroke-width%3D%273.5%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C128%20L50%2C8%27%20stroke-width%3D%272.8%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C23%20L33%2C16%20M50%2C23%20L67%2C16%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C38%20L21%2C29%20M50%2C38%20L79%2C29%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C53%20L15%2C44%20M50%2C53%20L85%2C44%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C68%20L13%2C59%20M50%2C68%20L87%2C59%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C83%20L16%2C74%20M50%2C83%20L84%2C74%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C98%20L22%2C89%20M50%2C98%20L78%2C89%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C113%20L34%2C105%20M50%2C113%20L66%2C105%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}

/* 绿茶：叶子线稿（橄榄绿，3倍留白稀疏平铺） */
.green-tea .series-bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27420%27%20viewBox%3D%270%200%20300%20420%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%2397a481%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20transform%3D%27translate%28100%2C140%29%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C132%20C23%2C128%207%2C97%207%2C67%20C7%2C37%2026%2C13%2050%2C5%20C74%2C13%2093%2C37%2093%2C67%20C93%2C97%2077%2C128%2050%2C132%20Z%27%20stroke-width%3D%273.5%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C128%20L50%2C8%27%20stroke-width%3D%272.8%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C23%20L33%2C16%20M50%2C23%20L67%2C16%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C38%20L21%2C29%20M50%2C38%20L79%2C29%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C53%20L15%2C44%20M50%2C53%20L85%2C44%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C68%20L13%2C59%20M50%2C68%20L87%2C59%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C83%20L16%2C74%20M50%2C83%20L84%2C74%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C98%20L22%2C89%20M50%2C98%20L78%2C89%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C113%20L34%2C105%20M50%2C113%20L66%2C105%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}

/* 花茶：叶子线稿（烟粉色，3倍留白稀疏平铺） */
.flower-tea .series-bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27420%27%20viewBox%3D%270%200%20300%20420%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23d488aa%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20transform%3D%27translate%28100%2C140%29%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C132%20C23%2C128%207%2C97%207%2C67%20C7%2C37%2026%2C13%2050%2C5%20C74%2C13%2093%2C37%2093%2C67%20C93%2C97%2077%2C128%2050%2C132%20Z%27%20stroke-width%3D%273.5%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C128%20L50%2C8%27%20stroke-width%3D%272.8%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C23%20L33%2C16%20M50%2C23%20L67%2C16%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C38%20L21%2C29%20M50%2C38%20L79%2C29%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C53%20L15%2C44%20M50%2C53%20L85%2C44%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C68%20L13%2C59%20M50%2C68%20L87%2C59%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C83%20L16%2C74%20M50%2C83%20L84%2C74%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C98%20L22%2C89%20M50%2C98%20L78%2C89%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C113%20L34%2C105%20M50%2C113%20L66%2C105%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}

/* 白茶：叶子线稿（珍珠银白，3倍留白稀疏平铺） */
.white-tea .series-bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27420%27%20viewBox%3D%270%200%20300%20420%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23c8d0d6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20transform%3D%27translate%28100%2C140%29%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C132%20C23%2C128%207%2C97%207%2C67%20C7%2C37%2026%2C13%2050%2C5%20C74%2C13%2093%2C37%2093%2C67%20C93%2C97%2077%2C128%2050%2C132%20Z%27%20stroke-width%3D%273.5%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C128%20L50%2C8%27%20stroke-width%3D%272.8%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C23%20L33%2C16%20M50%2C23%20L67%2C16%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C38%20L21%2C29%20M50%2C38%20L79%2C29%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C53%20L15%2C44%20M50%2C53%20L85%2C44%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C68%20L13%2C59%20M50%2C68%20L87%2C59%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C83%20L16%2C74%20M50%2C83%20L84%2C74%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C98%20L22%2C89%20M50%2C98%20L78%2C89%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C113%20L34%2C105%20M50%2C113%20L66%2C105%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}

.series-container {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.series-header {
    text-align: center;
    margin-bottom: 70px;
}

.series-number-wrap {
    position: relative;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 76px;
    height: 76px;
    margin: 0 auto 15px;
}

.series-number {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    color: var(--color-gold);
    font-family: var(--font-brush);
    width: 54px;
    height: 54px;
    border: 1px solid rgba(201, 168, 106, 0.45);
    border-radius: 50%;
    line-height: 1;
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(4px);
}

.ink-ring {
    position: absolute;
    inset: 0;
    width: 76px;
    height: 76px;
    animation: inkRingRotate 10s linear infinite;
    z-index: 1;
    overflow: visible;
}

.ink-path {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 480;
    stroke-dashoffset: 480;
    animation: inkPathDraw 2s ease-out forwards;
}

.ink-path-main {
    stroke-width: 3;
    animation-delay: 0.3s;
}

.ink-path-sub {
    stroke-width: 1;
    animation-delay: 0.8s;
    opacity: 0.4;
}


@keyframes inkPathDraw {
    0% {
        stroke-dashoffset: 480;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

@keyframes inkRingRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.series-title {
    font-size: clamp(2.2rem, 5vw, 3.2rem);
    font-weight: 700;
    letter-spacing: 0.25em;
    margin-bottom: 12px;
}

.series-en {
    font-size: 0.9rem;
    letter-spacing: 0.3em;
    opacity: 0.6;
    margin-bottom: 20px;
}

.series-desc {
    font-size: 1.05rem;
    line-height: 2;
    opacity: 0.75;
    font-weight: 300;
}

.series-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

/* ===== 茶卡片 ===== */
.tea-card {
    perspective: 1000px;
}

.card-inner {
    position: relative;
    padding: 45px 30px;
    border-radius: 8px;
    text-align: center;
    transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.card-inner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), transparent);
    opacity: 0;
    transition: opacity 0.5s;
}

.tea-card:hover .card-inner {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 255, 255, 0.2);
}

.tea-card:hover .card-inner::before {
    opacity: 1;
}

.card-icon {
    margin-bottom: 25px;
    display: flex;
    justify-content: center;
    transition: transform 0.5s;
}

.card-icon-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: none;
    transition: border-color 0.5s;
}

.tea-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.tea-card:hover .card-icon {
    transform: scale(1.25) rotate(-5deg);
}

.tea-card:hover .card-icon-img {
    border-color: rgba(255, 255, 255, 0.6);
}

.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    margin-bottom: 8px;
}

.card-subtitle {
    font-size: 0.8rem;
    letter-spacing: 0.2em;
    opacity: 0.5;
    margin-bottom: 20px;
    font-style: italic;
}

.card-desc {
    font-size: 0.95rem;
    line-height: 2;
    opacity: 0.7;
    margin-bottom: 25px;
    text-align: justify;
    font-weight: 300;
}

.card-tag {
    display: inline-block;
    padding: 5px 18px;
    font-size: 0.8rem;
    letter-spacing: 0.15em;
    border-radius: 20px;
    border: 1px solid currentColor;
    opacity: 0.7;
    transition: all 0.3s;
}

.tea-card:hover .card-tag {
    opacity: 1;
    transform: scale(1.05);
}

/* ===== 红茶系列 ===== */
.black-tea {
    background: linear-gradient(160deg, var(--color-black-tea-bg) 0%, var(--color-black-tea-bg2) 50%, #0d0805 100%);
    color: #e8d5b8;
}

.black-tea .series-title { color: var(--color-black-tea-light); }
.black-tea .series-en { color: var(--color-black-tea-light); }
.black-tea .series-number { color: var(--color-black-tea-light); border-color: var(--color-black-tea-light); }

.black-tea-card {
    background: linear-gradient(160deg, rgba(139, 69, 19, 0.12), rgba(92, 46, 10, 0.06));
}

.black-tea .card-title { color: var(--color-black-tea-light); }
.black-tea .card-tag { color: var(--color-black-tea-light); }

/* ===== 绿茶系列 ===== */
.green-tea {
    background: linear-gradient(160deg, var(--color-green-tea-bg) 0%, var(--color-green-tea-bg2) 50%, #080f06 100%);
    color: #c8e0bc;
}

.green-tea .series-title { color: var(--color-green-tea-light); }
.green-tea .series-en { color: var(--color-green-tea-light); }
.green-tea .series-number { color: var(--color-green-tea-light); border-color: var(--color-green-tea-light); }

.green-tea-card {
    background: linear-gradient(160deg, rgba(74, 124, 63, 0.12), rgba(45, 90, 37, 0.06));
}

.green-tea .card-title { color: var(--color-green-tea-light); }
.green-tea .card-tag { color: var(--color-green-tea-light); }

/* ===== 花茶系列 ===== */
.flower-tea {
    background: linear-gradient(160deg, var(--color-flower-tea-bg) 0%, var(--color-flower-tea-bg2) 50%, #0d060a 100%);
    color: #e8c8d8;
}

.flower-tea .series-title { color: var(--color-flower-tea-light); }
.flower-tea .series-en { color: var(--color-flower-tea-light); }
.flower-tea .series-number { color: var(--color-flower-tea-light); border-color: var(--color-flower-tea-light); }

.flower-tea-card {
    background: linear-gradient(160deg, rgba(184, 82, 126, 0.12), rgba(140, 58, 94, 0.06));
}

.flower-tea .card-title { color: var(--color-flower-tea-light); }
.flower-tea .card-tag { color: var(--color-flower-tea-light); }

/* ===== 白茶系列 ===== */
.white-tea {
    background: linear-gradient(160deg, var(--color-white-tea-bg) 0%, var(--color-white-tea-bg2) 50%, #080a0c 100%);
    color: #d4dde3;
}

.white-tea .series-title { color: var(--color-white-tea-light); }
.white-tea .series-en { color: var(--color-white-tea-light); }
.white-tea .series-number { color: var(--color-white-tea-light); border-color: var(--color-white-tea-light); }

.white-tea-card {
    background: linear-gradient(160deg, rgba(184, 197, 204, 0.12), rgba(138, 154, 163, 0.06));
}

.white-tea .card-title { color: var(--color-white-tea-light); }
.white-tea .card-tag { color: var(--color-white-tea-light); }

/* ===== 品牌系列卡片（云霞之韵） ===== */
.brand-series-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 760px;
    margin: 60px auto 0;
    padding: 0 30px;
    position: relative;
    z-index: 1;
}

.brand-series-card {
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(201, 168, 106, 0.15);
    border-radius: 12px;
    padding: 28px 22px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    backdrop-filter: blur(4px);
}

.brand-series-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}

.brand-series-tag {
    display: inline-block;
    padding: 3px 14px;
    border-radius: 20px;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: #fff;
    margin-bottom: 14px;
    font-weight: 500;
}

.brand-red .brand-series-tag { background: #8B4513; }
.brand-green .brand-series-tag { background: #4a7c3f; }
.brand-white .brand-series-tag { background: #b8c5cc; color: #3a4550; }
.brand-purple .brand-series-tag { background: #8c3a5e; }

.brand-series-name {
    font-family: var(--font-brush);
    font-size: 1.35rem;
    letter-spacing: 0.08em;
    color: var(--color-ink);
    margin-bottom: 12px;
    font-weight: 500;
}

.brand-series-divider {
    color: rgba(201, 168, 106, 0.5);
    margin: 0 2px;
}

.brand-series-text {
    font-size: 0.88rem;
    line-height: 1.8;
    color: #6b5d4a;
    text-align: justify;
}

/* ===== 茶道文化 ===== */
.culture-section {
    padding: 100px 30px;
    background: linear-gradient(180deg, var(--color-cream), var(--color-paper));
    position: relative;
    overflow: hidden;
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
}

.culture-section .series-bg-pattern {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27300%27%20height%3D%27420%27%20viewBox%3D%270%200%20300%20420%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%23c9a86a%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20transform%3D%27translate%28100%2C140%29%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C132%20C23%2C128%207%2C97%207%2C67%20C7%2C37%2026%2C13%2050%2C5%20C74%2C13%2093%2C37%2093%2C67%20C93%2C97%2077%2C128%2050%2C132%20Z%27%20stroke-width%3D%273.5%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C128%20L50%2C8%27%20stroke-width%3D%272.8%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C23%20L33%2C16%20M50%2C23%20L67%2C16%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C38%20L21%2C29%20M50%2C38%20L79%2C29%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C53%20L15%2C44%20M50%2C53%20L85%2C44%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C68%20L13%2C59%20M50%2C68%20L87%2C59%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C83%20L16%2C74%20M50%2C83%20L84%2C74%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C98%20L22%2C89%20M50%2C98%20L78%2C89%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%27M50%2C113%20L34%2C105%20M50%2C113%20L66%2C105%27%20stroke-width%3D%272%27%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
    opacity: 0.08;
}

.culture-container {
    max-width: var(--max-width);
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.culture-header {
    text-align: center;
    margin-bottom: 60px;
}

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

.culture-card {
    text-align: center;
    padding: 40px 25px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.06);
    transition: all 0.4s ease;
    border: 1px solid rgba(201, 168, 106, 0.15);
    position: relative;
    overflow: hidden;
}

.culture-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    transform: scaleX(0);
    transition: transform 0.4s;
}

.culture-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.culture-card:hover::before {
    transform: scaleX(1);
}

.culture-icon {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    color: var(--color-gold);
    transition: transform 0.4s;
}

.culture-card:hover .culture-icon {
    transform: scale(1.15);
}

.culture-card h3 {
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    margin-bottom: 12px;
    color: var(--color-ink);
}

.culture-card p {
    font-size: 0.9rem;
    line-height: 1.8;
    color: var(--color-ink-light);
    font-weight: 300;
}

/* ===== 四茶冲泡储存指南 ===== */
.brewing-guide {
    margin-top: 50px;
    padding-top: 0;
    border-top: none;
    max-width: var(--max-width);
    margin-left: auto;
    margin-right: auto;
}

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

.brewing-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(201, 168, 106, 0.12);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.brewing-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
}

.brewing-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #fff;
}

.brewing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    flex-shrink: 0;
}

.brew-black .brewing-card-header { background: linear-gradient(135deg, #8B4513, #5c2e0a); }
.brew-green .brewing-card-header { background: linear-gradient(135deg, #4a7c3f, #2d5a25); }
.brew-white .brewing-card-header { background: linear-gradient(135deg, #8a9aa3, #5a6a72); }
.brew-flower .brewing-card-header { background: linear-gradient(135deg, #b8527e, #8c3a5e); }

.brewing-card-body {
    padding: 24px 22px;
}

.brewing-row {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

.brewing-row:last-child {
    margin-bottom: 0;
}

.brewing-label {
    flex-shrink: 0;
    width: 32px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding-top: 2px;
}

.brew-black .brewing-label { color: #8B4513; }
.brew-green .brewing-label { color: #4a7c3f; }
.brew-white .brewing-label { color: #5a6a72; }
.brew-flower .brewing-label { color: #8c3a5e; }

.brewing-detail {
    flex: 1;
}

.brewing-detail p {
    font-size: 0.85rem;
    line-height: 1.75;
    color: var(--color-ink-light);
    font-weight: 400;
}

.brewing-detail strong {
    font-weight: 600;
    color: var(--color-ink);
}

/* ===== 底部 ===== */
.footer {
    background: #0d0d0d;
    color: rgba(255, 255, 255, 0.6);
    padding: 70px 30px 0;
    content-visibility: auto;
    contain-intrinsic-size: 1px 400px;
}

.footer-container {
    max-width: var(--max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    padding-bottom: 50px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-container > * {
    flex: 0 0 auto;
}

.footer-brand {
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footer-brand .footer-logo {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo-text {
    position: relative;
    display: inline-block;
    color: var(--color-gold);
    font-size: 1.5rem;
    letter-spacing: 0.18em;
    margin-bottom: 8px;
    font-weight: 700;
    line-height: 1;
    text-align: center;
}

.footer-logo-tea {
    position: relative;
    color: #467c2a;
}

.footer-logo-text .footer-logo-tea::after {
    content: 'TEA';
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.5rem;
    letter-spacing: 0.18em;
    background: linear-gradient(90deg,
        transparent 38%,
        rgba(255,255,255,0.25) 42%,
        rgba(255,255,255,0.65) 46%,
        rgba(255,255,255,1) 50%,
        rgba(255,255,255,0.65) 54%,
        rgba(255,255,255,0.25) 58%,
        transparent 62%
    );
    background-size: 300% 100%;
    background-position: 150% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: footerSweep 6s linear infinite alternate;
    animation-delay: 1s;
    pointer-events: none;
}

@keyframes footerSweep {
    0%   { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

.footer-brand p {
    font-size: 0.9rem;
    line-height: 1.8;
}

.footer-slogan {
    display: block;
    width: 100%;
    text-align: center;
    margin-bottom: 8px;
}

.footer-slogan span {
    display: inline-block;
    text-align: center;
    white-space: nowrap;
}

.footer-qr {
    margin-top: 18px;
    padding-top: 0;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
}

.footer-qr-frame {
    display: inline-block;
    padding: 4px;
    border: 2px solid rgba(201, 168, 106, 0.5);
    border-radius: 6px;
    animation: qrShake 0.5s ease-in-out infinite;
}

.footer-qr-img {
    display: block;
    width: 80px;
    height: 80px;
    border-radius: 3px;
}

@keyframes qrShake {
    0%   { transform: rotate(0deg) translate(0, 0); }
    20%  { transform: rotate(0.8deg) translate(1px, -1px); }
    40%  { transform: rotate(-0.8deg) translate(-1px, 1px); }
    60%  { transform: rotate(0.6deg) translate(1px, 0); }
    80%  { transform: rotate(-0.6deg) translate(-1px, 0); }
    100% { transform: rotate(0deg) translate(0, 0); }
}

.footer-links,
.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.footer-links h4,
.footer-contact h4 {
    color: var(--color-gold);
    font-size: 1rem;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
    font-weight: 500;
    margin-left: 0;
    padding-left: 0;
}

.footer-links a {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 12px;
    margin-left: 0;
    padding-left: 0;
    transition: all 0.3s;
    text-align: left;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--color-gold);
}

.footer-links a.tea-glow {
    color: #99ff66;
    animation: teaBreath 2.5s ease-in-out infinite alternate;
}

@keyframes teaBreath {
    0% {
        color: #99ff66;
        text-shadow: 0 0 2px rgba(153, 255, 102, 0.3);
    }
    100% {
        color: #ffffff;
        text-shadow: 0 0 8px rgba(255, 255, 255, 0.6), 0 0 3px rgba(255, 255, 255, 0.4);
    }
}

.footer-contact p {
    font-size: 0.9rem;
    margin-bottom: 12px;
    line-height: 1.6;
    margin-left: 0;
    padding-left: 0;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-contact-icon {
    flex-shrink: 0;
    vertical-align: middle;
}

.footer-contact a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: all 0.3s;
}

.footer-contact a:hover {
    color: var(--color-gold);
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 12px;
    font-size: 0.9rem;
    line-height: 1.6;
}

.social-icon.icp {
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: all 0.3s;
}

.social-icon.icp:hover {
    color: var(--color-gold);
}

.footer-bottom {
    text-align: center;
    padding: 25px 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.3);
    letter-spacing: 0.05em;
}

/* ===== 返回顶部 ===== */
.back-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    z-index: 999;
}

/* ===== 微信客服浮动按钮 ===== */
.wechat-fixed {
    position: fixed;
    bottom: 90px;
    right: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(26, 26, 26, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    z-index: 1000;
    text-decoration: none;
}

.wechat-fixed::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.6) 0%,
        rgba(7, 193, 96, 0.5) 50%,
        rgba(7, 193, 96, 0) 100%);
    z-index: -1;
    opacity: 0;
    transform: scale(1);
    animation: wechatGlow 4s ease-out infinite;
    pointer-events: none;
}

.wechat-fixed::after {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, 0.55) 0%,
        rgba(7, 193, 96, 0.45) 55%,
        rgba(7, 193, 96, 0) 100%);
    z-index: -1;
    opacity: 0;
    transform: scale(1);
    animation: wechatGlow 4s ease-out infinite;
    animation-delay: 2s;
    pointer-events: none;
}

.wechat-fixed.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wechat-fixed:hover {
    background: var(--color-gold);
    color: var(--color-ink);
    transform: translateY(-3px);
}

.wechat-fixed:hover::before,
.wechat-fixed:hover::after {
    animation-play-state: paused;
}

@keyframes wechatGlow {
    0% {
        transform: scale(1);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    70% {
        opacity: 0.4;
    }
    100% {
        transform: scale(1.18);
        opacity: 0;
    }
}

.back-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-top:hover {
    background: var(--color-gold);
    color: var(--color-ink);
    transform: translateY(-3px);
}

/* ===== 滚动渐入动画 ===== */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== 响应式 ===== */
@media (max-width: 968px) {
    .dawn-dusk {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .dawn-dusk-divider {
        flex-direction: row;
        padding: 10px 0;
    }

    .dawn-dusk-line {
        width: 100%;
        min-height: 40px;
        height: 40px;
        background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%2040%27%20preserveAspectRatio%3D%27none%27%3E%3Cdefs%3E%3ClinearGradient%20id%3D%27mg%27%20x1%3D%270%27%20y1%3D%270%27%20x2%3D%271%27%20y2%3D%270%27%3E%3Cstop%20offset%3D%270%25%27%20stop-color%3D%27%23c9a86a%27%20stop-opacity%3D%270.15%27%2F%3E%3Cstop%20offset%3D%2750%25%27%20stop-color%3D%27%23c9a86a%27%20stop-opacity%3D%270.9%27%2F%3E%3Cstop%20offset%3D%27100%25%27%20stop-color%3D%27%23c9a86a%27%20stop-opacity%3D%270.15%27%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Cpolyline%20points%3D%270%2C20%208%2C20%2018%2C20%2022%2C22%2026%2C20%2030%2C18%2034%2C20%2040%2C24%2046%2C20%2052%2C15%2058%2C20%2064%2C27%2070%2C20%2076%2C12%2082%2C20%2088%2C8%2094%2C20%20100%2C5%20106%2C20%20112%2C32%20118%2C12%20124%2C20%20130%2C28%20136%2C20%20142%2C15%20148%2C20%20154%2C25%20160%2C20%20166%2C18%20170%2C20%20174%2C22%20178%2C20%20184%2C20%20192%2C20%20200%2C20%27%20fill%3D%27none%27%20stroke%3D%27url%28%23mg%29%27%20stroke-width%3D%271.8%27%20stroke-linejoin%3D%27round%27%20stroke-linecap%3D%27round%27%2F%3E%3C%2Fsvg%3E");
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .story-stats {
        justify-content: center;
        gap: 40px;
    }

    .footer-container {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 40px;
    }

    .footer-brand {
        flex: 0 0 100%;
        text-align: center;
    }

    .footer-links,
    .footer-contact {
        flex: 0 0 calc(50% - 20px);
    }

    .footer-brand {
        grid-column: 1 / -1;
        text-align: center;
    }

    .footer-brand .footer-logo {
        justify-content: center;
    }

    .footer-slogan span {
        text-align: center;
    }

    .hero-decor-left,
    .hero-decor-right {
        display: none;
    }
}

@media (max-width: 768px) {
    :root {
        --nav-height: 60px;
    }

    /* 移动端同样使用视频背景 */
    .hero-video {
        background: none;
    }

    .hero-video video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        opacity: 0.85;
        /* X5 内核兼容：强制 GPU 渲染层，防止视频被隐藏在合成层之下 */
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
        /* 防止安卓部分机型视频闪烁或黑屏 */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .hero-video-overlay {
        background: linear-gradient(
            180deg,
            rgba(10, 10, 10, 0.75) 0%,
            rgba(10, 10, 10, 0.55) 50%,
            rgba(10, 10, 10, 0.75) 100%
        );
    }

    .hero-bg {
        display: none;
    }

    .hero {
        min-height: 100vh;
        min-height: 100dvh;
    }

    .nav-menu {
        position: fixed;
        top: var(--nav-height);
        left: 0;
        width: 100%;
        height: calc(100vh - var(--nav-height));
        background: rgba(10, 10, 10, 0.97);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding-top: 50px;
        gap: 35px;
        transform: translateX(100%);
        transition: transform 0.4s ease;
    }

    .nav-menu.active {
        transform: translateX(0);
    }

    .nav-link {
        font-size: 1.3rem;
    }

    .nav-toggle {
        display: flex;
    }

    .nav-logo-img,
    .nav-logo-bright {
        height: 38px;
    }

    .hero-logo {
        width: 70px;
        height: 100px;
        margin: clamp(120px, 20vh, 200px) 0 12px 0;
    }

    .hero-logo-ripples {
        width: 100px;
        height: 100px;
    }

    .hero-logo-ripples span {
        background: radial-gradient(circle,
            rgba(201, 168, 106, 0.25) 0%,
            rgba(201, 168, 106, 0.09) 32%,
            rgba(201, 168, 106, 0.02) 55%,
            rgba(201, 168, 106, 0) 72%);
        box-shadow: 0 0 42px 16px rgba(201, 168, 106, 0.12);
        filter: blur(2.2px);
    }

    .hero-subtitle {
        font-size: clamp(1.8rem, 6vw, 3.2rem);
        margin-bottom: 0;
    }

    .hero-poem-left,
    .hero-poem-right {
        gap: 24px;
    }

    .poem-col {
        font-size: clamp(1rem, 2.2vw, 1.25rem);
    }

    .story-section,
    .culture-section {
        padding: 60px 20px;
    }

    .tea-series {
        padding: 80px 20px;
    }

    .series-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .brand-series-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
        padding: 0 20px;
    }

    .brand-series-card {
        padding: 22px 16px;
    }

    .brand-series-name {
        font-size: 1.2rem;
    }

    .brand-series-text {
        font-size: 0.82rem;
    }

    .card-inner {
        padding: 30px 20px;
    }

    .card-title {
        font-size: 1.2rem;
    }

    .card-desc {
        font-size: 0.85rem;
    }

    .story-stats {
        gap: 30px;
    }

    .stat-num {
        font-size: 2rem;
    }

    .dawn-dusk-scene {
        height: 150px;
    }

    .dawn-dusk-body {
        padding: 25px 20px;
    }

    .dawn-dusk-name {
        font-size: 1.8rem;
    }

    .dawn-dusk-text {
        font-size: 0.92rem;
        font-weight: 500;
    }

    .story-quote {
        font-size: 1rem;
    }

    .story-origin {
        font-size: 0.95rem;
    }

    .culture-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .culture-card {
        padding: 30px 20px;
    }

    .brewing-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .brewing-card-header {
        padding: 12px 16px;
        font-size: 1rem;
    }

    .brewing-card-body {
        padding: 18px 16px;
    }

    .brewing-detail p {
        font-size: 0.8rem;
    }

    .footer-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
        text-align: center;
    }

    .footer-brand {
        align-self: center;
    }

    .footer-links a:hover {
        padding-left: 0;
    }

    .footer-links,
    .footer-contact {
        align-items: center;
    }

    .footer-links h4,
    .footer-contact h4,
    .footer-links a,
    .footer-contact p {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-social {
        justify-content: center;
    }

    .back-top {
        bottom: 20px;
        right: 20px;
        width: 45px;
        height: 45px;
    }

    .wechat-fixed {
        bottom: 75px;
        right: 20px;
        width: 45px;
        height: 45px;
    }

    .hero-quote {
        font-size: 1.2rem;
        bottom: 18px;
        right: 22px;
    }
}

@media (max-width: 480px) {
    .series-grid {
        grid-template-columns: 1fr;
    }

    .brewing-grid {
        grid-template-columns: 1fr;
    }

    .hero-quote {
        font-size: 0.95rem;
        bottom: 14px;
        right: 16px;
        letter-spacing: 0.08em;
    }

    .culture-grid {
        grid-template-columns: 1fr;
    }

    .story-stats {
        flex-wrap: wrap;
        gap: 25px;
    }

    .stat-item {
        flex: 1 1 40%;
    }

    .hero-content {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 25px;
    }

    .hero-center {
        grid-column: 1;
        grid-row: 1;
    }

    .hero-logo {
        width: 64px;
        height: 92px;
        margin: 140px 0 12px 0;
    }

    .hero-logo-ripples {
        width: 88px;
        height: 88px;
    }

    .hero-logo-ripples span {
        background: radial-gradient(circle,
            rgba(201, 168, 106, 0.22) 0%,
            rgba(201, 168, 106, 0.08) 32%,
            rgba(201, 168, 106, 0.02) 55%,
            rgba(201, 168, 106, 0) 72%);
        box-shadow: 0 0 34px 12px rgba(201, 168, 106, 0.11);
        filter: blur(1.8px);
    }

    .hero-poem-left {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
        margin-left: 0;
        padding: 0;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        max-width: 320px;
        gap: 20px;
    }

    .poem-offset {
        margin-top: 0;
    }

    .poem-col {
        font-size: 1.05rem;
        writing-mode: horizontal-tb;
        letter-spacing: 0.12em;
    }

    /* 手机横排时反转诗句顺序，与桌面竖排右起阅读顺序一致 */
    .hero-poem-left .poem-col:nth-child(1) { order: 4; }
    .hero-poem-left .poem-col:nth-child(2) { order: 3; }
    .hero-poem-left .poem-col:nth-child(3) { order: 2; }
    .hero-poem-left .poem-col:nth-child(4) { order: 1; }

    .poem-title-vertical {
        order: -1;
        flex: 0 0 100%;
        font-size: 1.1rem;
        writing-mode: horizontal-tb;
        letter-spacing: 0.18em;
        margin: 0 0 14px 0;
        text-align: center;
        color: var(--color-gold);
        opacity: 0.92;
    }

    .nav-container {
        padding: 0 15px;
    }

    .footer {
        padding: 50px 20px 0;
    }

    .section-divider .divider-line {
        width: 50px;
    }
}

/* ===== 大屏优化 ===== */
@media (min-width: 1400px) {
    .hero-title {
        letter-spacing: 0.4em;
    }
}

/* ===== 打印优化 ===== */
@media print {
    .navbar, .back-top, .loader, .hero-scroll {
        display: none;
    }
}

/* ===== 无障碍 ===== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== 选中文字样式 ===== */
::selection {
    background: var(--color-gold);
    color: var(--color-ink);
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: var(--color-ink);
}

::-webkit-scrollbar-thumb {
    background: var(--color-gold-dark);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold);
}