/* =============================================
   51视频 - 主样式文件
   品牌：51视频 | 域名：dt165953.cn
   原创设计，禁止抄袭
   ============================================= */

/* ---- CSS变量 ---- */
:root {
    --primary: #6c3bff;
    --primary-dark: #5228e8;
    --secondary: #ff4d8d;
    --accent: #00d4ff;
    --bg-main: #0d0d1a;
    --bg-section: #111127;
    --bg-card: #16162a;
    --bg-card-hover: #1e1e38;
    --text-primary: #f0f0ff;
    --text-secondary: #b0b0cc;
    --text-muted: #7070a0;
    --border: rgba(108,59,255,0.18);
    --border-light: rgba(255,255,255,0.07);
    --shadow: 0 8px 32px rgba(108,59,255,0.18);
    --shadow-card: 0 4px 24px rgba(0,0,0,0.35);
    --radius: 14px;
    --radius-sm: 8px;
    --radius-lg: 20px;
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
    --font: 'PingFang SC','Microsoft YaHei','Helvetica Neue',Arial,sans-serif;
    --header-h: 64px;
}

/* ---- 基础重置 ---- */
*,*::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-main);
    color:var(--text-primary);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
}
a{color:var(--primary);text-decoration:none;transition:color var(--transition);}
a:hover{color:var(--secondary);}
img{max-width:100%;height:auto;display:block;}
h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;color:var(--text-primary);}
ul{list-style:none;}
button,input,textarea,select{font-family:var(--font);}

