/* =========================================================
   全站金融纸感主题 · Ivory Paper + Ink Navy + Antique Gold
   每页独立摄影背景，纸质米色叠层，告别大白块
   ========================================================= */

:root {
    /* 纸质底色（从深到浅） */
    --bg-deep:        #E8DFC9;   /* 页面边缘暖米 */
    --bg-base:        #F1E9D4;   /* 正文主底 */
    --bg-elev-1:      #F7F1DF;   /* 卡片底 */
    --bg-elev-2:      #FBF6E8;   /* 高亮卡片 */
    --bg-paper:       #FAF4E4;   /* 纸质叠层 */

    /* 玻璃 / 边界（暖色调） */
    --glass-fill:     rgba(250, 244, 228, 0.78);
    --glass-fill-2:   rgba(251, 246, 232, 0.92);
    --glass-line:     rgba(126, 96, 38, 0.16);
    --glass-line-2:   rgba(126, 96, 38, 0.26);

    /* 文字（墨色） */
    --tx-primary:     #1A2231;   /* 深墨蓝 */
    --tx-secondary:   #3D4A5C;
    --tx-muted:       #6B7280;
    --tx-dim:         #94A0AE;

    /* 强调色（古铜金 + 行政蓝 + 锈红） */
    --accent-gold:    #A87C2B;   /* 古铜金 */
    --accent-gold-2: #C9A24B;    /* 浅古铜，配渐变 */
    --accent-violet:  #1E3A5F;   /* 行政深蓝 */
    --accent-navy:    #1E3A5F;   /* alias */
    --accent-magenta: #8B3A1F;   /* 砖红 */
    --accent-cyan:    #0E6B66;   /* 深邃孔雀绿 */
    --accent-emerald: #0F6B3D;

    /* 信号色 */
    --signal-up:      #15803D;
    --signal-down:    #B91C1C;

    /* 每页摄影背景（按 body[data-page] 切换） */
    --photo-home:        url('https://images.unsplash.com/photo-1496564203457-11bb12075d90?auto=format&fit=crop&w=2400&q=80');     /* 曼哈顿天际线黄昏 */
    --photo-learn:       url('https://images.unsplash.com/photo-1507842217343-583bb7270b66?auto=format&fit=crop&w=2400&q=80');     /* 图书馆 */
    --photo-learnInd:    url('https://images.unsplash.com/photo-1642543492481-44e81e3914a7?auto=format&fit=crop&w=2400&q=80');     /* 交易屏 */
    --photo-learnArb:    url('https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?auto=format&fit=crop&w=2400&q=80');     /* 多屏K线 */
    --photo-trial:       url('https://images.unsplash.com/photo-1444723121867-7a241cacace9?auto=format&fit=crop&w=2400&q=80');     /* 仰拍摩天楼 */
    --photo-trialInd:    url('https://images.unsplash.com/photo-1620228885847-9eab2a1adddc?auto=format&fit=crop&w=2400&q=80');     /* 华尔街铜牛 */
    --photo-trialArb:    url('https://images.unsplash.com/photo-1526304640581-d334cdbbf45e?auto=format&fit=crop&w=2400&q=80');     /* 货币交易 */
    --photo-indicator:   url('https://images.unsplash.com/photo-1642790551116-18e150f248e3?auto=format&fit=crop&w=2400&q=80');     /* 蜡烛图特写 */
    --photo-arbitrage:   url('https://images.unsplash.com/photo-1554260570-9140fd3b7614?auto=format&fit=crop&w=2400&q=80');     /* NY 证交所 */
    --photo-strategy:    url('https://images.unsplash.com/photo-1590283603385-17ffb3a7f29f?auto=format&fit=crop&w=2400&q=80');     /* 彭博终端 */
    --photo-complaint:   url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=2400&q=80');     /* 静谧办公室 */

    /* 默认页面背景（兜底） */
    --page-photo:        var(--photo-home);

    /* 兼容旧别名 */
    --photo-skyline:     var(--photo-home);
    --photo-wallst:      var(--photo-home);
    --photo-financial:   var(--photo-arbitrage);
    --photo-trading:     var(--photo-indicator);

    /* 字体 */
    --f-serif: "DM Serif Display", "Source Han Serif SC", "Noto Serif SC",
               "Songti SC", "STSong", serif;
    --f-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --f-mono:  "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
}

/* 每页摄影切换 */
body[data-page="home"]       { --page-photo: var(--photo-home); }
body[data-page="learn"]      { --page-photo: var(--photo-learn); }
body[data-page="learn-indicator"] { --page-photo: var(--photo-learnInd); }
body[data-page="learn-arbitrage"] { --page-photo: var(--photo-learnArb); }
body[data-page="trial"]      { --page-photo: var(--photo-trial); }
body[data-page="trial-indicator"] { --page-photo: var(--photo-trialInd); }
body[data-page="trial-arbitrage"] { --page-photo: var(--photo-trialArb); }
body[data-page="indicator"]  { --page-photo: var(--photo-indicator); }
body[data-page="arbitrage"]  { --page-photo: var(--photo-arbitrage); }
body[data-page="strategy"]   { --page-photo: var(--photo-strategy); }
body[data-page="complaint"]  { --page-photo: var(--photo-complaint); }

