/* ==========================================================================
   首页美化样式 (home-beautify.css)
   包含：A1-A4(实用) + B1-B6(视觉/交互) + C1-C6(转化) 的全部样式
   ========================================================================== */

/* ========== 通用重置与基础 ========== */
:root {
    --hero-grad-1: #e5ce2a;
    --hero-grad-2: #b8a617;
    --hero-grad-3: #f4dc54;
    --brand-1: #e5ce2a;
    --brand-2: #b8a617;
    --brand-3: #f4dc54;
    --success: #00c896;
    --warning: #ffa726;
    --danger: #ff5470;
    --ticker-bg: rgba(229, 206, 42, 0.06);
    --ticker-border: rgba(229, 206, 42, 0.18);
    --code-bg: #0d1117;
    --code-fg: #e6edf3;
    --shadow-sm: 0 4px 14px rgba(15, 23, 42, .06);
    --shadow-md: 0 10px 30px rgba(15, 23, 42, .08);
    --shadow-lg: 0 20px 50px rgba(15, 23, 42, .12);
}

html {
    scroll-behavior: smooth;
}

/* ========== A1: Hero 本地 CSS 字体文字（替代外链图片） ========== */
.hero-banner-four {
    position: relative;
    overflow: hidden;
    padding: 140px 0 100px;
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(184, 166, 23, .25), transparent 60%),
        radial-gradient(900px 500px at 10% 110%, rgba(244, 220, 84, .22), transparent 60%),
        linear-gradient(135deg, #f6f9ff 0%, #eef3ff 50%, #f9f7ff 100%);
}

.hero-banner-four::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 20% 30%, rgba(229, 206, 42, .12) 0, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(184, 166, 23, .10) 0, transparent 40%);
    pointer-events: none;
    animation: heroFloat 12s ease-in-out infinite alternate;
}

@keyframes heroFloat {
    0%   { transform: translate3d(0,0,0) scale(1);   opacity: .85; }
    50%  { transform: translate3d(-2%, 1%, 0) scale(1.05); opacity: 1; }
    100% { transform: translate3d(2%, -1%, 0) scale(1);  opacity: .9; }
}

.hero-slogan {
    font-size: clamp(2.4rem, 5.5vw, 4.2rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.02em;
    background: linear-gradient(120deg, var(--hero-grad-1) 0%, var(--hero-grad-2) 50%, var(--hero-grad-3) 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: heroShine 6s ease-in-out infinite;
    margin: 18px 0 14px;
    word-break: keep-all;
}
@keyframes heroShine {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

.hero-sub-slogan {
    font-size: clamp(.95rem, 1.6vw, 1.15rem);
    color: #475569;
    font-weight: 500;
    letter-spacing: .02em;
    max-width: 720px;
    margin: 0 auto 28px;
}

.slogan-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(255, 255, 255, .65);
    border: 1px solid rgba(229, 206, 42, .25);
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #1e293b;
    font-size: .9rem;
    text-decoration: none;
    transition: all .3s ease;
    box-shadow: var(--shadow-sm);
}
.slogan-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: rgba(229, 206, 42, .5);
    color: var(--brand-1);
}

/* ========== A3: 实时调用计数滚动条 (Ticker) ========== */
.live-ticker {
    background: var(--ticker-bg);
    border-top: 1px solid var(--ticker-border);
    border-bottom: 1px solid var(--ticker-border);
    overflow: hidden;
    padding: 12px 0;
    position: relative;
}
.live-ticker::before, .live-ticker::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}
.live-ticker::before { left: 0;  background: linear-gradient(90deg, rgba(255,255,255,1), rgba(255,255,255,0)); }
.live-ticker::after  { right: 0; background: linear-gradient(-90deg, rgba(255,255,255,1), rgba(255,255,255,0)); }

.ticker-track {
    display: inline-flex;
    white-space: nowrap;
    animation: tickerScroll 60s linear infinite;
    gap: 40px;
    padding-left: 100%;
}
@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.live-ticker:hover .ticker-track { animation-play-state: paused; }

.ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .9rem;
    color: #475569;
}
.ticker-item .dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--brand-1);
    box-shadow: 0 0 0 0 rgba(229, 206, 42, .5);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(229, 206, 42, .6); }
    70%  { box-shadow: 0 0 0 10px rgba(229, 206, 42, 0); }
    100% { box-shadow: 0 0 0 0 rgba(229, 206, 42, 0); }
}
.ticker-item strong { color: var(--brand-1); font-weight: 700; }
.ticker-item .tag {
    padding: 2px 8px;
    background: rgba(229, 206, 42, .1);
    color: var(--brand-1);
    border-radius: 4px;
    font-size: .75rem;
}

