/* =====================================================
   精神小妹 - 主样式文件
   品牌：精神小妹 | 域名：agwipbok.cn
   ===================================================== */

/* ---- CSS变量 ---- */
:root {
    --primary: #e63946;
    --primary-dark: #c1121f;
    --primary-light: rgba(230,57,70,0.15);
    --accent: #ff6b6b;
    --bg: #080814;
    --bg-card: #111128;
    --bg-nav: rgba(8,8,20,0.96);
    --text: #e8e8f0;
    --text-muted: rgba(232,232,240,0.5);
    --border: rgba(255,255,255,0.08);
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 8px 32px rgba(0,0,0,0.4);
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
    --font: 'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}

/* ---- 重置 ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;height:auto;display:block;}
ul{list-style:none;}
button{cursor:pointer;font-family:var(--font);}

/* ---- 通用容器 ---- */
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
.section{padding:70px 0;}
.section-sm{padding:40px 0;}
.text-center{text-align:center;}
.mt-10{margin-top:10px;}
.mt-30{margin-top:30px;}

/* ---- 顶部公告栏 ---- */
.top-bar{
    background:linear-gradient(90deg,var(--primary-dark),var(--primary));
    color:#fff;
    text-align:center;
    padding:8px 20px;
    font-size:13px;
    font-weight:500;
    letter-spacing:0.3px;
}
.top-bar a{color:#fff;text-decoration:underline;font-weight:700;}

/* ---- 导航 ---- */
.site-header{
    position:sticky;
    top:0;
    z-index:1000;
    background:var(--bg-nav);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--border);
    box-shadow:0 2px 20px rgba(0,0,0,0.3);
}
.nav-container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    height:64px;
    display:flex;
    align-items:center;
    gap:24px;
}
.site-logo{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
}
.site-logo img{width:40px;height:40px;border-radius:8px;}
.brand-name{
    font-size:22px;
    font-weight:900;
    color:#fff;
    letter-spacing:-0.5px;
}
.brand-name span{color:var(--primary);}
.main-nav{
    display:flex;
    align-items:center;
    gap:4px;
    flex:1;
}
.main-nav a{
    padding:8px 14px;
    border-radius:var(--radius-sm);
    font-size:14px;
    font-weight:600;
    color:var(--text-muted);
    transition:var(--transition);
    white-space:nowrap;
}
.main-nav a:hover,.main-nav a.active{
    color:#fff;
    background:var(--primary-light);
}
.main-nav a.active{color:var(--primary);}
.nav-search{
    display:flex;
    align-items:center;
    background:rgba(255,255,255,0.06);
    border:1px solid var(--border);
    border-radius:24px;
    overflow:hidden;
    transition:var(--transition);
}
.nav-search:focus-within{
    border-color:rgba(230,57,70,0.5);
    background:rgba(255,255,255,0.08);
}
.nav-search button{
    background:none;
    border:none;
    color:var(--text-muted);
    padding:8px 12px;
    display:flex;
    align-items:center;
}
.nav-search input{
    background:none;
    border:none;
    outline:none;
    color:#fff;
    font-size:13px;
    padding:8px 12px 8px 0;
    width:160px;
}
.nav-search input::placeholder{color:var(--text-muted);}
.search-tip{
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:10px 14px;
    font-size:13px;
    color:var(--text-muted);
    z-index:100;
    display:none;
}
.hamburger{
    display:none;
    flex-direction:column;
    gap:5px;
    background:none;
    border:none;
    padding:6px;
    flex-shrink:0;
}
.hamburger span{
    display:block;
    width:22px;
    height:2px;
    background:#fff;
    border-radius:2px;
    transition:var(--transition);
}
.hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.hamburger.active span:nth-child(2){opacity:0;}
.hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* ---- 面包屑 ---- */
.breadcrumb{
    background:rgba(255,255,255,0.03);
    border-bottom:1px solid var(--border);
    padding:10px 0;
}
.breadcrumb-inner{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
    font-size:13px;
    color:var(--text-muted);
    display:flex;
    align-items:center;
    gap:6px;
}
.breadcrumb-inner a{color:var(--text-muted);transition:color 0.2s;}
.breadcrumb-inner a:hover{color:var(--primary);}
.breadcrumb-inner .sep{color:rgba(255,255,255,0.2);}
.breadcrumb-inner .current{color:#fff;}

/* ---- Hero ---- */
.hero{
    position:relative;
    min-height:560px;
    display:flex;
    align-items:center;
    overflow:hidden;
    padding:80px 0;
}
.hero-bg{
    position:absolute;
    inset:0;
    background:url('/assets/images/hero-banner.jpg') center/cover no-repeat;
    filter:brightness(0.35) saturate(1.2);
}
.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(135deg,rgba(8,8,20,0.85) 0%,rgba(230,57,70,0.12) 100%);
}
.hero .container{position:relative;z-index:1;}
.hero-content{max-width:680px;}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(230,57,70,0.2);
    border:1px solid rgba(230,57,70,0.4);
    color:var(--primary);
    padding:6px 14px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    margin-bottom:20px;
    letter-spacing:0.5px;
}
.hero-content h1{
    font-size:clamp(32px,5vw,52px);
    font-weight:900;
    color:#fff;
    line-height:1.2;
    margin-bottom:18px;
    letter-spacing:-1px;
}
.hero-content h1 span{color:var(--primary);}
.hero-content p{
    font-size:16px;
    color:rgba(255,255,255,0.65);
    margin-bottom:32px;
    line-height:1.8;
}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:48px;}
.hero-stats{
    display:flex;
    gap:32px;
    flex-wrap:wrap;
}
.hero-stat .num{
    font-size:28px;
    font-weight:900;
    color:var(--primary);
    line-height:1;
}
.hero-stat .label{
    font-size:12px;
    color:var(--text-muted);
    margin-top:4px;
}