/* ---- 容器 ---- */
.container{
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

/* ---- 通知条 ---- */
.notice-bar{
    background:linear-gradient(90deg,#6c3bff,#ff4d8d,#6c3bff);
    background-size:200% 100%;
    animation:noticeSlide 4s linear infinite;
    color:#fff;
    font-size:0.82rem;
    padding:7px 0;
    text-align:center;
    position:relative;
    z-index:100;
}
.notice-bar a{color:#fff;text-decoration:underline;font-weight:600;}
@keyframes noticeSlide{0%{background-position:0% 50%}100%{background-position:200% 50%}}

/* ---- 头部 ---- */
#site-header{
    background:rgba(13,13,26,0.95);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:999;
    height:var(--header-h);
}
.header-inner{
    display:flex;
    align-items:center;
    gap:24px;
    height:var(--header-h);
}
.site-logo{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    color:var(--text-primary);
    font-weight:800;
    font-size:1.25rem;
}
.site-logo img{border-radius:8px;width:36px;height:36px;object-fit:contain;}
.site-logo-text{
    background:linear-gradient(135deg,#6c3bff,#ff4d8d);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    font-size:1.3rem;
}
.main-nav{
    display:flex;
    gap:4px;
    align-items:center;
    flex:1;
}
.main-nav a{
    color:var(--text-secondary);
    font-size:0.9rem;
    padding:6px 14px;
    border-radius:50px;
    transition:all var(--transition);
    white-space:nowrap;
}
.main-nav a:hover,.main-nav a.active{
    color:#fff;
    background:rgba(108,59,255,0.18);
}
.main-nav a.active{
    background:linear-gradient(135deg,rgba(108,59,255,0.3),rgba(255,77,141,0.2));
    color:#fff;
}
.header-actions{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
}
.search-wrap{
    position:relative;
    display:flex;
    align-items:center;
}
.search-wrap input{
    background:rgba(255,255,255,0.06);
    border:1px solid var(--border);
    border-radius:50px;
    padding:7px 36px 7px 14px;
    color:var(--text-primary);
    font-size:0.85rem;
    width:180px;
    transition:all var(--transition);
    outline:none;
}
.search-wrap input:focus{
    border-color:var(--primary);
    background:rgba(108,59,255,0.1);
    width:220px;
}
.search-wrap input::placeholder{color:var(--text-muted);}
.search-btn{
    position:absolute;
    right:8px;
    background:none;
    border:none;
    color:var(--text-muted);
    cursor:pointer;
    font-size:1rem;
    padding:2px;
    transition:color var(--transition);
}
.search-btn:hover{color:var(--primary);}
.search-hint{
    display:none;
    position:absolute;
    top:calc(100% + 8px);
    left:0;
    right:0;
    background:var(--bg-card);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:10px 14px;
    font-size:0.82rem;
    color:var(--text-muted);
    white-space:nowrap;
    z-index:10;
}
.menu-toggle{
    display:none;
    background:none;
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    color:var(--text-primary);
    cursor:pointer;
    padding:6px 10px;
    font-size:1.1rem;
}

/* ---- 搜索栏 ---- */
.header-search-bar{
    background:var(--bg-section);
    border-bottom:1px solid var(--border);
    padding:10px 0;
}
.search-bar-inner{
    display:flex;
    gap:8px;
    margin-bottom:8px;
}
.search-bar-inner input{
    flex:1;
    background:rgba(255,255,255,0.06);
    border:1px solid var(--border);
    border-radius:50px;
    padding:9px 18px;
    color:var(--text-primary);
    font-size:0.9rem;
    outline:none;
    transition:border-color var(--transition);
}
.search-bar-inner input:focus{border-color:var(--primary);}
.search-bar-inner input::placeholder{color:var(--text-muted);}
.search-bar-inner button{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    border:none;
    border-radius:50px;
    padding:9px 24px;
    color:#fff;
    font-size:0.9rem;
    cursor:pointer;
    font-weight:600;
    transition:opacity var(--transition);
    white-space:nowrap;
}
.search-bar-inner button:hover{opacity:0.85;}
.search-hot-tags{
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    font-size:0.82rem;
}
.search-hot-tags span{color:var(--text-muted);}
.search-hot-tags a{
    color:var(--text-secondary);
    background:rgba(255,255,255,0.05);
    border:1px solid var(--border-light);
    border-radius:50px;
    padding:3px 10px;
    font-size:0.8rem;
    transition:all var(--transition);
}
.search-hot-tags a:hover{
    color:#fff;
    background:rgba(108,59,255,0.2);
    border-color:var(--primary);
}

/* ---- 按钮 ---- */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius:50px;
    padding:11px 26px;
    font-size:0.92rem;
    font-weight:600;
    cursor:pointer;
    transition:all var(--transition);
    border:none;
    white-space:nowrap;
    text-decoration:none;
}
.btn-primary{
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    box-shadow:0 4px 16px rgba(108,59,255,0.35);
}
.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 8px 24px rgba(108,59,255,0.5);
    color:#fff;
}
.btn-outline{
    background:transparent;
    border:1.5px solid var(--primary);
    color:var(--primary);
}
.btn-outline:hover{
    background:rgba(108,59,255,0.12);
    transform:translateY(-2px);
    color:var(--primary);
}
.btn-sm{padding:7px 16px;font-size:0.82rem;}

/* ---- 标签 ---- */
.tag{
    display:inline-block;
    background:rgba(108,59,255,0.12);
    border:1px solid rgba(108,59,255,0.25);
    color:var(--primary);
    border-radius:50px;
    padding:3px 10px;
    font-size:0.78rem;
    transition:all var(--transition);
    cursor:pointer;
    text-decoration:none;
}
.tag:hover{background:rgba(108,59,255,0.25);color:#fff;}
.tag-hot{
    background:rgba(255,77,141,0.12);
    border-color:rgba(255,77,141,0.3);
    color:var(--secondary);
}
.tag-hot:hover{background:rgba(255,77,141,0.25);color:#fff;}
.tag-new{
    background:rgba(0,212,255,0.1);
    border-color:rgba(0,212,255,0.3);
    color:var(--accent);
}
.tag-new:hover{background:rgba(0,212,255,0.2);color:#fff;}

/* ---- Hero区 ---- */
.hero-section{
    position:relative;
    min-height:88vh;
    display:flex;
    align-items:center;
    overflow:hidden;
}
.hero-bg{
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse 80% 60% at 60% 40%,rgba(108,59,255,0.25) 0%,transparent 70%),
        radial-gradient(ellipse 50% 40% at 20% 80%,rgba(255,77,141,0.18) 0%,transparent 60%),
        radial-gradient(ellipse 40% 30% at 80% 20%,rgba(0,212,255,0.12) 0%,transparent 60%),
        linear-gradient(135deg,#0d0d1a 0%,#16162a 50%,#0d0d1a 100%);
}
.hero-bg::after{
    content:'';
    position:absolute;
    inset:0;
    background-image:
        radial-gradient(circle 1px at 20% 30%,rgba(108,59,255,0.5) 0%,transparent 100%),
        radial-gradient(circle 1px at 70% 60%,rgba(255,77,141,0.4) 0%,transparent 100%),
        radial-gradient(circle 1px at 50% 80%,rgba(0,212,255,0.3) 0%,transparent 100%);
    background-size:200px 200px,300px 300px,250px 250px;
    animation:starTwinkle 6s ease-in-out infinite alternate;
}
@keyframes starTwinkle{0%{opacity:0.4}100%{opacity:1}}
.hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,transparent 60%,var(--bg-main) 100%);
}
.hero-content{
    position:relative;
    z-index:2;
    max-width:700px;
    padding:60px 0;
}
.hero-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    background:rgba(108,59,255,0.15);
    border:1px solid rgba(108,59,255,0.35);
    border-radius:50px;
    padding:6px 16px;
    font-size:0.82rem;
    color:var(--accent);
    margin-bottom:20px;
    animation:fadeInDown 0.8s ease;
}
.hero-title{
    font-size:clamp(2.2rem,5vw,3.8rem);
    font-weight:900;
    line-height:1.15;
    margin-bottom:20px;
    animation:fadeInUp 0.8s ease 0.1s both;
}
.hero-title .brand{
    background:linear-gradient(135deg,#6c3bff,#ff4d8d,#00d4ff);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    background-size:200% 200%;
    animation:gradientShift 4s ease infinite;
}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.hero-desc{
    font-size:1.05rem;
    color:var(--text-secondary);
    line-height:1.8;
    margin-bottom:28px;
    animation:fadeInUp 0.8s ease 0.2s both;
}
.hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    margin-bottom:40px;
    animation:fadeInUp 0.8s ease 0.3s both;
}
.hero-stats{
    display:flex;
    gap:32px;
    flex-wrap:wrap;
    animation:fadeInUp 0.8s ease 0.4s both;
}
.hero-stat .num{
    font-size:1.8rem;
    font-weight:800;
    background:linear-gradient(135deg,#6c3bff,#ff4d8d);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    line-height:1.2;
}
.hero-stat .label{
    font-size:0.78rem;
    color:var(--text-muted);
    margin-top:2px;
}

/* ---- 内页Hero ---- */
.inner-hero{
    background:linear-gradient(135deg,#0d0d1a 0%,#1a0533 50%,#0d1b4b 100%);
    padding:48px 0 36px;
    border-bottom:1px solid var(--border);
    text-align:center;
}
.inner-hero h1{
    font-size:clamp(1.6rem,4vw,2.4rem);
    font-weight:800;
    background:linear-gradient(135deg,#6c3bff,#ff4d8d);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    margin-bottom:12px;
}
.inner-hero p{
    color:var(--text-secondary);
    font-size:1rem;
    max-width:600px;
    margin:0 auto;
}

/* ---- 面包屑 ---- */
.breadcrumb{
    display:flex;
    align-items:center;
    gap:6px;
    padding:12px 0;
    font-size:0.82rem;
    color:var(--text-muted);
    border-bottom:1px solid var(--border-light);
    margin-bottom:0;
}
.breadcrumb a{color:var(--text-muted);}
.breadcrumb a:hover{color:var(--primary);}
.breadcrumb .sep{color:var(--border);}
.breadcrumb .current{color:var(--text-secondary);}

/* ---- 区块通用 ---- */
.section-pad{padding:64px 0;}
.section-alt{background:var(--bg-section);}
.section-title{
    font-size:clamp(1.4rem,3vw,2rem);
    font-weight:800;
    text-align:center;
    margin-bottom:12px;
    position:relative;
}
.section-title::after{
    content:'';
    display:block;
    width:48px;
    height:3px;
    background:linear-gradient(90deg,var(--primary),var(--secondary));
    border-radius:2px;
    margin:10px auto 0;
}
.section-subtitle{
    text-align:center;
    color:var(--text-secondary);
    font-size:0.95rem;
    margin-bottom:36px;
    max-width:600px;
    margin-left:auto;
    margin-right:auto;
}

/* ---- 视频卡片网格 ---- */
.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
}
.video-card{
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    overflow:hidden;
    cursor:pointer;
    transition:all var(--transition);
}
.video-card:hover{
    transform:translateY(-6px);
    border-color:var(--primary);
    box-shadow:var(--shadow);
}
.video-thumb{
    position:relative;
    aspect-ratio:16/9;
    overflow:hidden;
    background:var(--bg-section);
}
.video-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 0.5s ease;
}
.video-card:hover .video-thumb img{transform:scale(1.06);}
.video-play-btn{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,0,0,0);
    transition:background var(--transition);
}
.video-card:hover .video-play-btn{background:rgba(0,0,0,0.45);}
.play-icon{
    width:52px;
    height:52px;
    background:rgba(108,59,255,0.9);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    transform:scale(0.7);
    transition:all var(--transition);
}
.play-icon::after{
    content:'';
    border-style:solid;
    border-width:10px 0 10px 18px;
    border-color:transparent transparent transparent #fff;
    margin-left:4px;
}
.video-card:hover .play-icon{opacity:1;transform:scale(1);}
.video-duration{
    position:absolute;
    bottom:8px;
    right:8px;
    background:rgba(0,0,0,0.75);
    color:#fff;
    font-size:0.75rem;
    padding:2px 7px;
    border-radius:4px;
}
.video-badge{
    position:absolute;
    top:8px;
    left:8px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    color:#fff;
    font-size:0.72rem;
    padding:2px 8px;
    border-radius:4px;
    font-weight:600;
}
.video-info{padding:14px;}
.video-title{
    font-size:0.9rem;
    font-weight:600;
    line-height:1.5;
    margin-bottom:8px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    color:var(--text-primary);
}
.video-meta{
    display:flex;
    gap:12px;
    font-size:0.78rem;
    color:var(--text-muted);
    margin-bottom:8px;
}
.video-tags{display:flex;gap:6px;flex-wrap:wrap;}

/* ---- 功能卡片 ---- */
.features-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
}
.feature-card{
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    padding:28px 24px;
    transition:all var(--transition);
}
.feature-card:hover{
    border-color:var(--primary);
    transform:translateY(-4px);
    box-shadow:var(--shadow);
}
.feature-icon{font-size:2.2rem;margin-bottom:14px;}
.feature-title{font-size:1.05rem;font-weight:700;margin-bottom:10px;}
.feature-desc{font-size:0.88rem;color:var(--text-secondary);line-height:1.7;}