/* ========== A4: Hero 区可复制代码示例 ========== */
.hero-code-block {
    max-width: 720px;
    margin: 24px auto 0;
    background: var(--code-bg);
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: var(--shadow-md);
    position: relative;
    text-align: left;
}
.hero-code-block pre {
    margin: 0;
    color: var(--code-fg);
    font-family: "JetBrains Mono", "SF Mono", "Menlo", Consolas, monospace;
    font-size: .85rem;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre;
    scrollbar-width: thin;
}
.hero-code-block .copy-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #e6edf3;
    border-radius: 6px;
    font-size: .75rem;
    cursor: pointer;
    transition: all .2s;
}
.hero-code-block .copy-btn:hover { background: rgba(255, 255, 255, .2); }
.hero-code-block .copy-btn.copied { background: var(--success); border-color: var(--success); }

.code-syntax-kw  { color: #ff7b72; }
.code-syntax-str { color: #a5d6ff; }
.code-syntax-fn  { color: #d2a8ff; }
.code-syntax-cm  { color: #8b949e; font-style: italic; }
.code-syntax-num { color: #79c0ff; }

/* ========== B1: 暗色模式 ========== */
body.dark-mode {
    background: #0f172a;
    color: #e2e8f0;
}
body.dark-mode .hero-banner-four { background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%); }
body.dark-mode .hero-slogan { background: linear-gradient(120deg, #f4dc54, #e5ce2a, #f4dc54); -webkit-background-clip: text; background-clip: text; }
body.dark-mode .hero-sub-slogan { color: #cbd5e1; }
body.dark-mode .slogan-badge { background: rgba(30, 41, 59, .65); border-color: rgba(148, 163, 184, .3); color: #e2e8f0; }
body.dark-mode .hero-code-block { background: #010409; border: 1px solid #21262d; }
body.dark-mode .counter-section-one { background: transparent !important; }
body.dark-mode .counter-block-one .main-count { color: #93c5fd; }
body.dark-mode .counter-block-one p,
body.dark-mode .block-style-two p,
body.dark-mode .block-style-six p { color: #94a3b8; }
body.dark-mode .title-style-one .main-title,
body.dark-mode .block-style-six h6 { color: #f1f5f9; }
body.dark-mode .block-style-six { background: #1e293b; border-color: #334155; }
body.dark-mode .live-ticker { background: rgba(229, 206, 42, .12); border-color: rgba(148, 163, 184, .2); }
body.dark-mode .ticker-item { color: #cbd5e1; }
body.dark-mode .live-ticker::before { background: linear-gradient(90deg, #0f172a, transparent); }
body.dark-mode .live-ticker::after  { background: linear-gradient(-90deg, #0f172a, transparent); }
body.dark-mode .footer-style-four,
body.dark-mode .fancy-short-banner-three .bg-wrapper { background: #1e293b !important; color: #cbd5e1; }
body.dark-mode .fancy-short-banner-three .btn-six { background: var(--brand-1); color: #fff; }
body.dark-mode .brand-wall,
body.dark-mode .credit-section,
body.dark-mode .pricing-section,
body.dark-mode .testimonials,
body.dark-mode .code-samples-section,
body.dark-mode .latest-blog { background: transparent; }
body.dark-mode .brand-wall .brand-item,
body.dark-mode .credit-card,
body.dark-mode .pricing-card,
body.dark-mode .testimonial-card,
body.dark-mode .latest-blog .blog-card { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.dark-mode .credit-card.featured,
body.dark-mode .pricing-card.featured { background: linear-gradient(135deg, #1e3a8a, #312e81); }
body.dark-mode .credit-card .credit-amount,
body.dark-mode .pricing-card .price { color: #93c5fd; }
body.dark-mode .code-samples-section .tab-btn.active { background: var(--brand-1); color: #fff; }
body.dark-mode .code-samples-section pre { background: #010409; }
body.dark-mode .nav-pills .nav-link { color: #cbd5e1; }
body.dark-mode .nav-pills .nav-link.active { background: var(--brand-1); color: #fff; }

.theme-toggle-btn {
    position: fixed;
    left: 20px;
    bottom: 100px;
    z-index: 999;
    width: 48px; height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--brand-1);
    color: #fff;
    box-shadow: var(--shadow-md);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
    transition: transform .25s, background .25s;
}
.theme-toggle-btn:hover { transform: rotate(20deg) scale(1.05); background: var(--brand-2); }
.theme-toggle-btn .sun { display: none; }
body.dark-mode .theme-toggle-btn .sun { display: inline; }
body.dark-mode .theme-toggle-btn .moon { display: none; }

/* ========== B2: 按钮微交互 ========== */
.req-demo-btn-reg,
.btn-five, .btn-six {
    position: relative;
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}
.req-demo-btn-reg:hover,
.btn-five:hover, .btn-six:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(229, 206, 42, .25);
}
.req-demo-btn-reg::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255, 255, 255, .35);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width .5s, height .5s, opacity .8s;
    opacity: 0;
}
.req-demo-btn-reg:active::after { width: 200px; height: 200px; opacity: 1; transition: 0s; }

/* ========== B3: 悬浮 CTA ========== */
.floating-cta {
    position: fixed;
    left: 20px;
    bottom: 170px;
    z-index: 998;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
    transition: opacity .4s, transform .4s;
}
.floating-cta.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.floating-cta a {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 25px rgba(229, 206, 42, .35);
    text-decoration: none;
    font-size: 1.4rem;
    transition: transform .25s, box-shadow .25s;
    position: relative;
}
.floating-cta a:hover { transform: scale(1.1); box-shadow: 0 15px 35px rgba(229, 206, 42, .45); }
.floating-cta a small {
    position: absolute;
    left: 70px;
    background: #1e293b;
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: .8rem;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .25s, transform .25s;
    pointer-events: none;
}
.floating-cta a:hover small { opacity: 1; transform: translateX(0); }

/* ========== B4: 顶部吸顶后高亮搜索入口 ========== */
.theme-main-menu.sticky-menu {
    transition: box-shadow .3s, background .3s;
}
.theme-main-menu.menu-shrunk {
    box-shadow: 0 6px 24px rgba(15, 23, 42, .08);
    background: rgba(255, 255, 255, .92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
body.dark-mode .theme-main-menu.menu-shrunk { background: rgba(15, 23, 42, .92) !important; }
.menu-search-btn.scrolled { animation: searchPop .4s; }
@keyframes searchPop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ========== B5: 懒加载骨架屏 ========== */
img[loading="lazy"] {
    transition: opacity .4s ease;
}
img.lazy-skeleton {
    background: linear-gradient(90deg, #f0f4f8 0%, #e2e8f0 50%, #f0f4f8 100%);
    background-size: 200% 100%;
    animation: skeleton 1.4s ease-in-out infinite;
    opacity: 0;
}
img.lazy-loaded { opacity: 1; }
@keyframes skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ========== B6: Open Graph 已默认在 head.php ========== */

/* ========== C1: 品牌 Logo 墙 ========== */
.brand-wall {
    padding: 80px 0 60px;
    background: linear-gradient(180deg, transparent, rgba(229, 206, 42, .03));
}
.brand-wall .sc-title { text-align: center; color: #94a3b8; font-size: .9rem; margin-bottom: 32px; letter-spacing: .15em; text-transform: uppercase; }
.brand-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    align-items: center;
}
@media (max-width: 992px) { .brand-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 576px) { .brand-grid { grid-template-columns: repeat(3, 1fr); } }
.brand-item {
    height: 64px;
    display: flex; align-items: center; justify-content: center;
    background: #fff;
    border-radius: 10px;
    color: #64748b;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .05em;
    box-shadow: var(--shadow-sm);
    transition: transform .25s, color .25s, box-shadow .25s;
    filter: grayscale(1);
    opacity: .85;
    border: 1px solid rgba(15, 23, 42, .04);
}
.brand-item:hover {
    filter: grayscale(0);
    color: var(--brand-1);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    opacity: 1;
}

/* ========== C2: API 分类图标网格(hover 动效已由 block-style-ten 提供,此处补充) ========== */
.block-style-ten {
    transition: transform .3s, box-shadow .3s;
}
.block-style-ten:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* ========== C3: 充值点数卡片 ========== */
.credit-section { padding: 100px 0; }
.credit-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 50px;
}
@media (max-width: 992px) { .credit-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }
.credit-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 28px;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    transition: transform .3s, box-shadow .3s, border-color .3s;
    position: relative;
}
.credit-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.credit-card.featured {
    border-color: var(--brand-1);
    background: linear-gradient(135deg, #e5ce2a 0%, #b8a617 100%);
    color: #fff;
    transform: scale(1.04);
}
.credit-card.featured:hover { transform: scale(1.04) translateY(-6px); }
.credit-card .badge-pop {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    background: var(--warning);
    color: #fff;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}
.credit-card .credit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    border-radius: 50%;
    background: rgba(108, 92, 231, .08);
    color: var(--brand-1);
    margin-bottom: 20px;
}
.credit-card.featured .credit-icon { background: rgba(255,255,255,.15); color: #fff; }
.credit-card h4 { font-size: 1.3rem; margin-bottom: 12px; }
.credit-card .credit-amount {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--brand-1);
    margin: 8px 0 4px;
}
.credit-card .credit-amount span { font-size: 1.2rem; font-weight: 600; color: #94a3b8; }
.credit-card.featured .credit-amount,
.credit-card.featured .credit-amount span { color: #fff; }
.credit-card .credit-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: #475569;
}
.credit-card .credit-price small {
    font-size: .85rem;
    color: var(--success);
    font-weight: 500;
}
.credit-card.featured .credit-price { color: rgba(255,255,255,.85); }
.credit-card.featured .credit-price small { color: #dcfce7; }
.credit-card ul {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    text-align: left;
}
.credit-card li {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(15, 23, 42, .08);
    color: #475569;
    font-size: .92rem;
}
.credit-card.featured li { border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .9); }
.credit-card li::before { content: "✓"; color: var(--success); margin-right: 8px; font-weight: 700; }
.credit-card.featured li::before { color: #fff; }
.credit-card .credit-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 12px 32px;
    border-radius: 999px;
    background: var(--brand-1);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: all .25s;
}
.credit-card .credit-btn:hover { background: var(--brand-2); transform: translateY(-2px); }
.credit-card.featured .credit-btn { background: #fff; color: var(--brand-1); }
.credit-card.featured .credit-btn:hover { background: #f1f5f9; color: var(--brand-2); }
.credit-note {
    text-align: center;
    margin-top: 40px;
    color: #64748b;
    font-size: .95rem;
}
.credit-note a { color: var(--brand-1); font-weight: 600; }
.credit-note a:hover { color: var(--brand-2); }

@media (max-width: 768px) {
    .credit-card.featured { transform: none; }
    .credit-card.featured:hover { transform: translateY(-6px); }
}

/* ========== C3 Old: 三档价格卡片 (保留兼容性) ========== */
.pricing-section { padding: 100px 0; }
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 50px;
}
@media (max-width: 992px) { .pricing-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; } }
.pricing-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 28px;
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 2px solid transparent;
    transition: transform .3s, box-shadow .3s, border-color .3s;
    position: relative;
}
.pricing-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.pricing-card.featured {
    border-color: var(--brand-1);
    background: linear-gradient(135deg, #e5ce2a 0%, #b8a617 100%);
    color: #fff;
    transform: scale(1.04);
}
.pricing-card.featured:hover { transform: scale(1.04) translateY(-6px); }
.pricing-card .badge-pop {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    padding: 4px 14px;
    background: var(--warning);
    color: #fff;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
}
.pricing-card h4 { font-size: 1.3rem; margin-bottom: 12px; }
.pricing-card .price {
    font-size: 2.6rem;
    font-weight: 800;
    color: var(--brand-1);
    margin: 16px 0 8px;
}
.pricing-card .price small { font-size: .9rem; color: #94a3b8; font-weight: 500; }
.pricing-card.featured .price,
.pricing-card.featured .price small { color: #fff; }
.pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 24px 0;
    text-align: left;
}
.pricing-card li {
    padding: 8px 0;
    border-bottom: 1px dashed rgba(15, 23, 42, .08);
    color: #475569;
    font-size: .92rem;
}
.pricing-card.featured li { border-color: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .9); }
.pricing-card li::before { content: "✓"; color: var(--success); margin-right: 8px; font-weight: 700; }
.pricing-card.featured li::before { color: #fff; }
.pricing-card .plan-btn {
    display: inline-block;
    margin-top: 8px;
    padding: 12px 32px;
    border-radius: 999px;
    background: var(--brand-1);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: all .25s;
}
.pricing-card .plan-btn:hover { background: var(--brand-2); transform: translateY(-2px); }
.pricing-card.featured .plan-btn { background: #fff; color: var(--brand-1); }
.pricing-card.featured .plan-btn:hover { background: #f1f5f9; color: var(--brand-2); }

/* ========== C4: 评价滚动墙 ========== */
.testimonials { padding: 100px 0; background: rgba(108, 92, 231, .04); }
.testi-track {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    padding: 24px 4px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
}
.testi-track::-webkit-scrollbar { height: 6px; }
.testi-track::-webkit-scrollbar-thumb { background: rgba(229, 206, 42, .3); border-radius: 3px; }
.testimonial-card {
    flex: 0 0 340px;
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: var(--shadow-sm);
    scroll-snap-align: start;
    transition: transform .3s, box-shadow .3s;
}
.testimonial-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.testimonial-card .quote {
    font-size: 1rem;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 20px;
    position: relative;
    padding-left: 16px;
}
.testimonial-card .quote::before {
    content: """";
    position: absolute;
    left: -4px;
    top: -8px;
    font-size: 2.4rem;
    color: var(--brand-1);
    opacity: .25;
    line-height: 1;
}
.testimonial-card .author { display: flex; align-items: center; gap: 12px; }
.testimonial-card .avatar {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
}
.testimonial-card .author-info strong { display: block; color: #1e293b; font-size: .95rem; }
.testimonial-card .author-info span { color: #94a3b8; font-size: .82rem; }
.testimonial-card .stars { color: #fbbf24; font-size: .85rem; margin-top: 2px; }

/* ========== C5: 代码示例 Tab ========== */
.code-samples-section { padding: 100px 0; }
.code-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.code-tabs .tab-btn {
    padding: 8px 18px;
    background: #f1f5f9;
    border: none;
    border-radius: 999px;
    color: #475569;
    cursor: pointer;
    font-size: .88rem;
    font-weight: 600;
    transition: all .2s;
}
.code-tabs .tab-btn:hover { background: #e2e8f0; }
.code-tabs .tab-btn.active {
    background: var(--brand-1);
    color: #fff;
}
.code-panel { display: none; }
.code-panel.active { display: block; }
.code-panel pre {
    background: var(--code-bg);
    color: var(--code-fg);
    padding: 24px;
    border-radius: 12px;
    overflow-x: auto;
    font-family: "JetBrains Mono", "SF Mono", "Menlo", Consolas, monospace;
    font-size: .88rem;
    line-height: 1.7;
    position: relative;
}
.code-panel .copy-btn {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .2);
    color: #e6edf3;
    border-radius: 6px;
    font-size: .75rem;
    cursor: pointer;
    transition: all .2s;
}
.code-panel .copy-btn:hover { background: rgba(255, 255, 255, .2); }
.code-panel .copy-btn.copied { background: var(--success); border-color: var(--success); }

/* ========== C6: 最新资讯/博客 3 列卡片 ========== */
.latest-blog { padding: 100px 0; background: linear-gradient(180deg, rgba(0, 210, 255, .04), transparent); }
.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}
@media (max-width: 992px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-card {
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .3s, box-shadow .3s;
    border: 1px solid rgba(15, 23, 42, .04);
}
.blog-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.blog-card .cover {
    height: 180px;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    position: relative;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    font-size: 2.4rem;
}
.blog-card .cover.cover-2 { background: linear-gradient(135deg, #00d2ff, #e5ce2a); }
.blog-card .cover.cover-3 { background: linear-gradient(135deg, #f5365c, #fbc531); }
.blog-card .body { padding: 22px; }
.blog-card .meta { display: flex; gap: 12px; color: #94a3b8; font-size: .82rem; margin-bottom: 8px; }
.blog-card h5 { margin: 0 0 10px; font-size: 1.1rem; line-height: 1.4; color: #1e293b; }
.blog-card p { color: #64748b; font-size: .9rem; margin-bottom: 12px; }
.blog-card a.read-more {
    color: var(--brand-1);
    font-weight: 600;
    font-size: .9rem;
    text-decoration: none;
}
.blog-card a.read-more:hover { color: var(--brand-2); }

/* ========== 通用 section title ========== */
.section-title {
    text-align: center;
    margin-bottom: 16px;
}
.section-title .eyebrow {
    display: inline-block;
    padding: 4px 14px;
    background: rgba(229, 206, 42, .1);
    color: var(--brand-1);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.section-title h2 {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    color: #1e293b;
    margin: 0 0 8px;
}
.section-title p {
    color: #64748b;
    max-width: 640px;
    margin: 0 auto;
}
body.dark-mode .section-title h2 { color: #f1f5f9; }

/* ========== 页脚品牌简介 ========== */
.brand-brief {
    color: #94a3b8;
    font-size: .9rem;
    line-height: 1.7;
    margin-top: 14px;
}

/* ========== 滚动到顶部按钮兼容 ========== */
.scroll-top { z-index: 99; }

/* ========== 响应式微调 ========== */
@media (max-width: 768px) {
    .floating-cta { left: 12px; bottom: 130px; }
    .theme-toggle-btn { left: 12px; bottom: 70px; width: 42px; height: 42px; }
    .hero-code-block { margin-top: 16px; }
    .pricing-card.featured { transform: none; }
    .pricing-card.featured:hover { transform: translateY(-6px); }
}