/* ---- 页面Hero（内页）---- */
.page-hero{
    padding:60px 0;
    background:linear-gradient(135deg,#0d0d1a 0%,#111128 100%);
    border-bottom:1px solid var(--border);
}
.page-hero-content{max-width:700px;}
.page-hero-content h1{
    font-size:clamp(28px,4vw,42px);
    font-weight:900;
    color:#fff;
    margin-bottom:14px;
    letter-spacing:-0.5px;
}
.page-hero-content h1 span{color:var(--primary);}
.page-hero-content p{
    font-size:15px;
    color:var(--text-muted);
    line-height:1.8;
}

/* ---- 按钮 ---- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    padding:10px 22px;
    border-radius:var(--radius-sm);
    font-size:14px;
    font-weight:700;
    border:2px solid transparent;
    transition:var(--transition);
    cursor:pointer;
    white-space:nowrap;
    letter-spacing:0.3px;
}
.btn-primary{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary);
}
.btn-primary:hover{
    background:var(--primary-dark);
    border-color:var(--primary-dark);
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(230,57,70,0.4);
}
.btn-outline{
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,0.25);
}
.btn-outline:hover{
    border-color:var(--primary);
    color:var(--primary);
    transform:translateY(-2px);
}
.btn-ghost{
    background:rgba(255,255,255,0.06);
    color:var(--text-muted);
    border-color:transparent;
}
.btn-ghost:hover{
    background:var(--primary-light);
    color:var(--primary);
}
.btn-lg{padding:14px 30px;font-size:15px;border-radius:10px;}
.btn-sm{padding:7px 16px;font-size:12px;border-radius:6px;}

/* ---- 区块标题 ---- */
.section-title{text-align:center;margin-bottom:48px;}
.section-title h2{
    font-size:clamp(22px,3vw,32px);
    font-weight:900;
    color:#fff;
    margin-bottom:12px;
    letter-spacing:-0.5px;
}
.section-title h2 span{color:var(--primary);}
.section-title p{
    font-size:15px;
    color:var(--text-muted);
    max-width:600px;
    margin:0 auto 20px;
    line-height:1.8;
}
.title-line{
    width:50px;
    height:3px;
    background:var(--primary);
    border-radius:2px;
    margin:0 auto;
}

/* ---- 网格布局 ---- */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}