/* ---- 社区卡片 ---- */
.community-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:18px;
}
.community-card{
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    padding:24px 20px;
    text-align:center;
    transition:all var(--transition);
}
.community-card:hover{
    border-color:var(--secondary);
    transform:translateY(-4px);
    box-shadow:0 8px 32px rgba(255,77,141,0.18);
}
.community-icon{font-size:2rem;margin-bottom:12px;}
.community-title{font-size:1rem;font-weight:700;margin-bottom:8px;}
.community-desc{font-size:0.85rem;color:var(--text-secondary);line-height:1.7;}

/* ---- 专家卡片 ---- */
.experts-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:20px;
}
.expert-card{
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    padding:24px 20px;
    text-align:center;
    transition:all var(--transition);
}
.expert-card:hover{
    border-color:var(--accent);
    transform:translateY(-4px);
    box-shadow:0 8px 32px rgba(0,212,255,0.15);
}
.expert-avatar{
    width:80px;
    height:80px;
    border-radius:50%;
    object-fit:cover;
    margin:0 auto 14px;
    border:3px solid var(--border);
    transition:border-color var(--transition);
}
.expert-card:hover .expert-avatar{border-color:var(--accent);}
.expert-name{font-size:1.1rem;font-weight:700;margin-bottom:4px;}
.expert-role{font-size:0.82rem;color:var(--primary);margin-bottom:10px;}
.expert-desc{font-size:0.83rem;color:var(--text-secondary);line-height:1.7;margin-bottom:12px;}
.expert-awards{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:14px;}
.expert-actions{display:flex;gap:8px;justify-content:center;}