/* =========================================================
   基础（覆盖 main.css）
   ========================================================= */
html {
    background-color: var(--bg-deep);
}

body {
    font-family: var(--f-sans);
    color: var(--tx-secondary);
    background: transparent;
    position: relative;
    overflow-x: hidden;
}

/* 全页固定的暖纸底色 + 当前页摄影做"墨色水印" */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -10;
    background-color: var(--bg-base);
    background-image:
        linear-gradient(180deg, rgba(241, 233, 212, 0.82) 0%, rgba(232, 223, 201, 0.92) 100%),
        var(--page-photo);
    background-size: cover, cover;
    background-position: center, center;
    background-attachment: fixed, fixed;
    background-repeat: no-repeat, no-repeat;
    pointer-events: none;
}

/* 纸质纹理叠层（细噪点，提升纸感） */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -9;
    pointer-events: none;
    opacity: 0.35;
    background-image:
        radial-gradient(60% 45% at 18% 22%, rgba(168, 124, 43, 0.10) 0%, transparent 60%),
        radial-gradient(55% 40% at 82% 28%, rgba(30, 58, 95, 0.08) 0%, transparent 60%),
        radial-gradient(70% 50% at 50% 78%, rgba(139, 58, 31, 0.08) 0%, transparent 60%);
}

.mesh-stage {
    position: fixed;
    inset: -10%;
    z-index: -9;
    pointer-events: none;
    overflow: hidden;
    display: none; /* 新方案不再用 mesh blob */
}

.mesh-blob {
    position: absolute;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.22;
    mix-blend-mode: multiply;
    will-change: transform;
    animation: blobFloat 28s ease-in-out infinite;
}

.mesh-blob.b1 {
    background: radial-gradient(circle, rgba(29, 78, 216, 0.5) 0%, transparent 70%);
    top: -15%; left: -10%;
}
.mesh-blob.b2 {
    background: radial-gradient(circle, rgba(2, 132, 199, 0.45) 0%, transparent 70%);
    top: 35%; right: -15%;
    animation-delay: -9s; animation-duration: 32s;
}
.mesh-blob.b3 {
    background: radial-gradient(circle, rgba(234, 88, 12, 0.35) 0%, transparent 70%);
    bottom: -20%; left: 30%;
    animation-delay: -18s; animation-duration: 36s;
}
.mesh-blob.b4 {
    background: radial-gradient(circle, rgba(180, 83, 9, 0.3) 0%, transparent 70%);
    top: 50%; left: 60%;
    width: 480px; height: 480px; opacity: 0.18;
    animation-delay: -5s; animation-duration: 24s;
}

@keyframes blobFloat {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    25%      { transform: translate3d(80px, -60px, 0) scale(1.08); }
    50%      { transform: translate3d(-40px, 90px, 0) scale(0.94); }
    75%      { transform: translate3d(-90px, -40px, 0) scale(1.05); }
}

/* =========================================================
   导航栏
   ========================================================= */
.navbar {
    background: rgba(250, 244, 228, 0.90) !important;
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border-bottom: 1px solid var(--glass-line);
    box-shadow:
        0 1px 0 rgba(255, 250, 230, 0.85) inset,
        0 4px 24px rgba(40, 28, 8, 0.07);
}

.navbar.scrolled {
    background: rgba(247, 241, 223, 0.97) !important;
    border-bottom-color: var(--glass-line-2);
    box-shadow: 0 4px 30px rgba(40, 28, 8, 0.10);
}

.nav-logo h1,
.nav-logo a h1 {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 1.4rem;
    letter-spacing: 0.01em;
    background: linear-gradient(135deg, var(--tx-primary) 0%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

.nav-logo a { text-decoration: none; }

.nav-link {
    font-size: 0.88rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--tx-secondary) !important;
    transition: color 0.25s ease;
}

.nav-link:hover,
.nav-link.active { color: var(--tx-primary) !important; }

.nav-link::after {
    background: linear-gradient(90deg, var(--accent-gold), var(--accent-magenta));
    height: 1.5px;
    bottom: -7px;
    border-radius: 1px;
}

@media (max-width: 768px) {
    .nav-menu {
        background: rgba(250, 244, 228, 0.98) !important;
        backdrop-filter: blur(20px);
        border-top: 1px solid var(--glass-line);
        box-shadow: 0 12px 40px rgba(40, 28, 8, 0.12);
    }
}

/* =========================================================
   行情 ticker（紧贴 navbar 下方，全站统一）
   ========================================================= */
.market-ticker {
    position: fixed;
    top: 70px;
    left: 0; right: 0;
    z-index: 999;
    background: rgba(250, 244, 228, 0.94);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border-bottom: 1px solid var(--glass-line);
    box-shadow: 0 2px 12px rgba(40, 28, 8, 0.06);
    height: 38px;
    overflow: hidden;
    font-family: var(--f-mono);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--tx-secondary);
}