/* ---- 视频卡片 ---- */
.video-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    cursor:pointer;
    transition:var(--transition);
}
.video-card:hover{
    border-color:rgba(230,57,70,0.4);
    transform:translateY(-6px);
    box-shadow:0 16px 40px rgba(0,0,0,0.4);
}
.video-thumb{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:#0d0d1a;
}
.video-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.5s ease;
}
.video-card:hover .video-thumb img{transform:scale(1.08);}
.play-btn{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0.3);
    opacity:0;
    transition:var(--transition);
}
.video-card:hover .play-btn{opacity:1;}
.play-btn-icon{
    width:52px;
    height:52px;
    background:rgba(230,57,70,0.9);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:transform 0.2s;
}
.play-btn-icon::after{
    content:'';
    border-left:18px solid #fff;
    border-top:11px solid transparent;
    border-bottom:11px solid transparent;
    margin-left:4px;
}
.play-btn:hover .play-btn-icon{transform:scale(1.12);}
.video-duration{
    position:absolute;
    bottom:8px;
    right:8px;
    background:rgba(0,0,0,0.8);
    color:#fff;
    font-size:11px;
    font-weight:600;
    padding:2px 7px;
    border-radius:4px;
}
.video-tag{
    position:absolute;
    top:8px;
    left:8px;
    background:var(--primary);
    color:#fff;
    font-size:10px;
    font-weight:700;
    padding:2px 8px;
    border-radius:4px;
    letter-spacing:0.3px;
}
.video-info{padding:14px;}
.video-info h3{
    font-size:13px;
    font-weight:700;
    color:#fff;
    line-height:1.5;
    margin-bottom:8px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.video-meta{
    display:flex;
    justify-content:space-between;
    font-size:11px;
    color:var(--text-muted);
    margin-bottom:8px;
}
.video-stats{
    display:flex;
    gap:10px;
}
.stat{
    font-size:11px;
    color:var(--text-muted);
}

/* ---- 功能卡片 ---- */
.feature-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px;
    transition:var(--transition);
}
.feature-card:hover{
    border-color:rgba(230,57,70,0.35);
    transform:translateY(-4px);
    box-shadow:var(--shadow);
}
.feature-icon{
    font-size:36px;
    margin-bottom:16px;
}
.feature-card h3{
    font-size:16px;
    font-weight:800;
    color:#fff;
    margin-bottom:10px;
}
.feature-card p{
    font-size:13px;
    color:var(--text-muted);
    line-height:1.8;
}

