/* 
 * 前台拟态风格增强
 * 适用于 Tpay 前台页面
 */

:root {
    /* 拟态风格主色调 */
    --neu-bg: #e0e5ec;
    --neu-light: #ffffff;
    --neu-dark: #a3b1c6;
    --neu-shadow-light: #ffffff;
    --neu-shadow-dark: #a3b1c6;
    
    /* 强调色 */
    --neu-primary: #667eea;
    --neu-success: #48bb78;
    --neu-danger: #f56565;
    --neu-warning: #ed8936;
    --neu-info: #4299e1;
}

/* 导航栏拟态风格 */
.main-menu.neu-style {
    background: var(--neu-bg);
    box-shadow: 
        0 8px 16px rgba(163, 177, 198, 0.4),
        0 -2px 8px rgba(255, 255, 255, 0.8);
}

.main-menu.neu-style .main-menu-logo {
    background: var(--neu-bg);
    border-radius: 15px;
    box-shadow: 
        6px 6px 12px rgba(163, 177, 198, 0.4),
        -6px -6px 12px rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
}

/* 按钮拟态风格 */
.thm-btn.neu-style {
    background: var(--neu-bg);
    border: none;
    border-radius: 25px;
    box-shadow: 
        6px 6px 12px rgba(163, 177, 198, 0.4),
        -6px -6px 12px rgba(255, 255, 255, 0.8);
    color: #2d3748;
    font-weight: 600;
    padding: 12px 30px;
    transition: all 0.3s ease;
}

.thm-btn.neu-style:hover {
    box-shadow: 
        4px 4px 8px rgba(163, 177, 198, 0.4),
        -4px -4px 8px rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
}

.thm-btn.neu-style:active {
    box-shadow: 
        inset 4px 4px 8px rgba(163, 177, 198, 0.4),
        inset -4px -4px 8px rgba(255, 255, 255, 0.8);
    transform: translateY(0);
}