.market-ticker::before,
.market-ticker::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.market-ticker::before {
    left: 0;
    background: linear-gradient(90deg, rgba(250, 244, 228, 0.98), transparent);
}

.market-ticker::after {
    right: 0;
    background: linear-gradient(-90deg, rgba(250, 244, 228, 0.98), transparent);
}

.ticker-track {
    display: flex;
    align-items: center;
    height: 100%;
    width: max-content;
    animation: tickerScroll 60s linear infinite;
}

.ticker-track:hover { animation-play-state: paused; }

@keyframes tickerScroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1.6rem;
    border-right: 1px solid var(--glass-line);
    white-space: nowrap;
    height: 100%;
}

.ticker-symbol {
    font-weight: 500;
    color: var(--tx-primary);
    letter-spacing: 0.06em;
}

.ticker-price {
    color: var(--tx-secondary);
    font-variant-numeric: tabular-nums;
}

.ticker-change {
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}

.ticker-change.up   { color: var(--signal-up); }
.ticker-change.down { color: var(--signal-down); }

.ticker-change::before {
    content: '';
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.ticker-change.up::before   { border-bottom: 5px solid var(--signal-up); }
.ticker-change.down::before { border-top: 5px solid var(--signal-down); }

@media (max-width: 768px) {
    .market-ticker { height: 32px; font-size: 0.72rem; }
    .ticker-item   { padding: 0 1rem; gap: 0.4rem; }
}

/* =========================================================
   首页 Hero
   ========================================================= */
.hero {
    color: #F5EFD8;
    overflow: hidden;
    isolation: isolate;
    position: relative;
    padding: 160px 20px 100px;
    background-color: var(--bg-deep);
    background-image:
        linear-gradient(100deg,
            rgba(15, 23, 36, 0.78) 0%,
            rgba(15, 23, 36, 0.50) 38%,
            rgba(15, 23, 36, 0.25) 60%,
            rgba(168, 124, 43, 0.30) 100%),
        var(--page-photo);
    background-size: cover, cover;
    background-position: center 25%, center 25%;
    background-repeat: no-repeat, no-repeat;
    min-height: 580px;
}

.hero-background { display: none !important; }

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-content::before {
    content: '';
    position: absolute;
    inset: -100px -50vw;
    z-index: -1;
    background-size: 60px 60px;
    background-position: center;
    mask-image: radial-gradient(ellipse 70% 60% at center, black 30%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, black 30%, transparent 80%);
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 240, 200, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 240, 200, 0.06) 1px, transparent 1px);
}

.hero-title {
    font-family: var(--f-serif);
    font-weight: 400;
    background: linear-gradient(135deg, #FFFFFF 0%, #FFE8B0 55%, var(--accent-gold-2) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.015em;
    text-shadow: 0 6px 28px rgba(0, 0, 0, 0.35);
}

.hero-subtitle {
    color: #F5EFD8;
    font-weight: 400;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.5);
}

.hero-quiz-link {
    background: rgba(15, 23, 36, 0.55);
    border: 1px solid rgba(201, 162, 75, 0.45);
    color: #FFE8B0;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: quiz-pulse-light 2.4s ease-in-out infinite;
}

.hero-quiz-link:hover {
    background: rgba(168, 124, 43, 0.92);
    border-color: var(--accent-gold-2);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 14px 32px -10px rgba(168, 124, 43, 0.55);
}

@keyframes quiz-pulse-light {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 75, 0.35); }
    50%      { box-shadow: 0 0 0 10px rgba(201, 162, 75, 0); }
}

.hero-scroll i { color: rgba(245, 239, 216, 0.8); }

/* =========================================================
   各 section 背景 — 暖纸交替条带（告别大白块）
   ========================================================= */
.about-section,
.courses-section,
.features-section,
.trial-section,
.contact-section,
.complaint-section {
    background: transparent !important;
    position: relative;
}

/* 奇数节：浅米纸；偶数节：深一点的米纸 — 通过半透明纸色叠层 */
.about-section::before,
.courses-section::before,
.features-section::before,
.trial-section::before,
.contact-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}
.about-section::before    { background: linear-gradient(180deg, rgba(250, 244, 228, 0.85) 0%, rgba(247, 241, 223, 0.92) 100%); }
.courses-section::before  { background: linear-gradient(180deg, rgba(232, 223, 201, 0.78) 0%, rgba(241, 233, 212, 0.88) 100%); }
.features-section::before { background: linear-gradient(180deg, rgba(250, 244, 228, 0.85) 0%, rgba(247, 241, 223, 0.92) 100%); }
.trial-section::before    { background: linear-gradient(180deg, rgba(232, 223, 201, 0.78) 0%, rgba(241, 233, 212, 0.88) 100%); }
.contact-section::before  { background: linear-gradient(180deg, rgba(247, 241, 223, 0.90) 0%, rgba(232, 223, 201, 0.82) 100%); }

/* 章节之间的细金线分隔 */
.about-section + .courses-section::after,
.courses-section + .features-section::after,
.features-section + .trial-section::after,
.trial-section + .contact-section::after {
    content: '';
    position: absolute;
    top: 0; left: 50%;
    width: 60px; height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
    transform: translateX(-30px);
}