/* ---- 合作伙伴 ---- */
.partners-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
    gap:16px;
}
.partner-logo{
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:var(--radius-sm);
    padding:20px 16px;
    text-align:center;
    font-size:0.88rem;
    font-weight:600;
    color:var(--text-secondary);
    transition:all var(--transition);
    cursor:default;
}
.partner-logo:hover{
    border-color:var(--primary);
    color:var(--text-primary);
    transform:translateY(-2px);
}

/* ---- 步骤 ---- */
.howto-steps{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
    gap:20px;
    counter-reset:step;
}
.howto-step{
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    padding:24px 20px;
    position:relative;
    counter-increment:step;
    transition:all var(--transition);
}
.howto-step:hover{border-color:var(--primary);transform:translateY(-3px);}
.howto-step::before{
    content:counter(step);
    position:absolute;
    top:-14px;
    left:20px;
    width:28px;
    height:28px;
    background:linear-gradient(135deg,var(--primary),var(--secondary));
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.8rem;
    font-weight:700;
    color:#fff;
    line-height:28px;
    text-align:center;
}
.howto-step-title{font-size:0.95rem;font-weight:700;margin-bottom:8px;margin-top:4px;}
.howto-step-desc{font-size:0.85rem;color:var(--text-secondary);line-height:1.7;}