/* ---- AI卡片 ---- */
.ai-section{background:linear-gradient(135deg,#0d0d1a 0%,#111128 100%);}
.ai-card{
    background:linear-gradient(135deg,rgba(230,57,70,0.08),rgba(17,17,40,0.9));
    border:1px solid rgba(230,57,70,0.2);
    border-radius:var(--radius);
    padding:30px;
    transition:var(--transition);
}
.ai-card:hover{
    border-color:rgba(230,57,70,0.5);
    transform:translateY(-4px);
    box-shadow:0 12px 40px rgba(230,57,70,0.15);
}
.ai-icon{
    font-size:40px;
    margin-bottom:18px;
}
.ai-card h3{
    font-size:17px;
    font-weight:800;
    color:#fff;
    margin-bottom:12px;
}
.ai-card p{
    font-size:13px;
    color:var(--text-muted);
    line-height:1.8;
}

/* ---- 社区功能 ---- */
.community-features{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
}
.comm-feature{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:24px;
    transition:var(--transition);
}
.comm-feature:hover{
    border-color:rgba(230,57,70,0.35);
    transform:translateY(-3px);
}
.comm-icon{
    font-size:32px;
    margin-bottom:14px;
}
.comm-feature h4{
    font-size:15px;
    font-weight:700;
    color:#fff;
    margin-bottom:8px;
}
.comm-feature p{
    font-size:13px;
    color:var(--text-muted);
    line-height:1.7;
}

/* ---- 直播卡片 ---- */
.live-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    overflow:hidden;
    transition:var(--transition);
    cursor:pointer;
}
.live-card:hover{
    border-color:rgba(230,57,70,0.4);
    transform:translateY(-4px);
}
.live-thumb{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
}
.live-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.5s;
}
.live-card:hover .live-thumb img{transform:scale(1.06);}
.live-badge{
    position:absolute;
    top:8px;
    left:8px;
    background:#e63946;
    color:#fff;
    font-size:10px;
    font-weight:700;
    padding:2px 8px;
    border-radius:4px;
    animation:pulse 2s infinite;
}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.7;}}
.live-viewers{
    position:absolute;
    top:8px;
    right:8px;
    background:rgba(0,0,0,0.7);
    color:#fff;
    font-size:11px;
    padding:2px 7px;
    border-radius:4px;
}
.live-info{padding:12px 14px;}
.live-info h4{
    font-size:13px;
    font-weight:700;
    color:#fff;
    margin-bottom:4px;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.live-info p{
    font-size:11px;
    color:var(--text-muted);
}

/* ---- 专家卡片 ---- */
.expert-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px 20px;
    text-align:center;
    transition:var(--transition);
}
.expert-card:hover{
    border-color:rgba(230,57,70,0.4);
    transform:translateY(-5px);
    box-shadow:var(--shadow);
}
.expert-avatar{
    width:80px;
    height:80px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto 14px;
    border:3px solid var(--primary);
}
.expert-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.expert-name{
    font-size:16px;
    font-weight:800;
    color:#fff;
    margin-bottom:4px;
}
.expert-title{
    font-size:12px;
    color:var(--primary);
    font-weight:600;
    margin-bottom:10px;
}
.expert-desc{
    font-size:12px;
    color:var(--text-muted);
    line-height:1.7;
    margin-bottom:14px;
}
.expert-tags{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    justify-content:center;
    margin-bottom:14px;
}
.expert-tag{
    background:var(--primary-light);
    color:var(--primary);
    font-size:10px;
    padding:2px 8px;
    border-radius:4px;
    font-weight:600;
}
.expert-btns{
    display:flex;
    gap:8px;
    justify-content:center;
}

/* ---- 合作品牌 ---- */
.partner-logos{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
}
.partner-logo{
    background:rgba(255,255,255,0.05);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:10px 20px;
    font-size:13px;
    font-weight:600;
    color:var(--text-muted);
    transition:var(--transition);
}
.partner-logo:hover{
    background:var(--primary-light);
    border-color:rgba(230,57,70,0.3);
    color:#fff;
}

/* ---- 步骤 ---- */
.howto-steps{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
    position:relative;
}
.howto-steps::before{
    content:'';
    position:absolute;
    top:30px;
    left:calc(12.5% + 20px);
    right:calc(12.5% + 20px);
    height:2px;
    background:linear-gradient(90deg,var(--primary),transparent);
    z-index:0;
}
.howto-step{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:28px 20px;
    text-align:center;
    position:relative;
    z-index:1;
    transition:var(--transition);
}
.howto-step:hover{
    border-color:rgba(230,57,70,0.4);
    transform:translateY(-4px);
}
.step-num{
    width:48px;
    height:48px;
    background:var(--primary);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    font-weight:900;
    color:#fff;
    margin:0 auto 16px;
}
.howto-step h4{
    font-size:15px;
    font-weight:700;
    color:#fff;
    margin-bottom:10px;
}
.howto-step p{
    font-size:13px;
    color:var(--text-muted);
    line-height:1.7;
}