.complaint-section { padding: 160px 20px 80px !important; }
.complaint-section::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(250, 244, 228, 0.85) 0%, rgba(247, 241, 223, 0.92) 100%);
}

.section-title {
    font-family: var(--f-serif);
    font-weight: 400;
    letter-spacing: -0.005em;
    background: linear-gradient(135deg, var(--tx-primary) 0%, var(--accent-violet) 55%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.title-underline {
    background: linear-gradient(90deg, var(--accent-magenta), var(--accent-gold), var(--accent-gold-2));
    height: 3px;
    border-radius: 2px;
}

.section-description {
    color: var(--tx-secondary);
}

/* =========================================================
   关于我们 card
   ========================================================= */
.about-card {
    background: linear-gradient(180deg, rgba(251, 246, 232, 0.92) 0%, rgba(247, 241, 223, 0.96) 100%);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid var(--glass-line);
    border-radius: 16px;
    color: var(--tx-secondary);
    box-shadow:
        0 4px 24px rgba(40, 28, 8, 0.08),
        0 1px 0 rgba(255, 250, 230, 0.9) inset,
        0 0 0 1px rgba(168, 124, 43, 0.06);
    position: relative;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.45s ease, border-color 0.35s ease;
}

.about-card:hover {
    transform: translateY(-6px);
    border-color: rgba(168, 124, 43, 0.32);
    box-shadow: 0 20px 48px rgba(40, 28, 8, 0.14), 0 0 0 1px rgba(168, 124, 43, 0.18);
}

.about-icon {
    background: linear-gradient(135deg, var(--accent-violet) 0%, var(--accent-gold) 100%);
    color: #FFF8E1;
    border-radius: 14px;
    box-shadow: 0 8px 20px rgba(29, 78, 216, 0.25);
}

.about-card h3 {
    color: var(--tx-primary);
    font-family: var(--f-serif);
    font-weight: 400;
    letter-spacing: -0.005em;
}

.about-card p { color: var(--tx-secondary); }

/* =========================================================
   课程卡片（首页 .course-card / .courses-grid）
   ========================================================= */
.course-card {
    background: linear-gradient(180deg, rgba(251, 246, 232, 0.96) 0%, rgba(247, 241, 223, 0.99) 100%);
    border: 1px solid var(--glass-line);
    border-radius: 18px;
    box-shadow:
        0 4px 28px rgba(40, 28, 8, 0.10),
        0 0 0 1px rgba(168, 124, 43, 0.06),
        0 1px 0 rgba(255, 250, 230, 0.9) inset;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.45s ease, border-color 0.35s ease;
    position: relative;
    overflow: hidden;
}

.course-card.featured {
    border-color: rgba(168, 124, 43, 0.40);
    box-shadow:
        0 8px 36px rgba(168, 124, 43, 0.20),
        0 0 0 1px rgba(168, 124, 43, 0.15);
}

.course-card:hover {
    border-color: rgba(168, 124, 43, 0.32);
    box-shadow: 0 24px 56px rgba(40, 28, 8, 0.16);
}

.course-badge-top {
    background: linear-gradient(135deg, var(--accent-magenta) 0%, #F59E0B 100%);
    color: #FFFFFF;
    border: none;
    box-shadow: 0 8px 20px rgba(234, 88, 12, 0.35);
    letter-spacing: 0.05em;
}

.course-image-placeholder,
.course-video-container {
    background: #000;
    border-bottom: 1px solid var(--glass-line);
}

.course-content { padding: 1.8rem; }

.course-badge {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.1) 0%, rgba(2, 132, 199, 0.08) 100%);
    color: var(--accent-violet);
    border: 1px solid rgba(29, 78, 216, 0.15);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 0.72rem;
    padding: 5px 12px;
    border-radius: 99px;
}

.course-card h3 {
    color: var(--tx-primary);
    font-family: var(--f-serif);
    font-weight: 400;
    letter-spacing: -0.005em;
}

.course-price {
    font-family: var(--f-mono);
    font-weight: 500;
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.course-features li {
    color: var(--tx-secondary);
    font-size: 0.92rem;
}

.course-features i {
    color: var(--accent-emerald);
}

/* =========================================================
   特色（首页 .feature-item）
   ========================================================= */
.feature-item {
    background: linear-gradient(180deg, rgba(251, 246, 232, 0.94) 0%, rgba(247, 241, 223, 0.98) 100%);
    border: 1px solid var(--glass-line);
    border-radius: 16px;
    padding: 2.2rem 1.5rem;
    box-shadow:
        0 4px 24px rgba(40, 28, 8, 0.08),
        0 1px 0 rgba(255, 250, 230, 0.9) inset;
    transition: transform 0.18s ease-out, box-shadow 0.4s ease, border-color 0.4s ease;
    transform-style: preserve-3d;
    position: relative;
    overflow: hidden;
}

.feature-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 240px at var(--mx, 50%) var(--my, 50%),
        rgba(168, 124, 43, 0.10) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.feature-item:hover {
    border-color: rgba(168, 124, 43, 0.30);
    box-shadow: 0 20px 48px rgba(40, 28, 8, 0.14);
}

.feature-item:hover::after { opacity: 1; }

.feature-icon {
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-magenta) 100%);
    color: #FFFFFF;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.22) inset,
        0 14px 30px -10px rgba(236, 72, 153, 0.45);
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.feature-item:hover .feature-icon {
    transform: scale(1.1) rotate(-5deg);
}

.feature-item h3 {
    color: var(--tx-primary);
    font-family: var(--f-serif);
    font-weight: 400;
    letter-spacing: -0.005em;
}

.feature-item p { color: var(--tx-secondary); }

/* =========================================================
   试听 section（首页底部那条）
   ========================================================= */
.trial-section {
    background: transparent !important;
    color: var(--tx-primary);
    position: relative;
    padding: 100px 20px;
}

.trial-section::before {
    content: '';
    position: absolute;
    inset: 10% 0;
    background:
        radial-gradient(60% 70% at 25% 50%, rgba(234, 88, 12, 0.08) 0%, transparent 65%),
        radial-gradient(60% 70% at 75% 50%, rgba(29, 78, 216, 0.08) 0%, transparent 65%);
    pointer-events: none;
    z-index: -1;
}

.trial-content h2 {
    font-family: var(--f-serif);
    font-weight: 400;
    background: linear-gradient(135deg, var(--tx-primary) 0%, var(--accent-violet) 55%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.trial-content p { color: var(--tx-secondary); }

/* =========================================================
   联系方式
   ========================================================= */
.contact-item {
    background: linear-gradient(180deg, rgba(251, 246, 232, 0.94) 0%, rgba(247, 241, 223, 0.98) 100%);
    border: 1px solid var(--glass-line);
    border-radius: 16px;
    box-shadow:
        0 4px 24px rgba(40, 28, 8, 0.08),
        0 1px 0 rgba(255, 250, 230, 0.9) inset;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.45s ease, border-color 0.35s ease;
}

.contact-item:hover {
    transform: translateX(8px);
    border-color: rgba(168, 124, 43, 0.30);
    box-shadow: 0 16px 40px rgba(40, 28, 8, 0.12);
}

.contact-icon {
    background: linear-gradient(135deg, var(--accent-violet) 0%, var(--accent-gold) 100%);
    color: #FFF8E1;
    box-shadow: 0 8px 20px rgba(30, 58, 95, 0.30);
}

.contact-details h3 {
    color: var(--tx-primary);
    font-family: var(--f-sans);
    font-weight: 600;
}

.contact-details p { color: var(--tx-secondary); }

.order-section {
    background: linear-gradient(180deg, rgba(251, 246, 232, 0.96) 0%, rgba(247, 241, 223, 0.99) 100%) !important;
    border: 1px solid var(--glass-line);
    border-radius: 16px;
    box-shadow:
        0 4px 28px rgba(40, 28, 8, 0.10),
        0 0 0 1px rgba(168, 124, 43, 0.08),
        0 1px 0 rgba(255, 250, 230, 0.9) inset !important;
}

.order-section h3 {
    color: var(--tx-primary);
    font-family: var(--f-serif);
    font-weight: 400;
}

/* =========================================================
   通用按钮（覆盖 main.css 旧样式）
   ========================================================= */
.btn {
    border-radius: 10px;
    font-family: var(--f-sans);
    font-weight: 500;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    text-decoration: none;
    transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.45s ease, border-color 0.35s ease,
                background 0.35s ease;
}

.btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    z-index: 1;
    pointer-events: none;
}

.btn:hover::before { transform: translateX(100%); }

.btn > * { position: relative; z-index: 2; }

.btn-primary {
    background: linear-gradient(135deg, var(--accent-magenta) 0%, var(--accent-gold) 55%, var(--accent-gold-2) 100%);
    color: #FFF8E1 !important;
    border: none;
    box-shadow:
        0 1px 0 rgba(255, 235, 180, 0.35) inset,
        0 10px 28px rgba(139, 58, 31, 0.32);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 235, 180, 0.5) inset,
        0 16px 40px rgba(139, 58, 31, 0.45);
    color: #FFFFFF !important;
}

.btn-outline {
    background: rgba(250, 244, 228, 0.55);
    color: var(--accent-violet) !important;
    border: 1.5px solid rgba(30, 58, 95, 0.45);
    backdrop-filter: blur(10px);
}

.btn-outline:hover {
    background: rgba(30, 58, 95, 0.08);
    border-color: var(--accent-violet);
    color: var(--accent-violet) !important;
    transform: translateY(-2px);
}

.btn-course,
.btn-order {
    background: linear-gradient(135deg, var(--accent-magenta) 0%, var(--accent-gold) 55%, var(--accent-gold-2) 100%);
    color: #FFF8E1 !important;
    border: none;
    box-shadow:
        0 1px 0 rgba(255, 235, 180, 0.35) inset,
        0 10px 28px rgba(139, 58, 31, 0.32);
}

.btn-course {
    width: 100%;
    text-align: center;
    margin-top: 1rem;
}

.btn-course:hover,
.btn-order:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(255, 235, 180, 0.5) inset,
        0 16px 40px rgba(139, 58, 31, 0.45);
    color: #FFFFFF !important;
}

