* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}


html {
    /* 根字体大小16px - 影响：rem单位的基准，1rem = 16px，便于响应式设计 */
    font-size: 16px;
    
    /* 平滑滚动行为 - 影响：锚点跳转和JS滚动时的平滑动画效果 */
    scroll-behavior: smooth;
    
    /* 隐藏水平滚动条 - 影响：防止内容溢出造成水平滚动，保持页面整洁 */
    overflow-x: hidden;
}


body {
    /* 字体族设置（优先级从高到低） - 影响：整个网站的字体显示效果和兼容性 */
    /* Inter: 现代无衬线字体，适合数字显示 */
    /* -apple-system: iOS/macOS系统字体 */
    /* BlinkMacSystemFont: macOS系统字体备选 */
    /* Segoe UI: Windows系统字体 */
    /* Roboto: Android系统字体 */
    /* sans-serif: 通用无衬线字体后备 */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* 深黑色背景 - 影响：整个网站的背景色，营造高端专业感 */
    background-color: #0a0a0a;
    
    /* 白色文字 - 影响：与深色背景形成高对比度，确保文字清晰可读 */
    color: #ffffff;
    
    /* 行高1.6 - 影响：文字的垂直间距，提升阅读舒适度 */
    line-height: 1.6;
    
    /* 隐藏水平滚动条 - 影响：防止页面内容水平溢出 */
    overflow-x: hidden;
    
    /* WebKit浏览器字体平滑渲染 - 影响：在Safari/Chrome中显示更清晰的字体 */
    -webkit-font-smoothing: antialiased;
    
    /* Firefox字体平滑渲染 - 影响：在Firefox中显示更清晰的字体 */
    -moz-osx-font-smoothing: grayscale;
    
    /* iPhone刘海屏和药丸屏安全区域适配 - 影响：确保内容不被状态栏/Home指示器遮挡 */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}


:root {
    /* 主品牌色：金黄色 - 影响：按钮、标题、重要元素的主色调，传达财富和价值感 */
    --primary: #fac963;
    
    /* 主色深色版本 - 影响：悬停状态、渐变效果中使用，提供视觉层次 */
    --primary-dark: #f4c430;
    
    /* 深色背景色 - 影响：整个网站的主背景色，营造专业暗色主题 */
    --bg-dark: #0a0a0a;
    
    /* 卡片背景色 - 影响：内容卡片的背景，比主背景稍亮，形成层次感 */
    --bg-card: #1a1a1a;
    
    /* 纯白色文字 - 影响：主要文字内容的颜色，与深色背景形成最高对比度 */
    --text-white: #ffffff;
    
    /* 中灰色文字 - 影响：次要文字内容，如描述文字，降低视觉权重 */
    --text-gray: #cccccc;
    
    /* 浅灰色文字 - 影响：辅助信息文字，最低视觉权重，用于标签等 */
    --text-gray-light: #999999;
    
    /* 边框灰色 - 影响：分割线、边框等装饰元素，提供微妙的视觉分割 */
    --border-gray: #333333;
}


.container {
    /* 最大宽度100% - 影响：容器不会超出父元素宽度，防止水平溢出 */
    max-width: 100%;
    
    /* 左右内边距20px - 影响：内容与屏幕边缘保持安全距离，提升移动端阅读体验 */
    padding: 0 20px;
    
    /* 水平居中对齐 - 影响：容器在父元素中水平居中显示 */
    margin: 0 auto;
}




/* Logo盒子 */
.logo-box {
    /* Logo宽度64px - 影响：Logo的显示尺寸，适合移动端查看 */
    width: 64px;
    
    /* Logo高度64px - 影响：与宽度一致，形成正方形Logo */
    height: 64px;
    
    /* 使用主品牌色背景 - 影响：Logo的背景色，突出品牌识别 */
    background: var(--primary);
    
    /* 圆角12px - 影响：现代化的圆角设计，柔和视觉效果 */
    border-radius: 12px;
    
    /* Flexbox布局 - 影响：Logo内文字的居中对齐基础 */
    display: flex;
    
    /* 垂直居中对齐 - 影响：Logo文字在盒子中垂直居中 */
    align-items: center;
    
    /* 水平居中对齐 - 影响：Logo文字在盒子中水平居中 */
    justify-content: center;
    
    /* 黑色文字 - 影响：与金黄色背景形成高对比度，确保文字清晰 */
    color: #000;
    
    /* 超粗字体 - 影响：Logo文字的视觉权重，增强品牌印象 */
    font-weight: 800;
    
    /* 大字体24px - 影响：Logo文字的可读性和视觉冲击力 */
    font-size: 24px;
    
    /* 水平居中对齐 - 影响：Logo盒子在容器中居中显示 */
    margin: 0 auto;
}

/* Logo图片样式 - 放大一倍 */
.logo-image {
    height: 80px;
    width: auto;
    max-width: 400px;
    object-fit: contain;
    /* 确保logo在深色背景上清晰显示 */
}



.footer-logo-image {
    height: 90px;
    width: auto;
    max-width: 360px;
    object-fit: contain;
}

/* 响应式Logo样式 - 放大一倍 */
@media (max-width: 768px) {
    .logo-image {
        height: 70px;
        max-width: 320px;
    }
    
    .footer-logo-image {
        height: 70px;
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .logo-image {
        height: 60px;
        max-width: 230px;
    }
    
    .footer-logo-image {
        height: 60px;
        max-width: 240px;
    }
}



/* ===== 网站头部导航组件 ===== */
.header {
    /* 固定定位在页面顶部 - 影响：头部导航始终显示在屏幕顶部，不随滚动消失 */
    position: fixed;
    
    /* 定位到屏幕顶部边缘 - 影响：头部紧贴屏幕顶部 */
    top: 0;
    
    /* 从屏幕左边缘开始 - 影响：头部占满屏幕宽度的起始点 */
    left: 0;
    
    /* 到屏幕右边缘结束 - 影响：头部占满整个屏幕宽度 */
    right: 0;
    
    /* 半透明深色背景 - 影响：保持内容可见性的同时提供背景遮挡 */
    background: rgba(10, 10, 10, 0.95);
    
    /* 背景模糊效果10px - 影响：创建毛玻璃效果，增加现代感和层次感 */
    backdrop-filter: blur(10px);
    
    /* 底部边框线 - 影响：与页面内容形成视觉分割，定义头部边界 */
    border-bottom: 1px solid var(--border-gray);
    
    /* 高层级显示 - 影响：确保头部显示在大部分内容之上，但低于弹窗 */
    z-index: 1000;
    
    /* 上下内边距15px - 影响：头部内容的垂直间距，影响头部整体高度 */
    padding: 15px 0;
}

.header-content {
    display: flex;
    align-items: center;
    justify-content: center; /* 改为居中 */
    position: relative; /* 为了定位汉堡菜单 */
}

.logo {
    display: flex;
    align-items: center;
    justify-content: center; /* 居中对齐 */
    flex: 1; /* 占据中间空间 */
}

.logo .logo-box {
    width: 40px;
    height: 40px;
    background: var(--primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-weight: 800;
    font-size: 18px;
}

.logo-text {
    font-size: 24px; /* 增大字体 */
    font-weight: 800;
    color: var(--primary);
    text-align: center;
}

.menu-toggle {
    background: none;
    border: none;
    width: 30px;
    height: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    position: absolute; /* 绝对定位 */
    right: 0; /* 固定在右边 */
}

.menu-toggle span {
    width: 100%;
    height: 3px;
    background: var(--text-white);
    border-radius: 2px;
    transition: all 0.3s ease;
}

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

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

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

/* Mobile Navigation */
.mobile-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-dark);
    border-bottom: 1px solid var(--border-gray);
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    padding: 20px;
}

.mobile-nav.active {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}

.nav-link {
    display: block;
    color: var(--text-gray);
    text-decoration: none;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-gray);
    font-weight: 500;
    transition: color 0.3s ease;
}

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

.nav-cta {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-gray);
}

/* ===== BUTTONS ===== */
.btn-primary {
    background: var(--primary);
    color: #000;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    text-align: center;
    box-shadow: 0 4px 12px rgba(250, 201, 99, 0.3);
}

.btn-primary:hover,
.btn-primary:active {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(250, 201, 99, 0.4);
}

.btn-primary.btn-large {
    /* 恢复电脑版原来的按钮大小 - 影响：电脑版按钮回到原有尺寸 */
    padding: 16px 32px;
    font-size: 18px;
    border-radius: 16px;
}