/* ---- FAQ ---- */
.faq-item{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    margin-bottom:10px;
    overflow:hidden;
    transition:border-color 0.3s;
}
.faq-item.open{border-color:rgba(230,57,70,0.4);}
.faq-question{
    padding:16px 20px;
    font-size:14px;
    font-weight:600;
    color:#fff;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
    user-select:none;
}
.faq-question:hover{color:var(--primary);}
.faq-icon{
    font-size:18px;
    color:var(--primary);
    transition:transform 0.3s;
    flex-shrink:0;
    margin-left:12px;
}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease;
}
.faq-item.open .faq-answer{max-height:300px;}
.faq-answer>div{
    padding:0 20px 16px;
    font-size:13px;
    color:var(--text-muted);
    line-height:1.8;
    border-top:1px solid var(--border);
    padding-top:14px;
}

/* ---- 评价卡片 ---- */
.review-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:22px;
    transition:var(--transition);
}
.review-card:hover{
    border-color:rgba(230,57,70,0.3);
    transform:translateY(-3px);
}
.review-stars{
    color:#ffd700;
    font-size:14px;
    margin-bottom:10px;
    letter-spacing:2px;
}
.review-text{
    font-size:13px;
    color:var(--text-muted);
    line-height:1.8;
    margin-bottom:16px;
    font-style:italic;
}
.review-author{
    display:flex;
    align-items:center;
    gap:10px;
}
.review-avatar{
    width:36px;
    height:36px;
    border-radius:50%;
    background:var(--primary);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:14px;
    font-weight:700;
    color:#fff;
    flex-shrink:0;
}
.review-info .name{
    font-size:13px;
    font-weight:700;
    color:#fff;
}
.review-info .date{
    font-size:11px;
    color:var(--text-muted);
}

/* ---- 联系区 ---- */
.contact-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
}
.contact-info-item{
    display:flex;
    gap:14px;
    margin-bottom:18px;
    align-items:flex-start;
}
.contact-icon{
    font-size:20px;
    flex-shrink:0;
    margin-top:2px;
}
.contact-text .label{
    font-size:12px;
    color:var(--text-muted);
    margin-bottom:2px;
}
.contact-text .value{
    font-size:14px;
    font-weight:600;
    color:#fff;
}
.qr-group{
    display:flex;
    gap:24px;
}
.qr-item{
    text-align:center;
}
.qr-item img{
    width:110px;
    height:110px;
    border-radius:var(--radius-sm);
    border:2px solid var(--border);
    margin-bottom:8px;
}
.qr-item p{
    font-size:12px;
    color:var(--text-muted);
    line-height:1.5;
}

/* ---- 分享栏 ---- */
.share-bar{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}
.share-label{
    font-size:13px;
    color:var(--text-muted);
}
.share-btn{
    padding:7px 16px;
    border-radius:20px;
    font-size:12px;
    font-weight:600;
    border:1px solid var(--border);
    color:var(--text-muted);
    transition:var(--transition);
    cursor:pointer;
}
.share-btn:hover{
    border-color:var(--primary);
    color:var(--primary);
    background:var(--primary-light);
}

/* ---- 筛选栏 ---- */
.filter-bar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:24px;
}
.filter-btn{
    padding:7px 16px;
    border-radius:20px;
    font-size:13px;
    font-weight:600;
    border:1px solid var(--border);
    background:transparent;
    color:var(--text-muted);
    transition:var(--transition);
}
.filter-btn:hover,.filter-btn.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

