/* === 以下是我为你定制的美化样式 === */
        .custom-about-section {
            padding: 90px 0; /* 增加上下留白，呼吸感更强 */
            background-color: #0a0a0a; /* 极浅的灰色背景，让卡片显得更立体 */
            font-family: "Microsoft YaHei", sans-serif;
            color: #fff;
        }
        
        .about-hero-img {
            width: 100%;
            max-width: 900px;
            border-radius: 4px; /* 圆角图片 */
            box-shadow: 0 0 35px rgba(255,59,48,0.2); /* 弥散阴影 */
            transition: transform 0.3s ease,box-shadow 0.3s ease/* 动画过渡 */
        }
        
        /* 鼠标悬浮在图片上时微微上浮 */
        .about-hero-img:hover {
            transform: translateY(-8px);
            box-shadow: 0 0 35px rgba(255,59,48,0.8);

        }
        
        .mc-title {
            font-weight: 800;
            color: #fff;
            letter-spacing: 2px;
            text-align: center;
        }
        
        .mc-subtitle {
            font-size: 1.25rem;
            color: #ff3b30; 
            font-weight: 600;
            margin-top: 15px;
            line-height: 1.6;
            text-align: center;
        }
        
        .mc-paragraph {
            font-size: 1.1rem;
            color: #a1a1a6;
            line-height: 1.9;
            text-align: center;
        }
        
        /* 三个特色亮点小卡片的样式 */
        .feature-card {
            background: #1c1c1e;
            border: 1px solid #333;
            border-radius: 4px;
            padding: 30px 20px;
            height: 100%;
            box-shadow: none;
            transition: all 0.3s ease;
            text-align: center;
        }
        
        .feature-card:hover {
            box-shadow: 0 0 30px rgba(255,59,48,0.20);
            transform: translateY(-5px);
            border-color: #ff3b30; /* 鼠标放上去时边框变色 */
        }
        /* 卡片里的标题，比如“死亡不掉落” */
        .feature-card h4 {
            color: #FFFFFF; /* 【新增】标题必须是白色，原CSS没写会被继承成黑色 */
            font-weight: 700;
            margin: 15px 0 10px 0;
        }

        /* 卡片里的小字描述 */
       .feature-card p {
           color: #a1a1a6;/* 【新增】小字用灰白，原CSS没写 */
           font-size: 0.9rem;
           line-height: 1.6;
        }
        .feature-icon {
            font-size: 2.8rem;
            margin-bottom: 15px;
        }
        .hero-content {
    text-align: left; /* 左对齐，比居中更狠 */
    padding-left: 5%;
}

/* 1. 文案样式 */
.hero-title {
    font-size: 3.5rem;
    font-weight: 700;
    color: #eaeaea;
    text-shadow: 0 0 25px rgba(255, 69, 58, 0.5); /* 血色辉光，不要白光 */
    margin-bottom: 25px;
}

.hero-subtitle {
    font-size: 1.1rem ;
    line-height: 1.9;
    color: #8E8E93;
}

.text-blood {
    color: #FF453A; /* 血色警告 */
    font-size: 1.1rem;
    font-weight: 600;
    display: block;
    margin-top: 12px;
}

.hero-subtitle .text-blood:first-of-type {
    margin-bottom: 15px; /* 第一句红字下面给间距 */
}

/* 2. 按钮样式：核心在这里 */
.hero-cta {
    margin-top: 60px; /* 跟文案拉开距离 */
}

/* 幽灵按钮 = 透明背景 + 血色边框 */
.btn-primary {
    display: inline-block;
    padding: 16px 40px;
    background: transparent;  /* 关键：透明背景 */
    border: 2px solid #FF453A; /* 关键：血色边框 */
    color: #FF453A;           /* 关键：文字也是血色 */
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 3px;
    text-decoration: none;
    border-radius: 2px;       /* 直角 */
    transition: all 0.2s ease;
}

.btn-primary:hover {
    background: #FF453A;      /* 悬浮填满血色 */
    color: #000;              /* 文字变黑 */
    box-shadow: 0 0 25px rgba(255, 69, 58, 0.6);
}
/* 幽灵按钮-寒冷颜色，蓝色边框*/
.btn1-primary {
    display: inline-block;
    padding: 16px 40px;
    background: transparent;  /* 关键：透明背景 */
    border: 2px solid #03cef7; /* 关键：血色边框 */
    color: #03cef7;           /* 关键：文字也是血色 */
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 3px;
    text-decoration: none;
    border-radius: 2px;       /* 直角 */
    transition: all 0.2s ease;
}

.btn1-primary:hover {
    background: #03cef7;      /* 悬浮填满血色 */
    color: #000;              /* 文字变黑 */
    box-shadow: 0 0 25px rgba(1, 205, 251, 0.6);
}
.custom-inline-video {
    width: 100%;
    max-width: 900px; /* 与图片保持一致的宽度 */
    border-radius: 4px; /* 圆角边框 */
    box-shadow: 0 0 35px rgba(255,59,48,0.2); /* 核心需求：血色弥散阴影 */
    outline: none; /* 去除点击时的默认发光边框 */
    display: block;
    margin: 0 auto; /* 居中显示 */
    background-color: #000; /* 加载前的纯黑底色 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 如果你也想让视频有悬浮浮动效果，可以加上这段 */
.custom-inline-video:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 35px rgba(255,59,48,0.8);
}
/* --- 新增：悬浮播放按钮样式 --- */
.custom-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    line-height: 80px;
    background-color: rgba(255, 69, 58, 0.8); /* 半透明血色底 */
    color: #fff;
    font-size: 35px;
    text-align: center;
    border-radius: 50%; /* 圆形按钮 */
    cursor: pointer;
    z-index: 10; /* 确保它浮在视频上方 */
    box-shadow: 0 0 20px rgba(255, 69, 58, 0.6);
    transition: all 0.3s ease;
}

/* 鼠标悬浮在播放按钮上的动态效果 */
.custom-play-btn:hover {
    background-color: #FF453A;
    transform: translate(-50%, -50%) scale(1.1); /* 微微放大 */
}

/* 用来隐藏按钮的类名 */
.custom-play-btn.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* 彻底穿透点击，防止变成透明墙 */
}
/* --- 新增：视频切换按钮组样式 --- */
.video-switch-btn {
    margin: 0 10px; /* 按钮之间留出间距 */
    padding: 10px 30px; /* 稍微调小一点内边距，显得更精致 */
    cursor: pointer;
}

/* 当前正在播放的视频，对应的按钮保持血色常亮 */
.video-switch-btn.active-video {
    background: #FF453A;
    color: #000;
    box-shadow: 0 0 25px rgba(255, 69, 58, 0.6);
}
.video-switch-btn.active-video-blue {
    background: #03cef7;
    color: #000;
    box-shadow: 0 0 25px rgba(1, 205, 251, 0.6);
}