/* ---- 用户评价 ---- */
.reviews-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:18px;
}
.review-card{
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    padding:22px 20px;
    transition:all var(--transition);
}
.review-card:hover{border-color:var(--primary);transform:translateY(-3px);}
.review-header{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.review-avatar{
    width:42px;
    height:42px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.85rem;
    font-weight:700;
    color:#fff;
    flex-shrink:0;
}
.review-user-info .name{font-size:0.9rem;font-weight:600;}
.review-user-info .date{font-size:0.75rem;color:var(--text-muted);}
.review-stars{color:#ffd700;font-size:0.9rem;margin-bottom:8px;}
.review-text{font-size:0.85rem;color:var(--text-secondary);line-height:1.7;}

/* ---- FAQ ---- */
.faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:10px;}
.faq-item{
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:var(--radius-sm);
    overflow:hidden;
    transition:border-color var(--transition);
}
.faq-item.open,.faq-item:hover{border-color:var(--primary);}
.faq-question{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    cursor:pointer;
    font-size:0.92rem;
    font-weight:600;
    gap:12px;
    user-select:none;
}
.faq-icon{
    font-size:1.2rem;
    color:var(--primary);
    flex-shrink:0;
    transition:transform var(--transition);
    font-weight:400;
}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height 0.4s ease,padding 0.3s ease;
    font-size:0.88rem;
    color:var(--text-secondary);
    line-height:1.8;
    padding:0 20px;
}
.faq-item.open .faq-answer{max-height:300px;padding:0 20px 16px;}

/* ---- 联系我们 ---- */
.contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
}
.contact-card{
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:var(--radius);
    padding:28px 24px;
    transition:all var(--transition);
}
.contact-card:hover{border-color:var(--primary);transform:translateY(-3px);}
.contact-icon{font-size:2rem;margin-bottom:14px;}
.contact-title{font-size:1rem;font-weight:700;margin-bottom:12px;}
.contact-info p{font-size:0.85rem;color:var(--text-secondary);line-height:2;}
.qrcode-img{width:100px;height:100px;border-radius:8px;margin-top:14px;border:1px solid var(--border);}

/* ---- 分页 ---- */
.pagination{
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:36px;
    flex-wrap:wrap;
}
.pagination a,.pagination span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:var(--radius-sm);
    background:var(--bg-card);
    border:1px solid var(--border-light);
    color:var(--text-secondary);
    font-size:0.88rem;
    transition:all var(--transition);
    text-decoration:none;
}
.pagination a:hover,.pagination span.active{
    background:var(--primary);
    border-color:var(--primary);
    color:#fff;
}