.btn-secondary {
    background: transparent;
    color: var(--primary);
    border: 2px solid var(--primary);
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

.btn-secondary:hover,
.btn-secondary:active {
    background: var(--primary);
    color: #000;
    transform: translateY(-2px);
}

.btn-claim {
    width: 100%;
    background: var(--primary);
    color: #000;
    border: none;
    padding: 16px 20px; /* 恢复舒适的内边距 */
    border-radius: 12px;
    font-weight: 700;
    font-size: 17px; /* 舒适的字体大小 */
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 20px; /* 恢复舒适的顶部间距 */
    letter-spacing: 0.5px; /* 增加字母间距 */
}

.btn-claim:hover,
.btn-claim:active {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* ===== HERO SECTION ===== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding: 100px 0 60px;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero-circle {
    position: absolute;
    border-radius: 50%;
    background: var(--primary);
    opacity: 0.1;
    filter: blur(60px);
    animation: float 6s ease-in-out infinite;
}

.hero-circle-1 {
    width: 200px;
    height: 200px;
    top: 20%;
    left: -50px;
    animation-delay: 0s;
}

.hero-circle-2 {
    width: 300px;
    height: 300px;
    bottom: 20%;
    right: -100px;
    animation-delay: 3s;
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 10;
}

.hero-title {
    /* 底部外边距 - 影响：与下方内容的间距 */
    margin-bottom: 30px;
    
    /* 文字居中对齐 - 影响：标题在页面中央显示 */
    text-align: center;
    
    /* 行高 - 影响：整体标题的垂直节奏 */
    line-height: 1;
}

/* 主标题 - "Top-Tier Gaming" */
.gradient-text-main {
    /* 电脑版大字体32px - 影响：主要部分更突出醒目 */
    font-size: 32px;
    
    /* 字体粗细700 - 影响：主标题更粗更突出 */
    font-weight: 700;
    
    /* 纯白色文字 - 影响：简洁干净的颜色 */
    color: #f0eded;
    background: none;
    
    /* 块级显示 - 影响：独占一行 */
    display: block;
    
    /* 底部外边距4px - 影响：与副标题的紧密间距 */
    margin-bottom: 4px;
    
    /* 字母间距 - 影响：现代感的字母排版 */
    letter-spacing: 1px;
    
    /* 行高 - 影响：文字的垂直节奏感 */
    line-height: 1.1;
    
    /* 文字阴影 - 影响：立体感 */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* 副标题 - "Partnership Hub" */
.gradient-text-sub {
    /* 电脑版小字体20px - 影响：副标题较小，不抢主标题风头 */
    font-size: 20px;
    
    /* 字体粗细400 - 影响：副标题较轻，形成层次感 */
    font-weight: 400;
    
    /* 浅白色文字 - 影响：副标题稍淡，突出主标题 */
    color: rgba(255, 255, 255, 0.9);
    background: none;
    
    /* 块级显示 - 影响：独占一行 */
    display: block;
    
    /* 底部外边距12px - 影响：与下方内容的间距 */
    margin-bottom: 12px;
    
    /* 字母间距 - 影响：副标题的精致排版 */
    letter-spacing: 0.8px;
    
    /* 行高 - 影响：文字的垂直节奏感 */
    line-height: 1.2;
    
    /* 文字阴影 - 影响：轻微立体感 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.hero-subtitle {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-white);
    display: block;
}

.hero-description {
    font-size: 18px;
    color: var(--text-gray);
    margin-bottom: 30px;
    line-height: 1.7;
}

.highlight {
    color: var(--primary);
    font-weight: 700;
}

.hero-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 40px;
}

.feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-gray);
    font-size: 14px;
}

.feature-dot {
    width: 8px;
    height: 8px;
    background: var(--primary);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

.hero-buttons {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* 恢复电脑版原来的间距 - 影响：电脑版按钮与Swipe Down保持原有距离 */
    margin-bottom: 60px;
}

.scroll-hint {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 恢复电脑版原来的间距 - 影响：电脑版Swipe Down保持原有位置 */
    gap: 15px;
    animation: bounce 2s infinite;
}

.scroll-indicator {
    width: 40px;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    border: 2px solid #ffff;
    border-radius: 50%;
    animation: pulseGlow 2s infinite;
}

.scroll-indicator::before {
    content: '↓';
    font-size: 20px;
    color: #fac963;
    font-weight: bold;
    animation: arrowBounce 2s infinite;
}

.scroll-hint p {
    font-size: 12px;
    color: var(--text-gray-light);
}

/* ===== SECTION STYLES ===== */
.section-header {
    text-align: center;
    margin-bottom: 40px;
}

.section-title {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-white);
    margin-bottom: 15px;
    background: linear-gradient(135deg, #fac963 0%, #f4c430 50%, #daa520 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Partners标题特殊样式 - 比较长/大 */
.partners .section-title {
    /* Partners标题更大 - 影响：让Partners标题更突出醒目 */
    font-size: 42px !important;
    
    /* 字母间距 - 影响：让文字看起来更长更延展 */
    letter-spacing: 2px;
    
    /* 字体粗细 - 影响：更粗更有份量 */
    font-weight: 900;
    
    /* 行高 - 影响：给大字体适当的行高 */
    line-height: 1.2;
}

/* Withdrawals标题特殊样式 - 较小 */
.withdrawals .section-title {
    /* Withdrawals标题较小 - 影响：让Withdrawals标题不那么突出 */
    font-size: 24px !important;
    
    /* 字体粗细 - 影响：较轻的视觉重量 */
    font-weight: 600;
    
    /* 字母间距 - 影响：紧凑的排版 */
    letter-spacing: 0.5px;
}

.section-description {
    font-size: 16px;
    color: var(--text-gray);
    line-height: 1.6;
}

.section-footer {
    text-align: center;
    margin-top: 40px;
}

/* ===== PARTNERS SECTION REMOVED ===== */

/* ===== NEW PARTNERS SECTION - 现代化设计 ===== */
.partners {
    padding: 80px 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 50%, #f1f3f4 100%);
    position: relative;
    color: #333333; /* 确保文字为深色 */
}

.partners::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(250, 201, 99, 0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
    pointer-events: none;
}

.partners .container {
    position: relative;
    z-index: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 30px;
}

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

.partners .section-title {
    font-size: 42px;
    font-weight: 800;
    color: #333333 !important; /* 强制深色文字 */
    margin-bottom: 16px;
    letter-spacing: -0.02em;
    position: relative;
    display: inline-block;
}

.partners .section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, #fac963, #ffd700);
    border-radius: 2px;
}

.partners .section-description {
    font-size: 18px;
    color: #666666 !important; /* 强制灰色文字 */
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* ===== 专业合作伙伴网格 - 3列布局（电脑版宽度增加） ===== */
.partners-grid {
    /* 使用CSS Grid布局系统 - 影响：电脑版和手机版通用基础布局 */
    display: grid;
    
    /* 电脑版：创建3个等宽列布局 - 影响：仅电脑版(>768px)，手机版会被媒体查询覆盖 */
    grid-template-columns: repeat(3, 1fr);
    
    /* 卡片之间的间距50px - 影响：电脑版卡片水平和垂直间距，让卡片有更多展示空间 */
    gap: 50px;
    
    /* 顶部外边距 - 影响：整个Partners区域与上方Hero区域的距离 */
    margin-top: 40px;
    
    /* 每个网格项在其单元格内居中对齐 - 影响：确保卡片在网格中居中显示 */
    justify-items: center;
    
    /* 网格容器内边距 - 影响：整个Partners区域的上下内边距 */
    padding: 30px 0;
    
    /* 电脑版最大宽度3200px（确保880px卡片有足够空间） - 影响：电脑版整体布局更宽更大气 */
    max-width: 3200px;
    
    /* 水平居中对齐 - 影响：整个Partners区域在页面中央显示 */
    margin-left: auto;
    margin-right: auto;
}

/* ===== 专业合作伙伴卡片设计 ===== */
.card {
    width: 100%;
    max-width: 350px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: visible;
    border: 1px solid #f0f0f0;
    position: relative;
    margin-top: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.card:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.card:hover .signup-banner {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

.card:hover .special-badge {
    transform: scale(1.1);
    box-shadow: 2.5px 2.5px 0 #b48c28, 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* 为了兼容现有代码，也保留partner-card类 */
.partner-card {
    /* 卡片宽度占满网格单元格 - 影响：卡片在网格中的宽度分配 */
    width: 100%;
    
    /* 电脑版最大宽度880px（强制执行） - 影响：电脑版卡片更宽，内容展示更舒适 */
    max-width: 360px !important;
    
    /* 白色背景 - 影响：卡片与页面背景形成对比，突出卡片内容 */
    background: #fff;
    
    /* 圆角20px - 影响：现代化外观，柔和的视觉效果 */
    border-radius: 20px;
    
    /* 阴影效果 - 影响：卡片悬浮感，增加立体效果和层次感 */
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    
    /* 允许内容溢出（用于顶部按钮等元素） - 影响：特殊元素可以超出卡片边界显示 */
    overflow: visible;
    
    /* 淡灰色边框 - 影响：卡片边界定义，与背景形成微妙分割线 */
    border: 1px solid #f0f0f0;
    
    /* 相对定位 - 影响：为内部绝对定位元素提供定位参考 */
    position: relative;
    
    /* 顶部外边距 - 影响：卡片与上方元素的间距 */
    margin-top: 15px;
    
    /* 过渡动画0.3秒 - 影响：悬停效果的平滑过渡 */
    transition: all 0.3s ease;
    
    /* 鼠标指针 - 影响：用户交互提示，表明卡片可点击 */
    cursor: pointer;
}

.partner-card:hover {
    transform: scale(1.05);
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.partner-card:hover .signup-banner {
    transform: translateX(-50%) scale(1.1);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.35);
}

.partner-card:hover .special-badge {
    transform: scale(1.1);
    box-shadow: 2.5px 2.5px 0 #b48c28, 0 6px 15px rgba(0, 0, 0, 0.3);
}

/* ===== 完全复制你的Top Bar设计 - 更圆润的上边角 ===== */
.top-bar {
    background: #2b2e32;
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 16px;
    position: relative;
    z-index: 1;
    gap: 20px;
    border-top-left-radius: 36px;
    border-top-right-radius: 36px;
}

/* 为了兼容现有代码，也保留card-top-row类 - 更圆润 */
.card-top-row {
    background: #2b2e32;
    color: white;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px 16px;
    position: relative;
    z-index: 1;
    gap: 20px;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
}

/* Special Bonus Badge - 缩小版本 */
.special-badge {
    position: absolute;
    top: -8px;
    left: -8px;
    background: #1b1b1b;
    color: white;
    border-radius: 12px 0 12px 0;
    padding: 4px 8px 4px 6px;
    font-size: 9px;
    font-weight: 600;
    display: flex;
    align-items: center;
    box-shadow: 1.5px 1.5px 0 #b48c28;
    z-index: 20;
    transition: all 0.3s ease;
}

.special-badge img {
    width: 10px;
    height: 10px;
    margin-right: 4px;
}

.special-badge .bonus-text {
    display: flex;
    flex-direction: column;
    line-height: 1.0;
}

.special-badge .bonus-text span:first-child {
    color: #fff;
    font-size: 8px;
}

.special-badge .bonus-text span:last-child {
    color: gold;
    font-weight: bold;
    font-size: 8px;
}

/* Special Badge悬停效果已整合到卡片悬停中 */

/* Sign Up Free - 缩小尺寸的设计 */
.signup-banner {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, #c40000, #ff3c3c);
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    text-align: center;
    padding: 3px 10px 8px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    width: 90px;
    z-index: 10;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.signup-banner .amount {
    font-size: 16px;
    font-weight: 700;
    margin-top: 1px;
    display: block;
}

/* signup-banner悬停效果已整合到卡片悬停中 */

/* 专业LOGO容器 - 简洁居中设计 */
.brand-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0px 0px;
    background: #fafafa;
    border-radius: 20px 20px 0 0;
}

.brand-logo {
    width: 200px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid #e8e8e8;
    position: relative;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.brand-logo:empty::after {
    content: "LOGO";
    font-size: 8px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 600;
    text-align: center;
}

.brand-logo:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

/* 专业合作伙伴信息区域 */
.partner-info {
    padding: 25px 20px;
    text-align: center;
}

.partner-name {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.partner-description {
    font-size: 14px;
    color: #666;
    margin: 0 0 20px 0;
    line-height: 1.4;
}

.partner-btn {
    background: linear-gradient(135deg, #fac963, #f4b942);
    color: #333;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(250, 201, 99, 0.3);
}

.partner-btn:hover {
    background: linear-gradient(135deg, #f4b942, #e8a632);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(250, 201, 99, 0.4);
}

/* 后期通过后台添加LOGO图片时使用这个样式 */
.brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 6px;
}

/* 当有LOGO图片时，隐藏"LOGO"占位文字 */
.brand-logo:not(:empty)::after {
    display: none;
}

/* 品牌名称已移除 - 现在只显示LOGO */

.brand {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #fff;
    text-align: left;
}

/* 隐藏空的brand div */
.brand:empty {
    display: none;
}

.claim-btn {
    background: #30c34e;
    color: white;
    border: none;
    padding: 6px 14px;
    font-size: 14px;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    margin-left: auto;
}

.partner-logo {
    width: 80px;
    height: 80px;
    border-radius: 16px;
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.partner-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.logo-placeholder {
    font-size: 14px;
    font-weight: 700;
    color: #666666 !important; /* 强制灰色文字 */
    letter-spacing: 1px;
    display: none; /* 只有在图片加载失败时显示 */
}

.signup-offer {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: #ffffff !important; /* 强制白色文字 */
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ===== 卡片内容 ===== */
.partner-content {
    padding: 20px 30px;
    text-align: center;
}

.partner-name {
    font-size: 24px;
    font-weight: 700;
    color: #333333 !important; /* 强制深色文字 */
    margin-bottom: 20px;
    letter-spacing: -0.01em;
}

.claim-btn {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: #ffffff !important; /* 强制白色文字 */
    border: none;
    padding: 16px 32px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    text-transform: uppercase;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
}

.claim-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
}

.claim-btn span {
    position: relative;
    z-index: 2;
    color: #ffffff !important; /* 强制白色文字 */
}

.btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s ease;
}

.claim-btn:hover .btn-glow {
    left: 100%;
}

/* ===== Partner Logo - 黑色徽章设计 ===== */
.partner-logo {
    background: #000000;
    color: #fac963;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    min-width: auto;
    width: auto;
    height: auto;
}

.partner-logo img {
    display: none;
}

.logo-placeholder {
    font-size: 12px;
    font-weight: 700;
    color: #fac963;
    letter-spacing: 0.5px;
    display: block;
    text-transform: uppercase;
}

/* ===== Signup Offer 红色横幅样式 ===== */
.signup-offer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: #dc3545;
    color: #ffffff !important;
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    box-shadow: 0 3px 8px rgba(220, 53, 69, 0.4);
    z-index: 10;
    white-space: nowrap;
}

/* ===== 品牌名称样式 ===== */
.brand-name {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
    color: #ffffff;
    flex: 1;
    text-align: center;
}

/* ===== Claim 按钮样式更新 - 绿色设计 ===== */
.claim-btn {
    background: #30c34e;
    color: #ffffff !important;
    border: none;
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(48, 195, 78, 0.3);
    position: relative;
    min-width: auto;
    text-align: center;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.claim-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(48, 195, 78, 0.5);
}

.claim-btn span {
    color: #ffffff !important;
}

/* ===== Partner Center - 隐藏中间区域 ===== */
.partner-center {
    display: none !important;
}

/* ===== 完全复制你的Bonus Row设计 ===== */
.bonus-row {
    display: flex;
    text-align: center;
    padding: 16px 0;
}

.bonus-col {
    flex: 1;
    border-left: 1px solid #eee;
}

.bonus-col:first-child {
    border-left: none;
}

.bonus-title {
    font-size: 14px;
    color: #444;
    margin-bottom: 4px;
}

.bonus-value {
    font-size: 20px;
    font-weight: bold;
    color: #20a241;
}

/* 为了兼容现有代码，也保留partner-bonuses类 */
.partner-bonuses {
    display: flex;
    text-align: center;
    padding: 16px 0;
}

.bonus-item {
    flex: 1;
    border-left: 1px solid #eee;
}

.bonus-item:first-child {
    border-left: none;
}

.bonus-label {
    font-size: 14px;
    color: #444;
    margin-bottom: 4px;
}

/* ===== 响应式设计 ===== */
@media (max-width: 768px) {
    .partners {
        padding: 60px 0;
        color: #333333 !important; /* 强制深色文字 */
    }
    
    .partners .container {
        padding: 0 16px;
    }
    
    .partners .section-title {
        font-size: 32px;
        color: #333333 !important; /* 强制深色文字 */
    }
    
    .partners .section-description {
        font-size: 16px;
        color: #666666 !important; /* 强制灰色文字 */
    }
    
    /* 手机端：1列布局 - 专业设计 */
    .partners-grid {
        grid-template-columns: 1fr;
        gap: 25px;
        justify-items: center;
        padding: 20px 10px;
    }
    
    /* 移动端 - 专业卡片设计 */
    .card, .partner-card {
        width: 100%;
        max-width: 340px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.08);
        overflow: visible;
        border: 1px solid #f0f0f0;
        position: relative;
        margin-top: 10px;
        transition: all 0.3s ease;
        cursor: pointer;
    }

    .card:hover, .partner-card:hover {
        transform: scale(1.03);
        box-shadow: 0 15px 35px rgba(0,0,0,0.18);
    }

    .card:hover .signup-banner, .partner-card:hover .signup-banner {
        transform: translateX(-50%) scale(1.08);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    }

    .card:hover .special-badge, .partner-card:hover .special-badge {
        transform: scale(1.08);
        box-shadow: 2px 2px 0 #b48c28, 0 5px 10px rgba(0, 0, 0, 0.25);
    }
    
    .top-bar, .card-top-row {
        background: #2b2e32;
        color: white;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        padding: 10px 14px;
        position: relative;
        z-index: 1;
        gap: 15px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
    
    /* 移动端 - Special Badge 进一步缩小 */
    .special-badge {
        position: absolute;
        top: -6px;
        left: -6px;
        background: #1b1b1b;
        color: white;
        border-radius: 10px 0 10px 0;
        padding: 3px 6px 3px 4px;
        font-size: 8px;
        font-weight: 600;
        display: flex;
        align-items: center;
        box-shadow: 1px 1px 0 #b48c28;
        z-index: 20;
        transition: all 0.3s ease;
    }

    .special-badge img {
        width: 8px;
        height: 8px;
        margin-right: 3px;
    }

    .special-badge .bonus-text {
        display: flex;
        flex-direction: column;
        line-height: 0.9;
    }

    .special-badge .bonus-text span:first-child {
        color: #fff;
        font-size: 6px;
    }

    .special-badge .bonus-text span:last-child {
        color: gold;
        font-weight: bold;
        font-size: 6px;
    }

    /* 移动端 - Sign Up Banner 缩小尺寸 */
    .signup-banner {
        position: absolute;
        top: -12px;
        left: 50%;
        transform: translateX(-50%);
        background: linear-gradient(to bottom, #c40000, #ff3c3c);
        color: white;
        font-family: 'Poppins', sans-serif;
        font-size: 9px;
        text-align: center;
        padding: 2px 8px 6px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        width: 75px;
        z-index: 10;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

    .signup-banner .amount {
        font-size: 14px;
        font-weight: 700;
        margin-top: 1px;
        display: block;
    }

    /* 移动端 - 专业LOGO容器 */
    .brand-container {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0px 0px;
        background: #fafafa;
        border-radius: 16px 16px 0 0;
    }

    .brand-logo {
        width: 180px;
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #fff;
        border-radius: 10px;
        transition: all 0.3s ease;
        border: 1px solid #e8e8e8;
        position: relative;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    }

    .brand-logo:empty::after {
        content: "LOGO";
        font-size: 6px;
        color: rgba(255, 255, 255, 0.5);
        font-weight: 600;
        text-align: center;
    }

    .brand-logo:hover {
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        transform: translateY(-1px);
    }

    /* 移动端 - 合作伙伴信息区域 */
    .partner-info {
        padding: 20px 15px;
        text-align: center;
    }

    .partner-name {
        font-size: 18px;
        font-weight: 700;
        color: #333;
        margin: 0 0 6px 0;
    }

    .partner-description {
        font-size: 13px;
        color: #666;
        margin: 0 0 18px 0;
        line-height: 1.4;
    }

    .partner-btn {
        background: linear-gradient(135deg, #fac963, #f4b942);
        color: #333;
        border: none;
        padding: 10px 25px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s ease;
        box-shadow: 0 3px 12px rgba(250, 201, 99, 0.3);
    }

    .partner-btn:hover {
        background: linear-gradient(135deg, #f4b942, #e8a632);
        transform: translateY(-1px);
        box-shadow: 0 4px 15px rgba(250, 201, 99, 0.4);
    }

    /* 移动端 - 后期通过后台添加LOGO图片时使用 */
    .brand-logo img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 4px;
    }

    /* 移动端 - 当有LOGO图片时，隐藏"LOGO"占位文字 */
    .brand-logo:not(:empty)::after {
        display: none;
    }

    /* 移动端 - Brand */
    .brand {
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.6px;
        color: #fff;
        text-align: left;
        line-height: 1.2;
    }

    /* 移动端 - 隐藏空的brand div */
    .brand:empty {
        display: none;
    }

    /* 移动端 - Claim Button */
    .claim-btn {
        background: #30c34e;
        color: white;
        border: none;
        padding: 5px 12px;
        font-size: 12px;
        border-radius: 18px;
        cursor: pointer;
        font-weight: bold;
        margin-left: auto;
    }
    
    /* 移动端 - Bonus Row */
    .bonus-row, .partner-bonuses {
        display: flex;
        text-align: center;
        padding: 14px 0;
    }

    .bonus-col, .bonus-item {
        flex: 1;
        border-left: 1px solid #eee;
    }

    .bonus-col:first-child, .bonus-item:first-child {
        border-left: none;
    }

    .bonus-title, .bonus-label {
        font-size: 12px;
        color: #444;
        margin-bottom: 3px;
    }

    .bonus-value {
        font-size: 17px;
        font-weight: bold;
        color: #20a241;
    }
    
    /* 移动端样式结束 */
}

@media (max-width: 480px) {
    .partners {
        color: #333333 !important; /* 强制深色文字 */
    }
    
    .partners-grid {
        gap: 20px;
    }
    
    .partner-header {
        padding: 20px 20px 12px;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        text-align: center;
    }
    
    .partner-content {
        padding: 12px 20px;
    }
    
    .partner-bonuses {
        padding: 12px 20px 20px;
    }
    
    .partner-card {
        background: #ffffff !important; /* 强制白色背景 */
        color: #333333 !important; /* 强制深色文字 */
    }
}

/* ===== WITHDRAWALS SECTION ===== */
.withdrawals {
    padding: 80px 0;
    background: var(--bg-card);
}

.title-with-live {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 15px;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(34, 197, 94, 0.1);
    padding: 6px 12px;
    border-radius: 20px;
    /* 整个Live indicator闪烁 - 影响：Live感觉更强烈 */
    animation: liveBlink 1.5s infinite;
}

.live-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    /* 增强Live dot闪烁 - 影响：红点更明显的脉动效果 */
    animation: livePulse 1s infinite;
}

.live-indicator span {
    color: #22c55e;
    font-weight: 700;
    font-size: 14px;
    /* Live文字闪烁 - 影响：Live文字有闪烁感 */
    animation: liveTextBlink 2s infinite;
}

.withdrawals-container {
    background: var(--bg-dark);
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 30px;
}

.withdrawals-list {
    max-height: 400px;
    overflow-y: auto;
    margin-bottom: 20px;
}

.withdrawal-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-gray);
    border-radius: 12px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
    animation: fadeIn 0.5s ease-out;
}

.withdrawal-item:hover {
    border-color: rgba(250, 201, 99, 0.3);
}

.withdrawal-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.partner-avatar {
    width: 40px;
    height: 40px;
    background: rgba(250, 201, 99, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 700;
    font-size: 12px;
}

.withdrawal-info h4 {
    color: var(--text-white);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.withdrawal-info p {
    color: var(--text-gray);
    font-size: 12px;
}

.withdrawal-right {
    text-align: right;
}

.withdrawal-amount {
    color: var(--primary);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 4px;
}

.withdrawal-time {
    color: var(--text-gray);
    font-size: 12px;
}

.withdrawals-stats {
    border-top: 1px solid var(--border-gray);
    padding-top: 20px;
}

.stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-label,
.stat-value {
    color: var(--text-gray);
    font-size: 12px;
}

.live-control {
    text-align: center;
}

.btn-live {
    background: #22c55e;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    /* Live Updating按钮闪烁 - 影响：红色按钮有直播感的闪烁 */
    animation: liveButtonBlink 2.5s infinite;
}

.btn-live:not(.active) {
    background: var(--border-gray);
    color: var(--text-gray);
    /* 非激活状态不闪烁 - 影响：只有激活的按钮才闪烁 */
    animation: none;
}

/* ===== PROVIDERS SECTION - 已移除 ===== */
/* Game Payout Rate 部分已删除 */

/* ===== TESTIMONIALS SECTION ===== */
.testimonials {
    padding: 80px 0;
    background: var(--bg-card);
}

.testimonials-grid {
    display: grid;
    gap: 20px;
    margin-bottom: 40px;
}

.testimonial-card {
    background: var(--bg-dark);
    border: 1px solid var(--border-gray);
    border-radius: 16px;
    padding: 20px;
    transition: all 0.3s ease;
}

.testimonial-card:hover {
    border-color: rgba(250, 201, 99, 0.5);
    transform: translateY(-2px);
}

.testimonial-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 16px;
}

.user-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: rgba(250, 201, 99, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

.user-details {
    flex: 1;
}

.user-name {
    color: var(--text-white);
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
}

.verified {
    color: #22c55e;
    font-size: 12px;
    margin-left: 4px;
}

.rating {
    color: #fbbf24;
    font-size: 14px;
}

.partner-mini-logo {
    width: 32px;
    height: 32px;
    background: var(--border-gray);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    font-weight: 700;
    font-size: 10px;
    flex-shrink: 0;
}

.testimonial-text {
    color: var(--text-gray);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 16px;
}

.testimonial-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--border-gray);
    font-size: 12px;
    color: var(--text-gray-light);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 40px;
}

.stat-card {
    background: var(--bg-dark);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
}

.stat-number {
    color: var(--primary);
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 8px;
}

.stat-label {
    color: var(--text-gray);
    font-size: 12px;
}

/* ===== FOOTER ===== */
.footer {
    background: var(--bg-dark);
    border-top: 1px solid var(--border-gray);
    padding: 60px 0 20px;
}

.footer-content {
    display: grid;
    gap: 40px;
    margin-bottom: 40px;
}

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

.footer-brand .logo {
    justify-content: center;
    margin-bottom: 20px;
}

.footer-description {
    color: var(--text-gray);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 24px;
}

.social-links {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.social-link {
    width: 40px;
    height: 40px;
    background: var(--border-gray);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-white);
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    transition: all 0.3s ease;
}

.social-link:hover {
    background: var(--primary);
    color: #000;
}

.footer-section {
    text-align: center;
}

.footer-title {
    color: var(--text-white);
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 20px;
}

.license-grid,
.cert-grid {
    display: grid;
    gap: 12px;
}

.license-item,
.cert-item {
    background: var(--border-gray);
    border-radius: 8px;
    padding: 16px;
}

.license-code,
.cert-code {
    color: var(--primary);
    font-weight: 700;
    font-size: 14px;
    margin-bottom: 4px;
}

.license-name,
.cert-name {
    color: var(--text-gray);
    font-size: 10px;
}

.footer-bottom {
    border-top: 1px solid var(--border-gray);
    padding-top: 30px;
    text-align: center;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    margin-bottom: 20px;
}

.footer-links a {
    color: var(--text-gray);
    text-decoration: none;
    font-size: 12px;
    transition: color 0.3s ease;
}

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

.copyright {
    color: var(--text-gray);
    font-size: 12px;
    margin-bottom: 20px;
}

.disclaimer {
    background: rgba(51, 51, 51, 0.3);
    border-radius: 8px;
    padding: 16px;
    margin-top: 20px;
}

.disclaimer p {
    color: var(--text-gray);
    font-size: 10px;
    line-height: 1.5;
}

/* ===== BACK TO TOP ===== */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: var(--primary);
    color: #000;
    border: none;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 1000;
}

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

.back-to-top:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

/* ===== ANIMATIONS ===== */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes loading {
    from { width: 0%; }
    to { width: 80%; }
}

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

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
    40%, 43% { transform: translateY(-10px); }
    70% { transform: translateY(-5px); }
    90% { transform: translateY(-2px); }
}

@keyframes pulseGlow {
    0%, 100% { 
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% { 
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    }
}

@keyframes arrowBounce {
    0%, 20%, 50%, 80%, 100% { 
        transform: translateY(0); 
    }
    40% { 
        transform: translateY(-8px); 
    }
    60% { 
        transform: translateY(-4px); 
    }
}

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

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

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Small phones */
@media (max-width: 375px) {
    .container {
        padding: 0 16px;
    }
    
    .gradient-text-main {
        /* 手机版主标题24px - 影响：手机上突出的主标题 */
        font-size: 24px;
        
        /* 手机版字母间距稍小 - 影响：适合小屏幕的排版 */
        letter-spacing: 0.6px;
        
        /* 手机版底部间距 - 影响：与副标题的紧密间距 */
        margin-bottom: 2px;
    }
    
    .gradient-text-sub {
        /* 手机版副标题16px - 影响：手机上精致的副标题大小 */
        font-size: 16px;
        
        /* 手机版字母间距 - 影响：适合小屏幕的排版 */
        letter-spacing: 0.4px;
    }
    
    .hero-subtitle {
        font-size: 20px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    /* 小屏幕优化合作伙伴卡片 - 保持舒适感 */
    .partners-grid {
        gap: 16px; /* 适中的间距 */
    }
    
    .partner-card {
        padding: 20px; /* 保持足够的内边距 */
    }
    
    .partner-logo {
        height: 70px; /* 适中的高度 */
        margin-bottom: 20px;
    }
    
    .partner-logo span {
        font-size: 14px; /* 保持可读的字体大小 */
    }
    
    .bonus-label {
        font-size: 12px; /* 可读的标签字体 */
    }
    
    .bonus-amount {
        font-size: 16px; /* 保持醒目的金额字体 */
    }
    
    .btn-claim {
        padding: 14px 18px; /* 舒适的按钮内边距 */
        font-size: 16px; /* 清晰的按钮字体 */
    }
}

/* Large phones */
@media (min-width: 376px) and (max-width: 414px) {
    .hero-buttons {
        flex-direction: row;
        gap: 12px;
    }
    
    .hero-buttons .btn-large {
        flex: 1;
        padding: 14px 20px;
        font-size: 16px;
    }
}

/* Tablets */
@media (min-width: 768px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr;
        text-align: left;
    }
    
    .footer-brand {
        text-align: left;
    }
    
    .footer-brand .logo {
        justify-content: flex-start;
    }
    
    .social-links {
        justify-content: flex-start;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .hero-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* ===== PARTNERS SECTION - 100% 抄袭 https://mybet9au.com/mybet9partnership ===== */
.partners-section {
    padding: 40px 0;
    background-color: #000000;
    min-height: 100vh;
}

.partners-container {
    width: 100%;
    max-width: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 标题 - 完全按照参考网站 */
.partners-header {
    text-align: center;
    margin-bottom: 40px;
}

.partners-title {
    font-size: 28px;
    font-weight: bold;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* 合作伙伴网格 - 精确尺寸匹配 */
.partners-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 42.516px; /* 精确垂直间距 */
}

.partners-row {
    display: flex;
    justify-content: center;
    gap: 30px; /* 精确水平间距 */
    align-items: center;
}

.partner-link {
    display: block;
    width: 350px; /* 精确宽度 */
    height: 135.453px; /* 精确高度 */
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.partner-link:hover {
    opacity: 0.8;
}

.partner-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #fac963 0%, #f4c430 100%);
    border: 2px solid #fac963;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    color: #000000;
    text-align: center;
    box-shadow: 0 4px 8px rgba(250, 201, 99, 0.3);
    transition: all 0.3s ease;
}

.partner-link:hover .partner-placeholder {
    transform: scale(1.02);
    box-shadow: 0 6px 12px rgba(250, 201, 99, 0.4);
}

/* 特殊标识的合作伙伴样式 */
.partner-placeholder:contains("Diamond") {
    background: linear-gradient(135deg, #b8860b 0%, #daa520 100%);
    border-color: #daa520;
}

.partner-placeholder:contains("VIP") {
    background: linear-gradient(135deg, #800080 0%, #9932cc 100%);
    border-color: #9932cc;
    color: #ffffff;
}

.partner-placeholder:contains("Platinum") {
    background: linear-gradient(135deg, #c0c0c0 0%, #e5e5e5 100%);
    border-color: #e5e5e5;
}

/* 响应式设计 - 手机版 */
@media (max-width: 768px) {
    .partners-section {
        padding: 20px 0;
    }
    
    .partners-title {
        font-size: 24px;
    }
    
    .partners-header {
        margin-bottom: 30px;
    }
    
    /* 保持精确尺寸，但调整布局 */
    .partners-row {
        gap: 20px; /* 手机版减少水平间距 */
    }
    
    .partners-grid {
        gap: 30px; /* 手机版减少垂直间距 */
        padding: 0 10px;
    }
    
    /* 在非常小的屏幕上稍微缩小 */
    @media (max-width: 480px) {
        .partner-link {
            width: 300px;
            height: 116px;
        }
        
        .partners-row {
            gap: 15px;
        }
        
        .partner-placeholder {
            font-size: 12px;
        }
    }
}

/* 大屏幕优化 */
@media (min-width: 1200px) {
    .partners-section {
        padding: 60px 0;
    }
    
    .partners-title {
        font-size: 32px;
    }
    
    .partners-header {
        margin-bottom: 50px;
    }
}

/* ===== Partnership Banner - 绿色Telegram风格 ===== */
.partnership-banner {
    background: linear-gradient(135deg, #54a9eb 0%, #54a9eb 50%, #0088cc 100%);
    border-radius: 20px;
    margin-bottom: 40px;
    position: relative;
    padding: 45px 35px;
    overflow: hidden;
    box-shadow: 
        0 20px 40px rgba(250, 201, 99, 0.3),
        0 10px 20px rgba(250, 201, 99, 0.2);
}

.banner-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    align-items: flex-start;
    position: relative;
    z-index: 2;
}

.banner-text {
    flex: 1;
    color: white;
}

.banner-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 5px;
    opacity: 0.9;
}

.banner-subtitle {
    font-size: 16px;
    font-weight: 600;
    color: #f4b942;
    margin-bottom: 10px;
}

.banner-main-title {
    font-size: 36px;
    font-weight: 900;
    color: white;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
    margin: 0;
}

.banner-elements {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

/* Telegram风格图标 */
.telegram-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255, 255, 255, 0.3);
    animation: telegramFloat 3s ease-in-out infinite;
}

.telegram-arrow {
    font-size: 24px;
    color: white;
    transform: rotate(-45deg);
}

/* Join Telegram按钮 */
.join-telegram-btn {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.join-telegram-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-2px);
}

/* 装饰性金色底边 */
.banner-bottom-accent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #d97706);
}

/* 背景装饰元素 */
.partnership-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20px;
    width: 100px;
    height: 200px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    transform: rotate(25deg);
    z-index: 1;
}

.partnership-banner::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: -20px;
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    z-index: 1;
}

/* 动画效果 */
@keyframes telegramFloat {
    0%, 100% { 
        transform: translateY(0px) scale(1);
    }
    50% { 
        transform: translateY(-8px) scale(1.05);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .partnership-banner {
        padding: 35px 20px;
        margin-bottom: 30px;
    }
    
    .banner-content {
        /* 保持水平布局，文字左边，logo右边 */
        flex-direction: row;
        align-items: flex-start;
        gap: 20px;
    }
    
    .banner-text {
        /* 文字左边，占据剩余空间 */
        flex: 1;
        text-align: left;
    }
    
    .banner-elements {
        /* logo和按钮垂直排列在右边，靠近上方 */
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        flex-shrink: 0;
    }
    
    .banner-main-title {
        font-size: 28px;
    }
    
    .banner-title {
        font-size: 14px;
    }
    
    .banner-subtitle {
        font-size: 12px;
    }
    
    .telegram-icon {
        width: 50px;
        height: 50px;
    }
    
    .telegram-arrow {
        font-size: 18px;
    }
    
    .join-telegram-btn {
        padding: 6px 12px;
        font-size: 11px;
        white-space: nowrap;
    }
}

@media (max-width: 480px) {
    .partnership-banner {
        padding: 35px 25px;
        border-radius: 15px;
    }
    
    .banner-content {
        gap: 15px;
    }
    
    .banner-main-title {
        font-size: 24px;
        line-height: 1.2;
    }
    
    .banner-title {
        font-size: 13px;
    }
    
    .banner-subtitle {
        font-size: 11px;
    }
    
    .telegram-icon {
        width: 45px;
        height: 45px;
    }
    
    .telegram-arrow {
        font-size: 16px;
    }
    
    .join-telegram-btn {
        padding: 5px 10px;
        font-size: 10px;
    }
    
    .banner-elements {
        gap: 10px;
    }
}

/* 超小屏幕适配 */
@media (max-width: 360px) {
    .partnership-banner {
        padding: 20px 12px;
    }
    
    .banner-content {
        gap: 12px;
    }
    
    .banner-main-title {
        font-size: 20px;
    }
    
    .banner-title {
        font-size: 12px;
    }
    
    .banner-subtitle {
        font-size: 10px;
    }
    
    .telegram-icon {
        width: 40px;
        height: 40px;
    }
    
    .telegram-arrow {
        font-size: 14px;
    }
    
    .join-telegram-btn {
        padding: 4px 8px;
        font-size: 9px;
    }
}

/* ===== 用户截图版本的Partners样式 ===== */
.partners {
    padding: 60px 0;
    background: #f5f5f5;
}

.partners .section-title {
    font-size: 32px;
    font-weight: 800;
    color: #fac963;
    text-align: center;
    margin-bottom: 10px;
}

.partners .section-description {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 40px;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    max-width: 2800px; /* 与主要设置保持一致 */
    margin: 0 auto;
    gap: 50px;
}

.partner-card {
    background: white;
    border-radius: 16px;
    padding: 30px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
    width: 100%;
    max-width: 350px;
}

/* Logo区域 */
.brand-container {
    margin-bottom: 20px;
}

.brand-logo-text {
    background: #f0f0f0;
    color: #999;
    padding: 40px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
}

/* Sign up Free 按钮 */
.signup-free-btn {
    background: linear-gradient(135deg, #ff6b35, #f7931e);
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    margin: 20px 0;
    display: inline-block;
}

/* 合作伙伴名称 */
.partner-name {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin: 20px 0;
}

/* CLAIM NOW 按钮 */
.claim-now-btn {
    background: #28a745;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    margin: 20px 0;
    transition: all 0.3s ease;
}

.claim-now-btn:hover {
    background: #218838;
    transform: translateY(-2px);
}

/* 奖金信息 */
.bonus-info {
    margin-top: 20px;
}

.bonus-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.bonus-row:last-child {
    border-bottom: none;
}

.bonus-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.bonus-amount {
    font-size: 16px;
    color: #fac963;
    font-weight: 700;
}

/* 手机端响应式 */
@media (max-width: 768px) {
    .partners {
        padding: 40px 0;
    }
    
    .partner-card {
        margin: 0 16px;
        padding: 25px 16px;
    }
    
    .brand-logo-text {
        padding: 30px 15px;
        font-size: 12px;
    }
    
    .partner-name {
        font-size: 20px;
    }
    
    .signup-free-btn {
        font-size: 13px;
        padding: 8px 16px;
    }
    
    .claim-now-btn {
        font-size: 14px;
        padding: 10px 25px;
    }
}

/* ===== 优化后的Partners样式 ===== */
.partners {
    padding: 60px 0;
    background: #f5f5f5;
}

.partners .section-title {
    font-size: 32px;
    font-weight: 800;
    color: #fac963;
    text-align: center;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(250, 201, 99, 0.3);
}

.partners .section-description {
    font-size: 16px;
    color: #666;
    text-align: center;
    margin-bottom: 40px;
}

/* 响应式网格：电脑版2列，手机版1列 */
.partners-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

.partner-card {
    background: white;
    border-radius: 16px;
    padding: 25px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
    width: 100%;
    transition: all 0.3s ease;
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

/* Logo区域 - 减少间距 */
.brand-container {
    margin-bottom: 2px;
}

.brand-logo-text {
    background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
    color: #999;
    padding: 30px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* Sign up Free 按钮 - 更长更好看的设计 */
.signup-free-btn {
    background: linear-gradient(135deg, #ff6b35, #f7931e, #ffb347);
    color: white;
    padding: 12px 50px; /* 增加左右内边距，让按钮更长 */
    border-radius: 30px; /* 更圆润的边角 */
    font-size: 15px; /* 字体稍大 */
    font-weight: 800; /* 更粗的字体 */
    margin: 8px 0; /* 增加垂直间距 */
    display: inline-block;
    box-shadow: 
        0 6px 20px rgba(255, 107, 53, 0.4),
        0 0 30px rgba(255, 107, 53, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3); /* 内部高光 */
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 增强文字阴影 */
    animation: glowPulse 2s ease-in-out infinite alternate;
    letter-spacing: 1px; /* 字母间距 */
    text-transform: uppercase; /* 大写 */
    transition: all 0.3s ease; /* 过渡动画 */
    cursor: pointer; /* 鼠标指针 */
    min-width: 220px; /* 最小宽度确保长度 */
}

@keyframes glowPulse {
    0% { 
        box-shadow: 
            0 4px 15px rgba(255, 107, 53, 0.4),
            0 0 20px rgba(255, 107, 53, 0.2);
    }
    100% { 
        box-shadow: 
            0 6px 20px rgba(255, 107, 53, 0.6),
            0 0 30px rgba(255, 107, 53, 0.4);
    }
}

/* 合作伙伴名称 - 漂亮的渐变发光，减少间距 */
.partner-name {
    font-size: 22px;
    font-weight: 800;
    background: linear-gradient(135deg, #333, #555, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 5px 0; /* 大幅减少上下间距 */
    text-shadow: 0 0 10px rgba(51, 51, 51, 0.3);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* CLAIM NOW 按钮 - 漂亮的渐变发光，减少间距 */
.claim-now-btn {
    background: linear-gradient(135deg, #28a745, #20c997, #17a2b8);
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin: 5px 0 12px 0; /* 减少上边距，增加下边距用于和bonus info分隔 */
    transition: all 0.3s ease;
    box-shadow: 
        0 4px 15px rgba(40, 167, 69, 0.4),
        0 0 20px rgba(40, 167, 69, 0.2);
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.claim-now-btn:hover {
    background: linear-gradient(135deg, #218838, #1e7e34, #155724);
    transform: translateY(-2px);
    box-shadow: 
        0 6px 20px rgba(40, 167, 69, 0.6),
        0 0 30px rgba(40, 167, 69, 0.4);
}

/* 奖金信息 - 减少间距 */
.bonus-info {
    margin-top: 15px;
}

.bonus-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #eee;
}

.bonus-row:last-child {
    border-bottom: none;
}

/* Welcome Bonus 字体稍大一点 */
.bonus-label {
    font-size: 15px;
    color: #666;
    font-weight: 600;
}

/* 288% 字体更大更粗 */
.bonus-amount {
    font-size: 20px;
    color: #fac963;
    font-weight: 900;
    text-shadow: 0 0 8px rgba(250, 201, 99, 0.3);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1));
}

/* 手机端响应式：1列布局 */
@media (max-width: 768px) {
    .partners {
        padding: 40px 0;
    }
    
    .partners-grid {
        grid-template-columns: 1fr; /* 手机版1列 */
        gap: 25px;
        max-width: 350px;
        padding: 0 16px;
    }
    
    .partner-card {
        padding: 20px 16px;
    }
    
    .brand-logo-text {
        padding: 25px 15px;
        font-size: 12px;
    }
    
    .partner-name {
        font-size: 20px;
    }
    
    .signup-free-btn {
        font-size: 12px;
        padding: 7px 15px;
    }
    
    .claim-now-btn {
        font-size: 14px;
        padding: 9px 22px;
    }
    
    .bonus-label {
        font-size: 14px;
    }
    
    .bonus-amount {
        font-size: 18px;
    }
}

/* 小屏幕进一步优化 */
@media (max-width: 480px) {
    .partners-grid {
        max-width: 320px;
        gap: 20px;
    }
    
    .partner-card {
        padding: 18px 14px;
    }
}

/* ===== 新的顶部区域布局 - 只包含Logo ===== */
.top-section {
    /* Flexbox布局 - 影响：Logo居中显示 */
    display: flex;
    
    /* 居中对齐 - 影响：Logo在水平方向居中 */
    justify-content: center;
    
    /* 垂直居中对齐 - 影响：Logo在垂直方向上居中对齐 */
    align-items: center;
    
    /* 底部外边距10px - 影响：顶部区域与下方Sign up Free按钮的距离 */
    margin-bottom: 10px;
}

/* Logo区域 - 进一步增加宽度 */
.brand-container {
    /* Flex比例1.5（从1增加） - 影响：Logo区域占用更多空间，相对Claim Now按钮更宽 */
    flex: 1.5;
    
    /* 底部外边距0px - 影响：Logo区域与下方元素紧密贴合 */
    margin-bottom: 0;
}

.brand-logo-text {
    /* 渐变背景（浅灰到深灰） - 影响：占位符文字的视觉层次和现代感 */
    background: linear-gradient(135deg, #f0f0f0, #e8e8e8);
    
    /* 中灰色文字 - 影响：占位符文字的可见性，不会过于突出 */
    color: #999;
    
    /* 内边距20px 40px（进一步增加宽度） - 影响：LOGO文字与边框的间距，让区域看起来更宽大 */
    padding: 20px 40px;
    
    /* 圆角12px（从8px增加） - 影响：Logo占位符的现代化外观 */
    border-radius: 12px;
    
    /* 字体大小12px - 影响：占位符文字的可读性 */
    font-size: 12px;
    
    /* 字体加粗600 - 影响：占位符文字的视觉权重 */
    font-weight: 600;
    
    /* 字母间距1px - 影响：文字的美观度和专业感 */
    letter-spacing: 1px;
    
    /* 内阴影效果 - 影响：凹陷感，增加视觉层次 */
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
}

/* Sign up Free 按钮 - 全新设计（去掉框） */
.signup-free-btn {
    background: linear-gradient(135deg, #ff6b35, #ff8c42, #ffa726);
    color: white;
    padding: 8px 0;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 800;
    margin: 8px 0;
    display: block;
    text-align: center;
    position: relative;
    overflow: hidden;
    border: none;
    box-shadow: 
        0 4px 15px rgba(255, 107, 53, 0.3),
        0 0 20px rgba(255, 107, 53, 0.1);
    text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Sign up Free按钮悬停效果 */
.signup-free-btn:hover {
    /* 向上移动2px - 影响：悬停时的浮起效果，提供交互反馈 */
    transform: translateY(-2px);
    
    /* 悬停时阴影增强 - 影响：更强的立体感和发光效果 */
    box-shadow: 
        0 6px 20px rgba(255, 107, 53, 0.4),
        0 0 30px rgba(255, 107, 53, 0.2);
}

/* Sign up Free按钮光扫过动画伪元素 */
.signup-free-btn::before {
    /* 创建空的伪元素 */
    content: '';
    
    /* 绝对定位相对于按钮 - 影响：光扫过效果的定位基准 */
    position: absolute;
    
    /* 伪元素垂直位置覆盖整个按钮 - 影响：光条的垂直范围 */
    top: 0;
    
    /* 初始位置在按钮左侧外部 - 影响：光扫过动画的起始位置 */
    left: -100%;
    
    /* 伪元素尺寸与按钮相同 - 影响：光条的大小 */
    width: 100%;
    height: 100%;
    
    /* 水平渐变光条效果 - 影响：从透明到半透明白色再到透明的光扫过效果 */
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    
    /* 位置过渡动画0.6秒 - 影响：光扫过的速度 */
    transition: left 0.6s;
}

/* 悬停时触发光扫过动画 */
.signup-free-btn:hover::before {
    /* 光条移动到按钮右侧外部 - 影响：完成从左到右的光扫过效果 */
    left: 100%;
}

/* ===== 新的3列奖金布局 - 优化对齐 ===== */
.bonus-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0; /* 改为0，让线条无缝连接 */
    margin-top: 10px; /* 用户改为10px */
    padding: 20px 0; /* 用户改为20px */
    border-top: 1px solid #eee;
    /* 相对定位 - 影响：为竖线的绝对定位提供参考 */
    position: relative;
}

/* 使用伪元素创建连接的竖线 - 影响：竖线从顶部横线开始延伸到底部 */
.bonus-info-grid::before,
.bonus-info-grid::after {
    content: '';
    position: absolute;
    top: 0; /* 从最顶部开始 */
    bottom: 0; /* 到最底部结束 */
    width: 1px;
    background: #eee;
}

/* 第一条竖线（33.33%位置）- 影响：在第一列和第二列之间 */
.bonus-info-grid::before {
    left: 33.33%;
}

/* 第二条竖线（66.66%位置）- 影响：在第二列和第三列之间 */
.bonus-info-grid::after {
    left: 66.66%;
}

.bonus-column {
    text-align: center;
    padding: 5px 10px; /* 增加左右内边距 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start; /* 改为flex-start，让内容靠上对齐 */
    /* 相对定位 - 影响：为内容的微调提供参考 */
    position: relative;
}

/* 移除原来的右边框，因为我们用伪元素替代了 */
/* .bonus-column:not(:last-child) {
    border-right: 1px solid #eee; 
} 整个规则注释掉 */

/* 奖金标签 - 更大字体，向上提高位置 */
.bonus-column .bonus-label {
    font-size: 14px;
    color: #666;
    font-weight: 700;
    margin-bottom: 5px; /* 从10px减少到5px - 影响：标签和数字更紧密 */
    margin-top: 0px; /* 新增负上边距 - 影响：标签向上移动5px */
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* 奖金数字 - 减小字体并保持黑色轮廓 */
.bonus-column .bonus-amount {
    font-size: 22px; /* 从28px减小到22px - 影响：数字更小更合适 */
    color: #fac963;
    font-weight: 900;
    text-shadow: 
        0 0 15px rgba(250, 201, 99, 0.6),
        0 2px 4px rgba(0,0,0,0.3),
        /* 黑色轮廓效果 */
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        -2px 0 0 #000,
        2px 0 0 #000,
        0 -2px 0 #000,
        0 2px 0 #000;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2));
    animation: numberGlow 2s ease-in-out infinite alternate;
    line-height: 1;
    display: block;
    text-align: center;
}

/* Spin & Win简化样式 - 只调整必要的大小，保持与其他数字一致 */
.bonus-column:nth-child(3) .bonus-amount {
    /* 稍小的字体 - 影响：适合文字而不是数字的大小 */
    font-size: 25px !important;
    
    /* 保持与其他数字相同的颜色、粗细、阴影等所有样式 */
    /* 其他样式继承自 .bonus-column .bonus-amount */
}

/* 奖金数字发光呼吸动画 - 增强视觉吸引力 */
@keyframes numberGlow {
    /* 动画起始状态 - 影响：数字的默认发光强度 */
    0% { 
        text-shadow: 
            /* 基础金色发光效果 - 影响：数字的基本发光光晕 */
            0 0 15px rgba(250, 201, 99, 0.6),
            /* 基础立体阴影 - 影响：数字的深度感 */
            0 2px 4px rgba(0,0,0,0.3),
            /* 8方向黑色轮廓（基础强度） - 影响：数字在任何背景上的可读性 */
            -1px -1px 0 #000,  /* 左上 */
            1px -1px 0 #000,   /* 右上 */
            -1px 1px 0 #000,   /* 左下 */
            1px 1px 0 #000,    /* 右下 */
            -2px 0 0 #000,     /* 左 */
            2px 0 0 #000,      /* 右 */
            0 -2px 0 #000,     /* 上 */
            0 2px 0 #000;      /* 下 */
    }
    
    /* 动画结束状态 - 影响：数字发光的峰值效果 */
    100% { 
        text-shadow: 
            /* 增强金色发光效果 - 影响：更强烈的发光光晕，吸引用户注意数字 */
            0 0 25px rgba(250, 201, 99, 0.8),
            /* 增强立体阴影 - 影响：更强的数字深度感和立体效果 */
            0 3px 6px rgba(0,0,0,0.4),
            /* 8方向黑色轮廓（保持一致） - 影响：确保在动画过程中轮廓清晰度不变 */
            -1px -1px 0 #000,  /* 左上 */
            1px -1px 0 #000,   /* 右上 */
            -1px 1px 0 #000,   /* 左下 */
            1px 1px 0 #000,    /* 右下 */
            -2px 0 0 #000,     /* 左 */
            2px 0 0 #000,      /* 右 */
            0 -2px 0 #000,     /* 上 */
            0 2px 0 #000;      /* 下 */
    }
}

/* 手机端响应式调整 */
@media (max-width: 768px) {
    .top-section {
        gap: 10px;
        align-items: center; /* 手机端也保持居中 */
    }
    
    .brand-logo-text {
        padding: 12px 20px; /* 手机端适当的宽度 */
        font-size: 11px;
    }
    
    .signup-free-btn {
        padding: 6px 12px;
        font-size: 10px;
        border-radius: 15px;
    }
    
    .partner-name {
        font-size: 20px;
        margin: 10px 0 6px 0;
    }
    
    .bonus-info-grid {
        gap: 8px;
        padding: 12px 0;
    }
    
    .bonus-column .bonus-label {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .bonus-column .bonus-amount {
        font-size: 24px; /* 手机端也增大字体 */
        text-shadow: 
            0 0 12px rgba(250, 201, 99, 0.6),
            0 2px 4px rgba(0,0,0,0.3),
            /* 手机端黑色轮廓 */
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
    }
}

/* Sign up Free 按钮 - 缩小尺寸 */
.signup-free-btn {
    background: linear-gradient(145deg, #ff4757, #ff6b7a, #ff4757);
    background-size: 200% 200%;
    color: white;
    padding: 6px 12px; /* 从8px 16px缩小到6px 12px */
    border-radius: 18px; /* 从20px缩小到18px */
    font-size: 10px; /* 从12px缩小到10px */
    font-weight: 800;
    margin: 0;
    display: inline-block;
    flex-shrink: 0;
    align-self: center;
    position: relative;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
    box-shadow: 
        0 4px 15px rgba(255, 71, 87, 0.4),
        0 0 25px rgba(255, 71, 87, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    animation: signupGlow 3s ease-in-out infinite;
    letter-spacing: 0.3px; /* 从0.5px缩小 */
    text-transform: uppercase;
}

/* ===== 奖金布局 - 确保水平对齐 ===== */
.bonus-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 15px;
    padding: 15px 0;
    border-top: 1px solid #eee;
    align-items: end; /* 让所有列底部对齐 */
}

.bonus-column {
    text-align: center;
    padding: 5px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 标签和数字分别占据空间 */
    height: 80px; /* 固定高度确保对齐 */
}

/* .bonus-column:not(:last-child) {
    border-right: 1px solid #eee;
} 移除短线条 */

/* 奖金标签 - 固定在顶部位置 */
.bonus-column .bonus-label {
    font-size: 14px;
    color: #666;
    font-weight: 700;
    margin-bottom: auto; /* 自动间距，推到顶部 */
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    height: 40px; /* 固定高度确保标签对齐 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 奖金数字 - 固定在底部位置 */
.bonus-column .bonus-amount {
    font-size: 28px;
    color: #fac963;
    font-weight: 900;
    text-shadow: 
        0 0 15px rgba(250, 201, 99, 0.6),
        0 2px 4px rgba(0,0,0,0.3),
        /* 黑色轮廓效果 */
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        -2px 0 0 #000,
        2px 0 0 #000,
        0 -2px 0 #000,
        0 2px 0 #000;
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2));
    animation: numberGlow 2s ease-in-out infinite alternate;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px; /* 固定高度确保数字对齐 */
    margin-top: auto; /* 推到底部 */
}

/* 手机端响应式调整 */
@media (max-width: 768px) {
    .top-section {
        gap: 10px;
        align-items: center;
    }
    
    .brand-logo-text {
        padding: 12px 20px;
        font-size: 11px;
    }
    
    .signup-free-btn {
        padding: 5px 10px; /* 手机端进一步缩小 */
        font-size: 9px; /* 手机端更小字体 */
        border-radius: 15px;
        letter-spacing: 0.2px;
    }
    
    .partner-name {
        font-size: 20px;
        margin: 10px 0 6px 0;
    }
    
    .bonus-info-grid {
        gap: 8px;
        padding: 12px 0;
    }
    
    .bonus-column {
        height: 70px; /* 手机端稍微缩小高度 */
    }
    
    .bonus-column .bonus-label {
        font-size: 12px;
        height: 35px; /* 手机端标签区域高度 */
    }
    
    .bonus-column .bonus-amount {
        font-size: 24px;
        height: 35px; /* 手机端数字区域高度 */
        text-shadow: 
            0 0 12px rgba(250, 201, 99, 0.6),
            0 2px 4px rgba(0,0,0,0.3),
            /* 手机端黑色轮廓 */
            -1px -1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            1px 1px 0 #000;
    }
}

/* ===== PNG Logo 图片样式（确保图片正确显示） ===== */
.brand-logo-img {
    /* 图片宽度占满容器 - 影响：Logo在brand-container中完全填充 */
    width: 100% !important;
    
    /* 电脑版图片高度100px（进一步增大） - 影响：Logo显示更大更突出 */
    height: 100px !important;
    
    /* 保持图片比例，完整显示在容器内 - 影响：Logo不会变形，保持原始比例 */
    object-fit: contain !important;
    
    /* 圆角12px（从8px增加） - 影响：Logo边角更圆润，现代化外观 */
    border-radius: 12px;
    
    /* 纯白色背景 - 影响：为Logo提供纯白背景，让图片更清晰突出 */
    background: black !important;
    
    /* 内边距22px（配合更大Logo） - 影响：Logo与边框的间距，让Logo在框内有呼吸空间 */
    padding: 22px !important;
    
    /* 确保图片显示 - 影响：强制显示图片元素 */
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    
    /* 移除阴影效果 - 影响：Logo完全融入背景，无立体感干扰 */
    /* box-shadow: none; (已移除) */
}

/* ===== Logo备用文字样式 ===== */
.logo-fallback {
    /* 备用Logo文字样式 - 影响：当图片加载失败时显示的文字Logo */
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: #333;
    font-size: 16px;
    font-weight: 700;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== 顶部 Claim Now 按钮 - 全新设计 ===== */
.claim-now-btn-top {
    /* 绿色渐变背景（深到浅到深） - 影响：按钮的视觉吸引力和品牌色彩 */
    background: linear-gradient(135deg, #4CAF50, #45a049, #2e7d32);
    
    /* 白色文字 - 影响：与绿色背景形成高对比度，确保可读性 */
    color: white;
    
    /* 内边距10px 20px - 影响：按钮的点击区域大小和视觉重量 */
    padding: 10px 20px;
    
    /* 圆角30px - 影响：现代化的胶囊形状，友好的视觉效果 */
    border-radius: 30px;
    
    /* 字体大小8px（用户调整后） - 影响：按钮文字的可读性，适配紧凑布局 */
    font-size: 8px;
    
    /* 向上移动8px - 影响：按钮位置相对于Logo更高一些 */
    transform: translateY(-8px);
    
    /* 字体粗细900 - 影响：文字的视觉权重，增强按钮的重要性 */
    font-weight: 900;
    
    /* 移除默认边框 - 影响：保持按钮的纯净外观 */
    border: none;
    
    /* 鼠标指针 - 影响：用户交互提示 */
    cursor: pointer;
    
    /* 行内块元素 - 影响：按钮与其他元素的排列方式 */
    display: inline-block;
    
    /* 不收缩 - 影响：在Flex布局中保持按钮的最小尺寸 */
    flex-shrink: 0;
    
    /* 垂直居中对齐 - 影响：在top-section中与Logo垂直对齐 */
    align-self: center;
    
    /* 相对定位 - 影响：为伪元素动画提供定位参考 */
    position: relative;
    
    /* 隐藏溢出内容 - 影响：确保动画效果不会超出按钮边界 */
    overflow: hidden;
    
    /* 阴影效果 - 影响：按钮的立体感和视觉层次 */
    box-shadow: 
        0 5px 15px rgba(76, 175, 80, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
    /* 文字阴影 - 影响：文字的立体感和可读性 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    
    /* 字母间距1.2px - 影响：文字的视觉密度和专业感 */
    letter-spacing: 1.2px;
    
    /* 大写文字 - 影响：按钮文字的正式感和重要性 */
    text-transform: uppercase;
    
    /* 过渡动画0.3秒 - 影响：悬停效果的平滑性 */
    transition: all 0.3s ease;
    
    /* 最小宽度80px（用户调整后） - 影响：按钮的最小尺寸，保持一致性 */
    min-width: 80px;
}

/* Claim Now按钮悬停效果 */
.claim-now-btn-top:hover {
    /* 向上移动3px并放大1.05倍 - 影响：悬停时的浮起和放大效果，增强交互反馈 */
    transform: translateY(-3px) scale(1.05);
    
    /* 悬停时的阴影增强 - 影响：更强烈的立体感和悬浮效果 */
    box-shadow: 
        0 8px 25px rgba(76, 175, 80, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Claim Now按钮内部发光动画伪元素 */
.claim-now-btn-top::after {
    /* 创建空的伪元素 */
    content: '';
    
    /* 绝对定位相对于按钮 - 影响：动画效果的定位基准 */
    position: absolute;
    
    /* 伪元素起始位置（超出按钮范围） - 影响：动画的起始状态，从按钮外部开始 */
    top: -50%;
    left: -50%;
    
    /* 伪元素尺寸（2倍按钮大小） - 影响：确保动画覆盖整个按钮区域 */
    width: 200%;
    height: 200%;
    
    /* 径向渐变发光效果 - 影响：从中心向外的白色发光效果 */
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    
    /* 初始缩放为0（隐藏） - 影响：动画的初始状态，伪元素不可见 */
    transform: scale(0);
    
    /* 缩放过渡动画0.6秒 - 影响：发光效果的出现速度 */
    transition: transform 0.6s ease;
}

/* 悬停时触发发光动画 */
.claim-now-btn-top:hover::after {
    /* 缩放到正常大小（显示） - 影响：悬停时发光效果的出现 */
    transform: scale(1);
}

/* ===== 底部 Claim Now 按钮 - 位于Sign up Free下方 ===== */
.claim-now-btn-bottom {
    /* 绿色渐变背景（与顶部按钮相同） - 影响：保持一致的视觉设计 */
    background: linear-gradient(135deg, #4CAF50, #45a049, #2e7d32);
    
    /* 白色文字 - 影响：与绿色背景形成高对比度，确保可读性 */
    color: white;
    
    /* 内边距12px 24px - 影响：稍大的按钮，更适合独立显示 */
    padding: 12px 24px;
    
    /* 圆角12px - 影响：现代化的外观，稍微方一些的设计 */
    border-radius: 12px;
    
    /* 字体大小12px - 影响：更清晰的可读性 */
    font-size: 12px;
    
    /* 字体粗细700 - 影响：醒目但不过于厚重 */
    font-weight: 700;
    
    /* 移除默认边框 - 影响：保持按钮的纯净外观 */
    border: none;
    
    /* 鼠标指针 - 影响：用户交互提示 */
    cursor: pointer;
    
    /* 块级元素并居中 - 影响：按钮占满宽度并居中 */
    display: block;
    width: 100%;
    text-align: center;
    
    /* 上边距8px - 影响：与Sign up Free按钮的距离 */
    margin-top: 8px;
    
    /* 相对定位 - 影响：为伪元素动画提供定位参考 */
    position: relative;
    
    /* 隐藏溢出内容 - 影响：确保动画效果不会超出按钮边界 */
    overflow: hidden;
    
    /* 阴影效果 - 影响：按钮的立体感和视觉层次 */
    box-shadow: 
        0 4px 12px rgba(76, 175, 80, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    
    /* 文字阴影 - 影响：文字的立体感和可读性 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    
    /* 字母间距1px - 影响：文字的视觉密度和专业感 */
    letter-spacing: 1px;
    
    /* 大写文字 - 影响：按钮文字的正式感和重要性 */
    text-transform: uppercase;
    
    /* 过渡动画0.3秒 - 影响：悬停效果的平滑性 */
    transition: all 0.3s ease;
}

/* Claim Now底部按钮悬停效果 */
.claim-now-btn-bottom:hover {
    /* 向上移动2px并稍微放大 - 影响：悬停时的浮起效果，增强交互反馈 */
    transform: translateY(-2px) scale(1.02);
    
    /* 悬停时的阴影增强 - 影响：更强烈的立体感和悬浮效果 */
    box-shadow: 
        0 6px 18px rgba(76, 175, 80, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Claim Now底部按钮内部发光动画伪元素 */
.claim-now-btn-bottom::after {
    /* 创建空的伪元素 */
    content: '';
    
    /* 绝对定位相对于按钮 - 影响：动画效果的定位基准 */
    position: absolute;
    
    /* 伪元素起始位置（超出按钮范围） - 影响：动画的起始状态，从按钮外部开始 */
    top: -50%;
    left: -50%;
    
    /* 伪元素尺寸（2倍按钮大小） - 影响：确保动画覆盖整个按钮区域 */
    width: 200%;
    height: 200%;
    
    /* 径向渐变发光效果 - 影响：从中心向外的白色发光效果 */
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    
    /* 初始缩放为0（隐藏） - 影响：动画的初始状态，伪元素不可见 */
    transform: scale(0);
    
    /* 缩放过渡动画0.6秒 - 影响：发光效果的出现速度 */
    transition: transform 0.6s ease;
}

/* 悬停时触发底部按钮发光动画 */
.claim-now-btn-bottom:hover::after {
    /* 缩放到正常大小（显示） - 影响：悬停时发光效果的出现 */
    transform: scale(1);
}

/* ===== 用户评论系统样式 ===== */

/* 评论表单容器 */
.comment-form-section {
    /* 背景色 - 影响：表单区域的视觉分离 */
    background: var(--bg-dark);
    
    /* 内边距 - 影响：表单内容与边界的距离 */
    padding: 30px 20px;
    
    /* 上边距 - 影响：与上方内容的间距 */
    margin-top: 40px;
    
    /* 圆角 - 影响：现代化的外观 */
    border-radius: 16px;
    
    /* 边框 - 影响：表单区域的边界定义 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* 动画过渡 - 影响：显示/隐藏的平滑效果 */
    transition: all 0.3s ease;
}

.comment-form-container {
    /* 最大宽度 - 影响：表单在大屏幕上的宽度限制 */
    max-width: 600px;
    
    /* 居中对齐 - 影响：表单在容器中的位置 */
    margin: 0 auto;
}

.form-title {
    /* 字体大小 - 影响：标题的视觉重要性 */
    font-size: 24px;
    
    /* 字体粗细 - 影响：标题的视觉权重 */
    font-weight: 700;
    
    /* 文字颜色 - 影响：标题的可见性 */
    color: var(--text-white);
    
    /* 底部边距 - 影响：标题与表单的间距 */
    margin-bottom: 25px;
    
    /* 文字居中 - 影响：标题的对齐方式 */
    text-align: center;
}

.form-group {
    /* 底部边距 - 影响：表单字段之间的间距 */
    margin-bottom: 20px;
}

.form-group label {
    /* 块级元素 - 影响：标签独占一行 */
    display: block;
    
    /* 字体粗细 - 影响：标签的视觉权重 */
    font-weight: 600;
    
    /* 文字颜色 - 影响：标签的可见性 */
    color: var(--text-white);
    
    /* 底部边距 - 影响：标签与输入框的间距 */
    margin-bottom: 8px;
    
    /* 字体大小 - 影响：标签的可读性 */
    font-size: 14px;
}

.form-group input[type="text"],
.form-group select,
.form-group textarea {
    /* 宽度 - 影响：输入框占满容器宽度 */
    width: 100%;
    
    /* 内边距 - 影响：输入框内容与边界的距离 */
    padding: 12px 16px;
    
    /* 背景色 - 影响：输入框的背景 - 修改为深色背景 */
    background: var(--bg-card);
    
    /* 边框 - 影响：输入框的边界 */
    border: 1px solid var(--border-gray);
    
    /* 圆角 - 影响：输入框的外观 */
    border-radius: 8px;
    
    /* 文字颜色 - 影响：输入内容的可见性 - 确保文字为白色 */
    color: var(--text-white);
    
    /* 字体大小 - 影响：输入内容的可读性 */
    font-size: 14px;
    
    /* 过渡效果 - 影响：焦点状态的平滑变化 */
    transition: all 0.3s ease;
    
    /* 盒模型 - 影响：宽度计算方式 */
    box-sizing: border-box;
}

/* 专门为select下拉菜单添加样式 */
.form-group select {
    /* 背景色 - 确保select有深色背景 */
    background-color: #1a1a1a !important;
    
    /* 文字颜色 - 确保文字为白色 */
    color: #ffffff !important;
    
    /* 边框颜色 */
    border-color: #333333;
    
    /* 下拉箭头颜色 */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3e%3cpath d='m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z'/%3e%3c/svg%3e");
    
    /* 背景位置和大小 */
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    
    /* 隐藏默认箭头 */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* select的option样式 */
.form-group select option {
    /* option背景色 */
    background-color: #1a1a1a !important;
    
    /* option文字颜色 */
    color: #ffffff !important;
    
    /* option内边距 */
    padding: 8px 12px;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    /* 移除默认轮廓 - 影响：自定义焦点样式 */
    outline: none;
    
    /* 焦点边框 - 影响：焦点状态的视觉反馈 */
    border-color: var(--primary);
    
    /* 焦点阴影 - 影响：焦点状态的发光效果 */
    box-shadow: 0 0 0 3px rgba(250, 201, 99, 0.2);
}

/* 星级评分样式 */
.rating-input {
    /* Flex布局 - 影响：星星的排列方式 */
    display: flex;
    
    /* 反向排列 - 影响：星星从右到左排列（便于CSS选择器） */
    flex-direction: row-reverse;
    
    /* 居中对齐 - 影响：星星的对齐方式 */
    justify-content: center;
    
    /* 元素间距 - 影响：星星之间的距离 */
    gap: 5px;
}

.rating-input input[type="radio"] {
    /* 隐藏原生单选框 - 影响：使用自定义星星样式 */
    display: none;
}

.rating-input label {
    /* 字体大小 - 影响：星星的大小 */
    font-size: 24px;
    
    /* 文字颜色 - 影响：未选中星星的颜色 */
    color: rgba(255, 255, 255, 0.3);
    
    /* 鼠标指针 - 影响：用户交互提示 */
    cursor: pointer;
    
    /* 过渡效果 - 影响：颜色变化的平滑性 */
    transition: color 0.2s ease;
    
    /* 底部边距重置 - 影响：覆盖默认标签样式 */
    margin-bottom: 0;
}

.rating-input label:hover,
.rating-input label:hover ~ label {
    /* 悬停颜色 - 影响：悬停时星星的颜色 */
    color: #fac963;
}

.rating-input input[type="radio"]:checked ~ label {
    /* 选中颜色 - 影响：选中星星的颜色 */
    color: #fac963;
}

/* 字符计数器 */
.char-counter {
    /* 字体大小 - 影响：计数器的大小 */
    font-size: 12px;
    
    /* 文字颜色 - 影响：计数器的可见性 */
    color: rgba(255, 255, 255, 0.6);
    
    /* 文字对齐 - 影响：计数器的位置 */
    text-align: right;
    
    /* 上边距 - 影响：计数器与文本框的距离 */
    margin-top: 5px;
}

/* 表单操作按钮 */
.form-actions {
    /* Flex布局 - 影响：按钮的排列方式 */
    display: flex;
    
    /* 元素间距 - 影响：按钮之间的距离 */
    gap: 15px;
    
    /* 右对齐 - 影响：按钮的位置 */
    justify-content: flex-end;
    
    /* 上边距 - 影响：按钮组与上方内容的距离 */
    margin-top: 25px;
}

.btn-cancel,
.btn-submit {
    /* 内边距 - 影响：按钮的大小 */
    padding: 12px 24px;
    
    /* 移除边框 - 影响：按钮的纯净外观 */
    border: none;
    
    /* 圆角 - 影响：按钮的外观 */
    border-radius: 8px;
    
    /* 字体粗细 - 影响：按钮文字的权重 */
    font-weight: 600;
    
    /* 鼠标指针 - 影响：用户交互提示 */
    cursor: pointer;
    
    /* 过渡效果 - 影响：悬停状态的平滑变化 */
    transition: all 0.3s ease;
    
    /* 字体大小 - 影响：按钮文字的可读性 */
    font-size: 14px;
}

.btn-cancel {
    /* 背景色 - 影响：取消按钮的颜色 */
    background: rgba(255, 255, 255, 0.1);
    
    /* 文字颜色 - 影响：取消按钮文字的颜色 */
    color: var(--text-white);
}

.btn-cancel:hover {
    /* 悬停背景 - 影响：取消按钮悬停时的颜色 */
    background: rgba(255, 255, 255, 0.2);
}

.btn-submit {
    /* 背景色 - 影响：提交按钮的颜色 */
    background: var(--primary);
    
    /* 文字颜色 - 影响：提交按钮文字的颜色 */
    color: #000;
}

.btn-submit:hover {
    /* 悬停背景 - 影响：提交按钮悬停时的颜色 */
    background: #e6b84d;
    
    /* 悬停变换 - 影响：提交按钮悬停时的效果 */
    transform: translateY(-2px);
}

/* 用户评论显示区域 */
.user-comments-section {
    /* 上边距 - 影响：与上方内容的距离 */
    margin-top: 40px;
}

.section-subtitle {
    /* 字体大小 - 影响：副标题的大小 */
    font-size: 20px;
    
    /* 字体粗细 - 影响：副标题的权重 */
    font-weight: 600;
    
    /* 文字颜色 - 影响：副标题的可见性 */
    color: var(--text-white);
    
    /* 底部边距 - 影响：副标题与评论的距离 */
    margin-bottom: 20px;
    
    /* 文字居中 - 影响：副标题的对齐方式 */
    text-align: center;
}

.user-comments-container {
    /* 网格布局 - 影响：评论卡片的排列 */
    display: grid;
    
    /* 网格列数 - 影响：每行显示的评论数量 */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    
    /* 网格间距 - 影响：评论卡片之间的距离 */
    gap: 20px;
    
    /* 最大高度 - 影响：评论容器的高度限制 */
    max-height: 600px;
    
    /* 滚动条 - 影响：超出高度时的滚动 */
    overflow-y: auto;
    
    /* 内边距 - 影响：容器内容与边界的距离 */
    padding: 20px;
    
    /* 背景色 - 影响：评论容器的背景 */
    background: rgba(255, 255, 255, 0.02);
    
    /* 圆角 - 影响：容器的外观 */
    border-radius: 12px;
}

/* 用户评论卡片 */
.user-comment-card {
    /* 背景色 - 影响：评论卡片的背景 */
    background: var(--bg-dark);
    
    /* 内边距 - 影响：卡片内容与边界的距离 */
    padding: 20px;
    
    /* 圆角 - 影响：卡片的外观 */
    border-radius: 12px;
    
    /* 边框 - 影响：卡片的边界 */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* 过渡效果 - 影响：悬停状态的平滑变化 */
    transition: all 0.3s ease;
}

.user-comment-card:hover {
    /* 悬停变换 - 影响：悬停时的浮起效果 */
    transform: translateY(-5px);
    
    /* 悬停阴影 - 影响：悬停时的阴影效果 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* 手机版适配 */
@media (max-width: 768px) {
    .comment-form-section {
        /* 手机版内边距 - 影响：在小屏幕上的紧凑布局 */
        padding: 20px 15px;
        
        /* 手机版上边距 - 影响：在小屏幕上的间距 */
        margin-top: 30px;
    }
    
    .form-title {
        /* 手机版字体大小 - 影响：在小屏幕上的可读性 */
        font-size: 20px;
    }
    
    .form-actions {
        /* 手机版按钮排列 - 影响：按钮在小屏幕上垂直排列 */
        flex-direction: column;
    }
    
    .btn-cancel,
    .btn-submit {
        /* 手机版按钮宽度 - 影响：按钮在小屏幕上占满宽度 */
        width: 100%;
    }
    
    .user-comments-container {
        /* 手机版网格 - 影响：在小屏幕上单列显示 */
        grid-template-columns: 1fr;
        
        /* 手机版最大高度 - 影响：在小屏幕上的高度限制 */
        max-height: 400px;
    }
}

/* Sign up Free 按钮 - 重新设计更紧凑好看版本 */
.signup-free-btn {
    /* 深橙色渐变背景 - 影响：现代感强的按钮颜色 */
    background: linear-gradient(135deg, #ff6b35, #ffa726, #ff7043);
    background-size: 200% 200%;
    
    /* 白色文字 - 影响：与橙色背景形成高对比度 */
    color: white;
    
    /* 紧凑的内边距8px 16px - 影响：按钮更精致，不会太胖 */
    padding: 8px 16px;
    
    /* 圆角20px - 影响：现代化胶囊形状，但不会太圆 */
    border-radius: 20px;
    
    /* 字体大小12px - 影响：适中的可读性 */
    font-size: 12px;
    
    /* 字体粗细700 - 影响：足够醒目但不会太重 */
    font-weight: 700;
    
    /* 外边距控制 - 影响：与其他元素的间距 */
    margin: 6px 0;
    
    /* 行内块显示 - 影响：按钮居中对齐 */
    display: inline-block;
    text-align: center;
    
    /* 边框和阴影效果 - 影响：按钮的立体感和发光效果 */
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 4px 12px rgba(255, 107, 53, 0.3),
        0 2px 6px rgba(255, 107, 53, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    
    /* 文字阴影 - 影响：文字的立体感 */
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
    
    /* 过渡动画 - 影响：hover时的平滑变化 */
    transition: all 0.3s ease;
    
    /* 文字间距 - 影响：字母间的视觉节奏 */
    letter-spacing: 0.5px;
    
    /* 文字转大写 - 影响：现代化的按钮风格 */
    text-transform: uppercase;
    
    /* 最大宽度限制 - 影响：防止按钮过宽 */
    max-width: 140px;
    
    /* 相对定位 - 影响：为伪元素做准备 */
    position: relative;
    overflow: hidden;
    text-align: center;
}

/* Sign up Free 按钮 hover 效果 */
.signup-free-btn:hover {
    /* Hover时更亮的渐变 - 影响：鼠标悬停时按钮更吸引眼球 */
    background: linear-gradient(135deg, #ff5722, #ffb74d, #ff6f00);
    
    /* 轻微向上移动 - 影响：创造按钮被"按下"的反馈感 */
    transform: translateY(-1px);
    
    /* 增强阴影效果 - 影响：hover时按钮更立体，有浮起的感觉 */
    box-shadow: 
        0 6px 16px rgba(255, 87, 34, 0.4),
        0 3px 8px rgba(255, 87, 34, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* 发光动画效果 */
.signup-free-btn::before {
    /* 伪元素基础设置 - 影响：创建动画光效的基础 */
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    
    /* 渐变光效 - 影响：从左到右的光线扫过效果 */
    background: linear-gradient(90deg, 
        transparent, 
        rgba(255, 255, 255, 0.3), 
        transparent);
    
    /* 过渡动画 - 影响：光效移动的平滑度 */
    transition: left 0.5s ease-in-out;
}

/* Hover时触发光效 */
.signup-free-btn:hover::before {
    /* 光效从左移动到右 - 影响：hover时的光线扫过动画 */
    left: 100%;
}

/* 奖金数字 - 进一步往下调整 */
.bonus-column .bonus-amount {
    /* 大字体28px - 影响：数字的视觉冲击力，是整个卡片的焦点 */
    font-size: 28px;
    
    /* 金黄色 - 影响：数字的品牌色彩，象征财富和价值 */
    color: #fac963;
    
    /* 超粗字体900 - 影响：数字的视觉权重，最大化吸引注意力 */
    font-weight: 900;
    
    /* 复合文字阴影效果 - 影响：数字的立体感、发光效果和可读性 */
    text-shadow: 
        /* 金色发光效果 */
        0 0 15px rgba(250, 201, 99, 0.6),
        /* 下方阴影增加立体感 */
        0 2px 4px rgba(0,0,0,0.3),
        /* 8方向黑色轮廓，确保在任何背景上都清晰可见 */
        -1px -1px 0 #000,  /* 左上 */
        1px -1px 0 #000,   /* 右上 */
        -1px 1px 0 #000,   /* 左下 */
        1px 1px 0 #000,    /* 右下 */
        -2px 0 0 #000,     /* 左 */
        2px 0 0 #000,      /* 右 */
        0 -2px 0 #000,     /* 上 */
        0 2px 0 #000;      /* 下 */
    
    /* CSS滤镜阴影 - 影响：额外的立体效果和层次感 */
    filter: drop-shadow(0 3px 6px rgba(0,0,0,0.2));
    
    /* 数字发光动画 - 影响：持续的视觉吸引效果，2秒循环 */
    animation: numberGlow 2s ease-in-out infinite alternate;
    
    /* 行高1 - 影响：紧凑的数字显示，减少不必要的垂直空间 */
    line-height: 1;
    
    /* Flexbox布局 - 影响：数字在容器中的精确定位 */
    display: flex;
    
    /* 底部对齐 - 影响：数字贴近底部显示，远离上方标签 */
    align-items: flex-end;
    
    /* 水平居中 - 影响：数字在列中居中显示 */
    justify-content: center;
    
    /* 固定高度55px - 影响：为数字提供足够的垂直空间，确保往下移动 */
    height: 55px;
    
    /* 顶部自动外边距 - 影响：在Flex容器中推向底部，与标签分离 */
    margin-top: auto;
    
    /* 底部内边距12px（进一步增加） - 影响：数字更往下移，与标签距离更远 */
    padding-bottom: 0px;
}

/* 调整奖金标签区域 - 给数字腾出更多空间 */
.bonus-column .bonus-label {
    /* 字体大小14px - 影响：标签文字的可读性，适中不会过于突出 */
    font-size: 14px;
    
    /* 深灰色文字 - 影响：标签的视觉层次，不抢夺数字的注意力 */
    color: #666;
    
    /* 字体粗细700 - 影响：标签文字的醒目程度，保持专业感 */
    font-weight: 700;
    
    /* 底部自动外边距 - 影响：在Flex容器中推向顶部，与数字形成对比位置 */
    margin-bottom: auto;
    
    /* 行高1.2 - 影响：文字的紧凑性，适合小尺寸显示 */
    line-height: 1.2;
    
    /* 大写文字 - 影响：标签的正式感和统一性 */
    text-transform: uppercase;
    
    /* 字母间距0.3px - 影响：文字的视觉密度和可读性 */
    letter-spacing: 0.3px;
    
    /* 固定高度25px - 影响：标签区域的垂直空间，为数字腾出更多空间 */
    height: 25px;
    
    /* Flexbox布局 - 影响：标签内容的居中对齐 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===== 奖金信息网格布局调整 ===== */
.bonus-info-grid {
    /* CSS Grid布局 - 影响：创建3列等宽的奖金信息布局 */
    display: grid;
    
    /* 3列等宽布局 - 影响：Welcome Bonus、Daily Cash Give Away、Daily Rollover Rebate各占1/3宽度 */
    grid-template-columns: 1fr 1fr 1fr;
    
    /* 列间距10px - 影响：3个奖金列之间的间距 */
    gap: 10px;
    
    /* 顶部外边距15px - 影响：奖金信息与上方Sign Up Free按钮的距离 */
    margin-top: 10px;
    
    /* 上下内边距15px - 影响：奖金信息区域的内部垂直空间 */
    padding: 20px 0;
    
    /* 顶部边框线 - 影响：奖金信息与上方内容的视觉分割 */
    border-top: 1px solid #eee;
    
    /* 网格项底部对齐 - 影响：确保所有奖金数字在底部水平对齐 */
    align-items: end;
}

.bonus-column {
    /* 文字居中对齐 - 影响：每列内容的水平居中显示 */
    text-align: center;
    
    /* 内边距5px - 影响：每列内容与边界的间距 */
    padding: 5px;
    
    /* Flexbox纵向布局 - 影响：标签和数字垂直排列 */
    display: flex;
    flex-direction: column;
    
    /* 上下分散对齐 - 影响：标签顶部对齐，数字底部对齐 */
    justify-content: space-between;
    
    /* 固定高度80px - 影响：确保所有列高度一致，实现完美对齐 */
    height: 80px;
}

/* 奖金列分割线（除最后一列外） - 已移除，使用伪元素长线条替代 */
/* .bonus-column:not(:last-child) {
    border-right: 1px solid #eee;
} 移除短线条 */

/* 手机端响应式调整 */
@media (max-width: 768px) {
    /* 手机版按钮样式调整 - 影响：按钮在手机上不会太宽 */
    .btn-primary {
        /* 手机版紧凑内边距 - 影响：按钮更精致，不会占用太多宽度 */
        padding: 18px 32px;
        
        /* 手机版字体稍小 - 影响：适合小屏幕的可读性 */
        font-size: 16px;
        
        /* 手机版最大宽度限制 - 影响：防止按钮过宽 */
        max-width: 480px;
    }
    
    .btn-primary.btn-large {
        /* 手机版大按钮内边距 - 影响：Hero按钮紧凑但仍然醒目 */
        padding: 18px 32px;
        
        /* 手机版大按钮字体 - 影响：保持重要按钮的可读性 */
        font-size: 16px;
        
        /* 手机版最大宽度限制 - 影响：防止Hero按钮过宽 */
        max-width: 480px;
        
        /* 手机版按钮居中 - 影响：在小屏幕上居中显示 */
        margin: 0 auto;
                  display: block;
      }
      
      /* 手机版专用：保持按钮与Swipe Down靠近 */
      .hero-buttons {
          /* 手机版底部间距更小 - 影响：在手机上按钮与Swipe Down更靠近 */
          margin-bottom: 10px;
      }
      
      .scroll-hint {
          /* 手机版上边距调整 - 影响：在手机上适度靠近按钮，不会太贴 */
          margin-top: 15px;
          
          /* 手机版更小的gap - 影响：图标与文字更紧凑 */
          gap: 8px;
      }
      
      /* 手机版专用：保持大按钮的当前大小 */
      .btn-primary.btn-large {
          /* 手机版保持当前大小 - 影响：手机版按钮维持用户调整的尺寸 */
          padding: 18px 32px !important;
          font-size: 16px !important;
          border-radius: 14px !important;
          max-width: 480px !important;
      }

            /* 手机版标题大小调整 */
      .partners .section-title {
          /* 手机版Partners标题稍小一些 - 影响：在小屏幕上更合适 */
          font-size: 32px !important;
          letter-spacing: 1px;
      }
      
      .withdrawals .section-title {
          /* 手机版Withdrawals标题保持较小 - 影响：在小屏幕上不占太多空间 */
          font-size: 20px !important;
          letter-spacing: 0.3px;
      }

      .top-section {
          gap: 10px;
          align-items: flex-start; /* 手机端也改为flex-start */
      }
    
    .brand-logo-text {
        padding: 12px 20px;
        font-size: 11px;
    }
    
    .signup-free-btn {
        padding: 3px 8px; /* 手机端进一步缩小 */
        font-size: 8px; /* 手机端更小字体 */
        border-radius: 12px;
        letter-spacing: 0.1px;
        margin-top: 3px; /* 手机端也往上提 */
    }
    
    .partner-name {
        font-size: 20px;
        margin: 10px 0 6px 0;
    }
    
    .bonus-info-grid {
        gap: 8px;
        padding: 12px 0;
    }
    
    .bonus-column {
        height: 70px;
    }
    
    .bonus-column .bonus-label {
        font-size: 12px;
        height: 30px; /* 手机端标签区域高度缩小 */
    }
    
    /* 手机版底部Claim Now按钮调整 - 影响：手机版按钮更紧凑 */
    .claim-now-btn-bottom {
        /* 手机版内边距更小 - 影响：适合小屏幕的紧凑设计 */
        padding: 10px 20px;
        
        /* 手机版字体稍小 - 影响：适合小屏幕的可读性 */
        font-size: 11px;
        
        /* 手机版上边距更小 - 影响：与Sign up Free按钮更紧密 */
        margin-top: 6px;
    }
    
    .bonus-column .bonus-amount {
        /* 手机端字体大小24px - 影响：在小屏幕上适中的数字大小，保持清晰可读 */
        font-size: 24px;
        
        /* 手机端数字区域高度45px - 影响：为数字提供足够空间往下移动 */
        height: 45px;
        
        /* 手机端底部对齐 - 影响：数字贴近底部显示 */
        align-items: flex-end;
        
        /* 手机端底部内边距10px - 影响：数字进一步往下调整，远离标签 */
        padding-bottom: 10px;
        
        /* 手机端文字阴影效果 - 影响：适合小屏幕的发光和轮廓效果 */
        text-shadow: 
            /* 金色发光效果（手机端适中强度） */
            0 0 12px rgba(250, 201, 99, 0.6),
            /* 立体阴影 */
            0 2px 4px rgba(0,0,0,0.3),
            /* 4方向黑色轮廓（手机端简化） */
            -1px -1px 0 #000,  /* 左上 */
            1px -1px 0 #000,   /* 右上 */
            -1px 1px 0 #000,   /* 左下 */
            1px 1px 0 #000;    /* 右下 */
    }
    
    .bonus-column .bonus-label {
        /* 手机端标签区域高度20px - 影响：压缩标签空间，为数字让出更多位置 */
        height: 10px;
    }
    
    /* 手机端调整为1列布局（宽度保持不变） */
    .partners-grid {
        /* 手机端：单列布局 - 影响：卡片垂直排列，适合小屏幕浏览 */
        grid-template-columns: 1fr;
        
        /* 手机端卡片间距25px - 影响：卡片之间的垂直间距 */
        gap: 25px;
        
        /* 手机端最大宽度400px - 影响：保持手机端紧凑布局，不会过宽 */
        max-width: 400px;
    }
    
    .partner-card {
        /* 手机端卡片最大宽度380px（增加宽度） - 影响：在小屏幕上保持合适的卡片尺寸 */
        max-width: 350px;
    }
    
    .brand-container {
        /* 手机端Logo区域恢复正常比例 - 影响：在小屏幕上不会过宽 */
        flex: 1;
    }
    
    .brand-logo-text {
        /* 手机端适中的内边距 - 影响：Logo占位符在小屏幕上的舒适显示 */
        padding: 15px 25px;
        
        /* 手机端圆角8px - 影响：适合小屏幕的圆角大小 */
        border-radius: 8px;
    }
    
    .brand-logo-img {
        /* 手机端Logo高度75px（增大） - 影响：在小屏幕上更明显的Logo尺寸 */
        height: 75px !important;
        
        /* 手机端内边距18px（配合更大Logo） - 影响：Logo与边框的合适间距 */
        padding: 12px !important;
        
        /* 手机端圆角8px - 影响：适合小屏幕的圆角大小 */
        border-radius: 8px;
        
        /* 手机端纯白色背景 - 影响：Logo在纯白背景下更清晰突出 */
        background: black !important;
        
        /* 确保手机端图片也能显示 - 影响：强制显示图片 */
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        width: 100% !important;
        object-fit: contain !important;
    }
    
    /* 手机端备用Logo样式 */
    .logo-fallback {
        /* 手机端备用Logo高度75px - 影响：与图片Logo保持一致 */
        height: 75px !important;
        
        /* 手机端字体稍小 - 影响：适合小屏幕显示 */
        font-size: 14px;
    }
    
    .claim-now-btn-top {
        /* 手机端按钮内边距 - 影响：在小屏幕上适合的按钮尺寸 */
        padding: 8px 14px;
        
        /* 手机端字体大小12px - 影响：在小屏幕上的可读性 */
        font-size: 8px;
        
        /* 手机端最小宽度100px - 影响：保持按钮的最小点击区域 */
        min-width: 100px;
        
        /* 手机端向上移动6px - 影响：按钮位置相对于Logo更高一些 */
        transform: translateY(-6px);
    }
    
    .signup-free-btn {
        /* 手机端小字体10px - 影响：在小屏幕上精致不占地方 */
        font-size: 12px;
        
        /* 手机端很紧凑的内边距 - 影响：按钮在手机上小巧精致 */
        padding: 8px 14px;
        
        /* 手机端最大宽度更小 - 影响：确保按钮一行显示且不太大 */
        max-width: 180px;
        
        /* 移除最小宽度限制 - 影响：让按钮根据内容自适应大小 */
        min-width: auto;
        
        /* 手机端圆角更小 - 影响：适合小屏幕的精致比例 */
        border-radius: 26px;
        
        /* 强制单行显示 - 影响：防止文字换行，保持一行显示 */
        white-space: nowrap;
        
        /* 字体稍细 - 影响：在小尺寸下保持清晰度 */
        font-weight: 600;
    }
}

/* ===== 动画定义 ===== */

/* Sign Up Free按钮发光呼吸动画 */
@keyframes signupGlow {
    /* 动画起始和结束状态 - 影响：按钮的默认发光强度 */
    0%, 100% {
        /* 渐变背景位置 - 影响：背景渐变的移动效果 */
        background-position: 0% 50%;
        
        /* 正常发光阴影 - 影响：按钮的基础立体感和发光效果 */
        box-shadow: 
            0 3px 10px rgba(255, 71, 87, 0.4),
            0 0 20px rgba(255, 71, 87, 0.2);
    }
    
    /* 动画中间状态 - 影响：按钮发光的峰值状态 */
    50% {
        /* 渐变背景移动到另一端 - 影响：背景色彩的流动感 */
        background-position: 100% 50%;
        
        /* 增强发光阴影 - 影响：按钮的呼吸发光效果，吸引用户注意 */
        box-shadow: 
            0 5px 15px rgba(255, 71, 87, 0.6),
            0 0 30px rgba(255, 71, 87, 0.3);
    }
}

/* Claim Now按钮发光呼吸动画 */
@keyframes claimGlow {
    /* 动画起始和结束状态 - 影响：按钮的默认发光强度 */
    0%, 100% {
        /* 渐变背景位置 - 影响：背景渐变的移动效果 */
        background-position: 0% 50%;
        
        /* 正常发光阴影 - 影响：按钮的基础立体感和发光效果 */
        box-shadow: 
            0 4px 15px rgba(40, 167, 69, 0.4),
            0 0 25px rgba(40, 167, 69, 0.2);
    }
    
    /* 动画中间状态 - 影响：按钮发光的峰值状态 */
    50% {
        /* 渐变背景移动到另一端 - 影响：背景色彩的流动感 */
        background-position: 100% 50%;
        
        /* 增强发光阴影 - 影响：按钮的呼吸发光效果，增强行动召唤 */
        box-shadow: 
            0 6px 20px rgba(40, 167, 69, 0.6),
            0 0 35px rgba(40, 167, 69, 0.3);
    }
}

@media (min-width: 769px) {
    .partner-card {
        max-width: 880px !important;
        width: 100% !important;
        min-width: 300px !important;
    }
    
    .partners-grid {
        max-width: 3200px !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 60px !important;
    }
    
    .container {
        max-width: 95% !important;
    }
}

/* ===== Live相关闪烁动画定义 ===== */

/* Live indicator整体闪烁动画 */
@keyframes liveBlink {
    /* 起始状态 - 影响：Live indicator的正常状态 */
    0%, 100% {
        opacity: 1;
        background: rgba(34, 197, 94, 0.1);
    }
    
    /* 中间状态 - 影响：Live indicator的高亮状态 */
    50% {
        opacity: 0.7;
        background: rgba(34, 197, 94, 0.3);
    }
}

/* Live dot增强脉动动画 */
@keyframes livePulse {
    /* 起始状态 - 影响：Live dot的正常大小和颜色 */
    0%, 100% {
        transform: scale(1);
        background: #22c55e;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    
    /* 中间状态 - 影响：Live dot的放大和发光效果 */
    50% {
        transform: scale(1.4);
        background: #16a34a;
        box-shadow: 0 0 8px 2px rgba(34, 197, 94, 0.4);
    }
}

/* Live文字闪烁动画 */
@keyframes liveTextBlink {
    /* 起始状态 - 影响：Live文字的正常状态 */
    0%, 100% {
        color: #22c55e;
        text-shadow: none;
    }
    
    /* 中间状态 - 影响：Live文字的高亮发光状态 */
    50% {
        color: #16a34a;
        text-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
    }
}

/* Live Updating按钮闪烁动画 */
@keyframes liveButtonBlink {
    /* 起始状态 - 影响：按钮的正常绿色状态 */
    0%, 100% {
        background: #22c55e;
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4);
        transform: scale(1);
    }
    
    /* 第一个高潮 - 影响：按钮变红色，像直播录制状态 */
    25% {
        background: #2baf53;
        box-shadow: 0 0 12px 2px rgba(239, 68, 68, 0.5);
        transform: scale(1.05);
    }
    
    /* 中间状态 - 影响：按钮回到绿色但有发光 */
    50% {
        background: #16a34a;
        box-shadow: 0 0 16px 3px rgba(34, 197, 94, 0.6);
        transform: scale(1);
    }
    
    /* 第二个高潮 - 影响：按钮再次闪烁红色 */
    75% {
        background: #2baf53;
        box-shadow: 0 0 20px 4px rgba(220, 38, 38, 0.7);
        transform: scale(1.08);
    }
}