.btn-order-xianyu {
    background: linear-gradient(135deg, var(--accent-violet) 0%, #2C5282 100%);
    color: #F5EFD8 !important;
    border-color: rgba(201, 162, 75, 0.40);
    box-shadow:
        0 1px 0 rgba(201, 162, 75, 0.35) inset,
        0 14px 32px -10px rgba(30, 58, 95, 0.55);
}

.btn-order-xianyu:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 rgba(201, 162, 75, 0.5) inset,
        0 22px 44px -12px rgba(30, 58, 95, 0.7);
    color: #FFFFFF !important;
}

/* =========================================================
   页脚
   ========================================================= */
.footer {
    background: linear-gradient(180deg, rgba(232, 223, 201, 0.92) 0%, rgba(216, 203, 173, 0.96) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--tx-muted);
    font-family: var(--f-sans);
    font-size: 0.84rem;
    letter-spacing: 0.03em;
    padding: 2.5rem 20px;
    border-top: 1px solid var(--glass-line);
}

.footer .beian-info a { color: var(--tx-muted); }
.footer .beian-info a:hover {
    color: var(--accent-gold);
    text-decoration: none;
}

/* =========================================================
   学习课程列表（learn-courses.html）
   ========================================================= */
.learn-hero {
    background: transparent !important;
    padding: 180px 20px 60px !important;
    text-align: center;
    color: var(--tx-primary);
    position: relative;
}