/* 主色调按钮 */
.thm-btn-primary.neu-style {
    background: linear-gradient(145deg, #7289f5, #667eea);
    box-shadow: 
        6px 6px 12px rgba(102, 126, 234, 0.4),
        -6px -6px 12px rgba(114, 137, 245, 0.2);
    color: white;
}

.thm-btn-primary.neu-style:hover {
    box-shadow: 
        4px 4px 8px rgba(102, 126, 234, 0.4),
        -4px -4px 8px rgba(114, 137, 245, 0.2);
    color: white;
}

/* 轮廓按钮 */
.thm-btn-outline.neu-style {
    background: var(--neu-bg);
    border: 2px solid transparent;
    box-shadow: 
        4px 4px 8px rgba(163, 177, 198, 0.4),
        -4px -4px 8px rgba(255, 255, 255, 0.8);
    color: var(--neu-primary);
    position: relative;
}

.thm-btn-outline.neu-style:hover {
    box-shadow: 
        6px 6px 12px rgba(163, 177, 198, 0.4),
        -6px -6px 12px rgba(255, 255, 255, 0.8);
    color: var(--neu-primary);
}

/* 硬币卡片拟态风格 */
.coin-card.neu-style {
    background: var(--neu-bg);
    border: none;
    border-radius: 20px;
    box-shadow: 
        10px 10px 20px rgba(163, 177, 198, 0.4),
        -10px -10px 20px rgba(255, 255, 255, 0.8);
    overflow: hidden;
    transition: all 0.3s ease;
}

.coin-card.neu-style:hover {
    box-shadow: 
        15px 15px 30px rgba(163, 177, 198, 0.5),
        -15px -15px 30px rgba(255, 255, 255, 0.9);
    transform: translateY(-5px);
}

/* Why Us 卡片 */
.why-us-card.neu-style {
    background: var(--neu-bg);
    border-radius: 20px;
    box-shadow: 
        10px 10px 20px rgba(163, 177, 198, 0.4),
        -10px -10px 20px rgba(255, 255, 255, 0.8);
    padding: 30px;
    transition: all 0.3s ease;
}

.why-us-card.neu-style:hover {
    box-shadow: 
        12px 12px 24px rgba(163, 177, 198, 0.5),
        -12px -12px 24px rgba(255, 255, 255, 0.9);
    transform: translateY(-5px);
}

.why-us-card.neu-style .why-us-image {
    background: var(--neu-bg);
    border-radius: 15px;
    box-shadow: 
        inset 6px 6px 12px rgba(163, 177, 198, 0.3),
        inset -6px -6px 12px rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    padding: 20px;
}

/* 功能列表拟态风格 */
.feature-one-list-item.neu-style {
    background: var(--neu-bg);
    border-radius: 15px;
    box-shadow: 
        8px 8px 16px rgba(163, 177, 198, 0.4),
        -8px -8px 16px rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    padding: 20px;
    transition: all 0.3s ease;
}

.feature-one-list-item.neu-style:hover {
    box-shadow: 
        10px 10px 20px rgba(163, 177, 198, 0.5),
        -10px -10px 20px rgba(255, 255, 255, 0.9);
    transform: translateX(5px);
}

.feature-one-list-icon.neu-style {
    background: var(--neu-bg);
    border-radius: 50%;
    box-shadow: 
        6px 6px 12px rgba(163, 177, 198, 0.4),
        -6px -6px 12px rgba(255, 255, 255, 0.8);
    display: inline-flex;
    height: 60px;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    width: 60px;
}

/* FAQ项拟态风格 */
.faq-item.neu-style {
    background: var(--neu-bg);
    border-radius: 15px;
    box-shadow: 
        8px 8px 16px rgba(163, 177, 198, 0.4),
        -8px -8px 16px rgba(255, 255, 255, 0.8);
    margin-bottom: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item.neu-style:hover {
    box-shadow: 
        10px 10px 20px rgba(163, 177, 198, 0.5),
        -10px -10px 20px rgba(255, 255, 255, 0.9);
}

.faq-item.neu-style.active {
    box-shadow: 
        inset 6px 6px 12px rgba(163, 177, 198, 0.3),
        inset -6px -6px 12px rgba(255, 255, 255, 0.7);
}

/* 联系框拟态风格 */
.contact-one-box.neu-style {
    background: var(--neu-bg);
    border-radius: 25px;
    box-shadow: 
        15px 15px 30px rgba(163, 177, 198, 0.5),
        -15px -15px 30px rgba(255, 255, 255, 0.9);
    padding: 50px;
}

/* 页脚拟态风格 */
.main-footer.neu-style {
    background: var(--neu-bg);
    box-shadow: 
        0 -8px 16px rgba(163, 177, 198, 0.4),
        0 2px 8px rgba(255, 255, 255, 0.8);
}

/* 滚动到顶部按钮 */
.scroll-to-top.neu-style {
    background: var(--neu-bg);
    border-radius: 50%;
    box-shadow: 
        6px 6px 12px rgba(163, 177, 198, 0.4),
        -6px -6px 12px rgba(255, 255, 255, 0.8);
}

.scroll-to-top.neu-style:hover {
    box-shadow: 
        8px 8px 16px rgba(163, 177, 198, 0.5),
        -8px -8px 16px rgba(255, 255, 255, 0.9);
}

/* 客户端图片容器 */
.client-image.neu-style {
    background: var(--neu-bg);
    border-radius: 15px;
    box-shadow: 
        6px 6px 12px rgba(163, 177, 198, 0.4),
        -6px -6px 12px rgba(255, 255, 255, 0.8);
    padding: 20px;
    transition: all 0.3s ease;
}

.client-image.neu-style:hover {
    box-shadow: 
        8px 8px 16px rgba(163, 177, 198, 0.5),
        -8px -8px 16px rgba(255, 255, 255, 0.9);
    transform: translateY(-3px);
}

/* 区块信息背景 */
.section-title-box.neu-style {
    background: var(--neu-bg);
    border-radius: 20px;
    box-shadow: 
        10px 10px 20px rgba(163, 177, 198, 0.4),
        -10px -10px 20px rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
    padding: 40px;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .coin-card.neu-style,
    .why-us-card.neu-style,
    .contact-one-box.neu-style {
        border-radius: 15px;
        padding: 20px;
    }
    
    .section-title-box.neu-style {
        padding: 30px 20px;
    }
}

/* 平滑动画 */
@keyframes neuFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.neu-animate {
    animation: neuFadeIn 0.6s ease forwards;
}

/* 光泽效果 */
.neu-glossy::before {
    background: linear-gradient(135deg, rgba(255,255,255,0.2), transparent);
    border-radius: inherit;
    content: '';
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 1;
}

/* 渐变背景容器 */
.neu-gradient-bg {
    background: linear-gradient(135deg, #e0e5ec 0%, #f5f7fa 100%);
    min-height: 100vh;
}