/* ---- 底部 ---- */
#site-footer{
    background:var(--bg-section);
    border-top:1px solid var(--border);
    padding:48px 0 0;
}
.footer-main{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:32px;
    padding-bottom:36px;
    border-bottom:1px solid var(--border-light);
}
.footer-brand .logo-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
}
.footer-brand .logo-wrap img{width:36px;height:36px;border-radius:8px;object-fit:contain;}
.footer-brand .brand-name{
    font-size:1.2rem;
    font-weight:800;
    background:linear-gradient(135deg,#6c3bff,#ff4d8d);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}
.footer-brand p{font-size:0.82rem;color:var(--text-muted);line-height:1.8;margin-bottom:8px;}
.footer-qrcodes{display:flex;gap:16px;margin-top:16px;}
.footer-qr img{width:80px;height:80px;border-radius:8px;border:1px solid var(--border);}
.footer-qr p{font-size:0.72rem;color:var(--text-muted);text-align:center;margin-top:4px;}
.footer-col h4{font-size:0.9rem;font-weight:700;margin-bottom:14px;color:var(--text-primary);}
.footer-col ul li{margin-bottom:8px;}
.footer-col ul li a{font-size:0.82rem;color:var(--text-muted);transition:color var(--transition);}
.footer-col ul li a:hover{color:var(--primary);}
.share-bar{
    display:flex;
    align-items:center;
    gap:10px;
    padding:16px 0;
    border-bottom:1px solid var(--border-light);
    flex-wrap:wrap;
}
.share-btn{
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:rgba(255,255,255,0.05);
    border:1px solid var(--border-light);
    border-radius:50px;
    padding:5px 14px;
    font-size:0.8rem;
    color:var(--text-secondary);
    transition:all var(--transition);
    cursor:pointer;
}
.share-btn:hover{background:rgba(108,59,255,0.15);border-color:var(--primary);color:#fff;}
.footer-bottom{
    padding:16px 0;
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:10px;
}
.footer-bottom p{font-size:0.78rem;color:var(--text-muted);}
.footer-bottom a{color:var(--text-muted);}
.footer-bottom a:hover{color:var(--primary);}
.footer-links{display:flex;gap:16px;flex-wrap:wrap;}
.footer-links a{font-size:0.78rem;color:var(--text-muted);}
.footer-links a:hover{color:var(--primary);}

/* ---- 动画 ---- */
.fade-in{opacity:0;transform:translateY(20px);transition:opacity 0.6s ease,transform 0.6s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}
@keyframes fadeInUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:translateY(0)}}

/* ---- 响应式 ---- */
@media(max-width:1024px){
    .footer-main{grid-template-columns:1fr 1fr;}
    .footer-brand{grid-column:1/-1;}
}
@media(max-width:768px){
    :root{--header-h:56px;}
    .main-nav{
        display:none;
        position:fixed;
        top:var(--header-h);
        left:0;
        right:0;
        background:rgba(13,13,26,0.98);
        backdrop-filter:blur(16px);
        flex-direction:column;
        padding:16px;
        border-bottom:1px solid var(--border);
        gap:4px;
        z-index:998;
    }
    .main-nav.open{display:flex;}
    .main-nav a{padding:10px 16px;border-radius:var(--radius-sm);}
    .menu-toggle{display:block;}
    .search-wrap input{width:140px;}
    .search-wrap input:focus{width:160px;}
    .hero-section{min-height:70vh;}
    .hero-stats{gap:20px;}
    .hero-stat .num{font-size:1.4rem;}
    .section-pad{padding:40px 0;}
    .video-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));}
    .footer-main{grid-template-columns:1fr;}
    .footer-brand{grid-column:auto;}
    .footer-bottom{flex-direction:column;align-items:flex-start;}
    .footer-links{gap:10px;}
    div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
}
@media(max-width:480px){
    .container{padding:0 14px;}
    .hero-title{font-size:1.8rem;}
    .hero-actions{flex-direction:column;}
    .hero-actions .btn{width:100%;justify-content:center;}
    .video-grid{grid-template-columns:1fr;}
    .features-grid{grid-template-columns:1fr;}
    .community-grid{grid-template-columns:1fr 1fr;}
    .experts-grid{grid-template-columns:1fr 1fr;}
    .reviews-grid{grid-template-columns:1fr;}
    .howto-steps{grid-template-columns:1fr;}
    .contact-grid{grid-template-columns:1fr;}
    .partners-grid{grid-template-columns:repeat(2,1fr);}
    .header-search-bar{display:none;}
}

/* ---- Footer信任标识 ---- */
.footer-trust-badges{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin:12px 0;
}
.trust-badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    background:rgba(255,255,255,0.04);
    border:1px solid var(--border-light);
    border-radius:4px;
    padding:3px 8px;
    font-size:0.75rem;
    color:var(--text-muted);
}

/* ---- 滚动条 ---- */
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:var(--bg-main);}
::-webkit-scrollbar-thumb{background:rgba(108,59,255,0.4);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--primary);}

/* ---- 选中文字 ---- */
::selection{background:rgba(108,59,255,0.35);color:#fff;}