/* ---- 工具卡片 ---- */
.tool-card{
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius);
    padding:26px;
    transition:var(--transition);
}
.tool-card:hover{
    border-color:rgba(230,57,70,0.4);
    transform:translateY(-4px);
    box-shadow:var(--shadow);
}
.tool-icon{
    font-size:38px;
    margin-bottom:14px;
}
.tool-card h3{
    font-size:16px;
    font-weight:800;
    color:#fff;
    margin-bottom:10px;
}
.tool-card p{
    font-size:13px;
    color:var(--text-muted);
    line-height:1.8;
    margin-bottom:14px;
}
.tool-meta{
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.tool-badge{
    font-size:11px;
    font-weight:700;
    padding:3px 10px;
    border-radius:4px;
}
.badge-free{background:rgba(34,197,94,0.15);color:#22c55e;}
.badge-pro{background:rgba(168,85,247,0.15);color:#a855f7;}
.badge-new{background:rgba(234,179,8,0.15);color:#eab308;}

/* ---- 页脚 ---- */
.site-footer{
    background:#050510;
    border-top:1px solid var(--border);
    padding-top:60px;
}
.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:40px;
    margin-bottom:40px;
}
.footer-brand .logo-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:16px;
}
.footer-brand .logo-wrap img{
    width:36px;
    height:36px;
    border-radius:8px;
}
.footer-brand .logo-wrap span{
    font-size:20px;
    font-weight:900;
    color:#fff;
}
.footer-brand .logo-wrap span em{
    color:var(--primary);
    font-style:normal;
}
.footer-brand p{
    font-size:13px;
    color:rgba(255,255,255,0.4);
    line-height:1.8;
    margin-bottom:20px;
}
.footer-social{display:flex;gap:8px;}
.social-btn{
    width:36px;
    height:36px;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    border:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    transition:var(--transition);
}
.social-btn:hover{
    background:var(--primary-light);
    border-color:rgba(230,57,70,0.4);
}
.footer-col h4{
    font-size:14px;
    font-weight:700;
    color:#fff;
    margin-bottom:16px;
    padding-bottom:8px;
    border-bottom:1px solid var(--border);
}
.footer-col ul li{margin-bottom:10px;}
.footer-col ul li a{
    font-size:13px;
    color:rgba(255,255,255,0.4);
    transition:color 0.2s;
}
.footer-col ul li a:hover{color:var(--primary);}
.footer-bottom{
    padding:20px 0;
    border-top:1px solid var(--border);
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:14px;
}
.footer-bottom p{
    font-size:12px;
    color:rgba(255,255,255,0.3);
}
.footer-links{
    display:flex;
    gap:16px;
}
.footer-links a{
    font-size:12px;
    color:rgba(255,255,255,0.3);
    transition:color 0.2s;
}
.footer-links a:hover{color:var(--primary);}

/* ---- 动画 ---- */
@keyframes fadeInUp{
    from{opacity:0;transform:translateY(30px);}
    to{opacity:1;transform:translateY(0);}
}
.animate-fadeInUp{
    animation:fadeInUp 0.6s ease forwards;
}

/* ---- 响应式 ---- */
@media (max-width:1024px){
    .grid-4{grid-template-columns:repeat(2,1fr);}
    .footer-grid{grid-template-columns:1fr 1fr;}
    .howto-steps{grid-template-columns:repeat(2,1fr);}
    .howto-steps::before{display:none;}
}
@media (max-width:768px){
    .hamburger{display:flex;}
    .main-nav{
        display:none;
        position:fixed;
        top:64px;
        left:0;
        right:0;
        background:var(--bg-nav);
        flex-direction:column;
        padding:16px;
        border-bottom:1px solid var(--border);
        gap:4px;
        z-index:999;
    }
    .main-nav.open{display:flex;}
    .main-nav a{padding:12px 16px;font-size:15px;}
    .nav-search{display:none;}
    .grid-3{grid-template-columns:1fr;}
    .grid-4{grid-template-columns:repeat(2,1fr);}
    .community-features{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .hero{min-height:auto;padding:60px 0;}
    .hero-btns{flex-direction:column;}
    .hero-stats{gap:20px;}
    .howto-steps{grid-template-columns:1fr;}
    .section{padding:50px 0;}
    .footer-bottom{flex-direction:column;text-align:center;}
    .qr-group{justify-content:center;}
}
@media (max-width:480px){
    .grid-4{grid-template-columns:1fr;}
    .grid-2{grid-template-columns:1fr;}
    .hero-content h1{font-size:28px;}
    .filter-bar{gap:6px;}
    .filter-btn{font-size:12px;padding:6px 12px;}
    .partner-logos{gap:8px;}
    .partner-logo{font-size:12px;padding:8px 14px;}
}