.learn-hero h1 {
    font-family: var(--f-serif);
    font-weight: 400;
    font-size: 2.6rem !important;
    background: linear-gradient(135deg, var(--tx-primary) 0%, var(--accent-violet) 55%, var(--accent-gold) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    margin-bottom: 0.8rem !important;
}

.learn-hero p {
    color: var(--tx-secondary) !important;
    opacity: 1 !important;
    font-size: 1.05rem !important;
}

.learn-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 1.5rem !important;
    margin: 2rem auto 5rem !important;
    max-width: 960px !important;
}

.learn-card {
    background: linear-gradient(180deg, rgba(251, 246, 232, 0.96) 0%, rgba(247, 241, 223, 0.99) 100%) !important;
    border: 1px solid var(--glass-line) !important;
    border-radius: 18px !important;
    overflow: hidden;
    color: var(--tx-primary) !important;
    box-shadow:
        0 4px 28px rgba(40, 28, 8, 0.10),
        0 0 0 1px rgba(168, 124, 43, 0.06),
        0 1px 0 rgba(255, 250, 230, 0.9) inset !important;
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.45s ease, border-color 0.35s ease !important;
}

.learn-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(168, 124, 43, 0.32) !important;
    box-shadow: 0 24px 56px rgba(40, 28, 8, 0.16) !important;
}

.learn-card-header {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.10) 0%, rgba(168, 124, 43, 0.12) 100%) !important;
    color: var(--tx-primary) !important;
    padding: 2rem !important;
    text-align: center;
    border-bottom: 1px solid var(--glass-line);
    position: relative;
}

.learn-card-header::before {
    content: '';
    position: absolute;
    bottom: -1px; left: 0;
    width: 100%; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%, var(--accent-violet) 50%, transparent 100%);
    opacity: 0.6;
}

.learn-card-header .course-badge-large {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 5px 12px 5px 10px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid var(--glass-line-2) !important;
    backdrop-filter: blur(10px);
    color: var(--tx-primary);
    border-radius: 99px !important;
    font-size: 0.7rem !important;
    font-weight: 500;
    margin-bottom: 0.8rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.learn-card-header h2 {
    font-family: var(--f-serif);
    font-weight: 400;
    color: var(--tx-primary) !important;
    font-size: 1.4rem !important;
    letter-spacing: -0.005em;
}

.learn-card-header .price {
    font-family: var(--f-mono);
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

.learn-card-body {
    padding: 1.5rem !important;
}

.learn-card-body p { color: var(--tx-secondary) !important; line-height: 1.7 !important; }

.learn-card-footer {
    padding: 1rem 1.5rem !important;
    border-top: 1px solid var(--glass-line) !important;
}

/* =========================================================
   学习课程详情（learn-course-indicator.html / -arbitrage.html）
   ========================================================= */
.learn-page {
    background: transparent !important;
    padding: 160px 20px 80px !important;
    min-height: 100vh;
    position: relative;
}

.learn-container {
    background: linear-gradient(180deg, rgba(251, 246, 232, 0.97) 0%, rgba(247, 241, 223, 0.99) 100%) !important;
    border: 1px solid var(--glass-line) !important;
    border-radius: 18px !important;
    padding: 2.4rem !important;
    box-shadow:
        0 8px 40px rgba(40, 28, 8, 0.12),
        0 0 0 1px rgba(168, 124, 43, 0.08),
        0 1px 0 rgba(255, 250, 230, 0.9) inset !important;
}

.learn-container h1 {
    color: var(--tx-primary) !important;
    font-family: var(--f-serif);
    font-weight: 400;
    letter-spacing: -0.005em;
    font-size: 1.7rem !important;
}

.learn-container > p { color: var(--tx-secondary) !important; }

.learn-container .price {
    font-family: var(--f-mono);
    background: linear-gradient(135deg, var(--accent-gold) 0%, var(--accent-magenta) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

#alreadyOwn {
    background: rgba(34, 197, 94, 0.10) !important;
    border: 1px solid rgba(34, 197, 94, 0.28) !important;
    color: var(--tx-primary) !important;
    border-radius: 10px !important;
}

#alreadyOwn a {
    color: var(--accent-cyan) !important;
    text-decoration: none;
    border-bottom: 1px dashed var(--accent-cyan);
}

.tab-btns {
    border-bottom: 1px solid var(--glass-line) !important;
}

.tab-btn {
    color: var(--tx-secondary) !important;
    background: none !important;
    border: none !important;
    transition: color 0.25s ease;
}

.tab-btn:hover { color: var(--tx-primary) !important; }

.tab-btn.active {
    color: var(--tx-primary) !important;
    border-bottom: 2px solid var(--accent-cyan) !important;
    font-weight: 600;
}

#payLoginPrompt,
#payLoggedInPrompt,
#purchaseSection > .tab-panel > p {
    color: var(--tx-secondary) !important;
}

#payLoginPrompt a,
#payLoggedInPrompt a {
    color: var(--accent-cyan) !important;
}

#payLoggedInPrompt {
    color: var(--accent-emerald) !important;
}

.pay-btn {
    background: var(--glass-fill) !important;
    color: var(--tx-primary) !important;
    border: 1px solid var(--glass-line-2) !important;
    backdrop-filter: blur(10px);
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease !important;
}

.pay-btn:hover, .pay-btn.selected {
    background: rgba(139, 92, 246, 0.14) !important;
    border-color: var(--accent-cyan) !important;
    transform: translateY(-2px);
}

.pay-btn i {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-violet));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
}

.key-input {
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--tx-primary) !important;
    border: 1px solid var(--glass-line-2) !important;
    border-radius: 10px !important;
    transition: border-color 0.25s ease, background 0.25s ease !important;
}

.key-input::placeholder { color: var(--tx-dim); }

.key-input:focus {
    outline: none;
    border-color: var(--accent-cyan) !important;
    background: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}

.submit-btn {
    background: linear-gradient(135deg, var(--accent-violet) 0%, var(--accent-magenta) 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 10px !important;
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.22) inset,
        0 14px 32px -10px rgba(236, 72, 153, 0.55);
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.submit-btn:hover {
    transform: translateY(-2px);
    box-shadow:
        0 1px 0 0 rgba(255, 255, 255, 0.32) inset,
        0 22px 44px -12px rgba(236, 72, 153, 0.7);
}

.qr-placeholder {
    background: rgba(255, 255, 255, 0.03) !important;
    color: var(--tx-muted) !important;
    border: 1px solid var(--glass-line) !important;
}

.qr-placeholder i {
    color: var(--accent-cyan) !important;
}

.msg.err {
    background: rgba(239, 68, 68, 0.12) !important;
    color: #FCA5A5 !important;
    border: 1px solid rgba(239, 68, 68, 0.28) !important;
}

.msg.ok {
    background: rgba(34, 197, 94, 0.12) !important;
    color: #86EFAC !important;
    border: 1px solid rgba(34, 197, 94, 0.28) !important;
}

/* =========================================================
   试听落地（trial.html）
   ========================================================= */
.trial-landing {
    background: transparent !important;
    padding: 160px 20px 80px !important;
    min-height: 100vh;
}

.trial-landing > .container > h1 {
    color: var(--tx-primary) !important;
    font-family: var(--f-serif);
    font-weight: 400 !important;
    letter-spacing: -0.005em;
}

.trial-banner {
    background: rgba(212, 179, 106, 0.10) !important;
    border: 1px solid rgba(212, 179, 106, 0.28) !important;
    border-left: 3px solid var(--accent-gold) !important;
    color: var(--accent-gold) !important;
    border-radius: 10px !important;
}

.trial-banner strong { color: var(--accent-gold); }
.trial-banner p { color: var(--tx-secondary); opacity: 1; }

.trial-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) !important;
    gap: 1.5rem !important;
}

.trial-card {
    background: linear-gradient(180deg, rgba(251, 246, 232, 0.96) 0%, rgba(247, 241, 223, 0.99) 100%) !important;
    border: 1px solid var(--glass-line) !important;
    border-radius: 16px !important;
    padding: 2rem !important;
    color: var(--tx-primary) !important;
    box-shadow:
        0 4px 28px rgba(40, 28, 8, 0.10),
        0 0 0 1px rgba(168, 124, 43, 0.06),
        0 1px 0 rgba(255, 250, 230, 0.9) inset !important;
    transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1),
                box-shadow 0.4s ease, border-color 0.35s ease !important;
}

.trial-card:hover {
    transform: translateY(-6px) !important;
    border-color: rgba(168, 124, 43, 0.40) !important;
    box-shadow:
        0 1px 0 0 rgba(255, 250, 230, 0.95) inset,
        0 32px 64px -25px rgba(168, 124, 43, 0.45) !important;
}

.trial-card h3 {
    color: var(--tx-primary) !important;
    font-family: var(--f-serif);
    font-weight: 400;
    letter-spacing: -0.005em;
}

.trial-card h3 i { color: var(--accent-cyan); margin-right: 0.5rem; }

.trial-card p { color: var(--tx-secondary) !important; }

/* =========================================================
   试听视频页（trial-indicator/arbitrage.html）
   ========================================================= */
.trial-page {
    background: transparent !important;
    padding: 160px 20px 80px !important;
    min-height: 100vh;
}

.trial-header {
    background: var(--glass-fill) !important;
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--glass-line) !important;
    border-left: 3px solid var(--accent-gold) !important;
    border-radius: 10px !important;
    color: var(--accent-gold) !important;
}

.trial-header h1 {
    color: var(--tx-primary) !important;
    font-family: var(--f-serif);
    font-weight: 400;
    letter-spacing: -0.005em;
}

.trial-header h1 i { color: var(--accent-gold); margin-right: 0.5rem; }

.trial-header p { color: var(--tx-secondary) !important; }

.video-card {
    background: linear-gradient(180deg, rgba(251, 246, 232, 0.96) 0%, rgba(247, 241, 223, 0.99) 100%) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--glass-line) !important;
    border-radius: 14px !important;
    padding: 1.6rem !important;
    box-shadow:
        0 1px 0 0 rgba(255, 250, 230, 0.9) inset,
        0 20px 50px -28px rgba(40, 28, 8, 0.30) !important;
}

.video-card h3 {
    color: var(--tx-primary) !important;
    font-family: var(--f-sans);
    font-weight: 600;
    letter-spacing: 0.005em;
}

.video-card video {
    border: 1px solid var(--glass-line);
    border-radius: 8px;
}

.trial-limit { color: var(--accent-gold) !important; }

.trial-cta {
    background: var(--glass-fill) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border: 1px solid var(--glass-line) !important;
    border-radius: 14px !important;
    color: var(--tx-secondary) !important;
}

.trial-cta p { color: var(--tx-secondary) !important; }

/* =========================================================
   投诉 / 表单（complaint.html）
   ========================================================= */
.complaint-card {
    background: linear-gradient(180deg, rgba(251, 246, 232, 0.97) 0%, rgba(247, 241, 223, 0.99) 100%) !important;
    border: 1px solid var(--glass-line) !important;
    border-radius: 18px !important;
    padding: 2.6rem !important;
    color: var(--tx-secondary);
    box-shadow:
        0 8px 40px rgba(40, 28, 8, 0.12),
        0 0 0 1px rgba(168, 124, 43, 0.08),
        0 1px 0 rgba(255, 250, 230, 0.9) inset !important;
}

.complaint-form .form-row { margin-bottom: 1.4rem; }
.complaint-form label {
    color: var(--tx-primary);
    font-family: var(--f-sans);
    font-weight: 500;
    letter-spacing: 0.02em;
    font-size: 0.92rem;
}

.complaint-form label { color: var(--tx-primary); }

.complaint-form input,
.complaint-form textarea {
    background: rgba(255, 250, 235, 0.7) !important;
    color: var(--tx-primary) !important;
    border: 1px solid var(--glass-line-2) !important;
    border-radius: 10px !important;
}

.complaint-form input::placeholder,
.complaint-form textarea::placeholder { color: var(--tx-dim); }

.complaint-form input:focus,
.complaint-form textarea:focus {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18) !important;
}

.form-tip { color: var(--tx-muted); }

/* =========================================================
   Phosphor 图标基础
   ========================================================= */
.ph,
[class^="ph-"],
[class*=" ph-"] {
    display: inline-block;
    line-height: 1;
    vertical-align: -0.05em;
}

/* =========================================================
   滚动浮现
   ========================================================= */
[data-reveal] {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(6px);
    transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
                transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1),
                filter 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    will-change: opacity, transform, filter;
}

[data-reveal].is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* =========================================================
   响应式微调
   ========================================================= */
@media (max-width: 768px) {
    .hero { padding-top: 120px; min-height: 480px; }

    .learn-hero,
    .learn-page,
    .trial-landing,
    .trial-page { padding-top: 130px !important; }

    .learn-container { padding: 1.5rem !important; }
    .learn-hero h1   { font-size: 2rem !important; }

    /* iOS 不支持 background-attachment: fixed，改用 scroll 防止卡顿 */
    body::before { background-attachment: scroll, scroll; }

    /* 移动端禁用 tilt 效果，避免触摸抖动 */
    .feature-item,
    .course-card,
    .about-card,
    .learn-card,
    .trial-card { transform: none !important; }
}

/* =========================================================
   减少动效偏好
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
    .mesh-blob,
    .ticker-track,
    .course-badge-large::before {
        animation: none !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}