/* ==================== 自定义字体 ==================== */
/* 引入自定义像素字体 UranusPixel，用于标题和Logo显示，增强游戏风格 */
@font-face {
    font-family: 'UranusPixel';         /* 字体名称，后续可通过 font-family 引用 */
    src: url('drawable/uranus_pixel_11px.ttf') format('truetype');  /* 字体文件路径及格式 */
}

/* ==================== 全局重置样式 ==================== */
/* 使用通配符选择器重置所有元素的默认样式，确保跨浏览器一致性 */
* {
    margin: 0;                    /* 清除默认外边距 */
    padding: 0;                   /* 清除默认内边距 */
    box-sizing: border-box;        /* 采用边框盒模型，padding和border不影响元素总宽度 */
}

/* ==================== 页面基础样式 ==================== */
/* 定义整个页面的基础样式，包括背景、字体、文字颜色 */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  /* 首选Segoe UI字体，兼容各平台 */
    background: #0a0a0a url('drawable/bg.png') no-repeat center center fixed;  /* 深色背景+背景图，居中固定 */
    background-size: cover;       /* 背景图覆盖整个容器 */
    min-height: 100vh;            /* 最小高度为视口高度，确保页面至少占满一屏 */
    color: #e0e0e0;              /* 默认文字颜色为浅灰色 */
}

/* ==================== 开场动画 ==================== */
/* 核心动画 */
@keyframes fadeUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* 所有子元素依次出现 */
.container > * {
    opacity: 0;
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 浮动导航栏不受开场动画影响 */
.container > header.floating-header {
    opacity: 1;
    animation: none;
}

/* 用 nth-child 控制延迟 */
.container > *:nth-child(1) { animation-delay: 0.05s; }
.container > *:nth-child(2) { animation-delay: 0.15s; }
.container > *:nth-child(3) { animation-delay: 0.25s; }
.container > *:nth-child(4) { animation-delay: 0.35s; }
.container > *:nth-child(5) { animation-delay: 0.45s; }
.container > *:nth-child(6) { animation-delay: 0.55s; }
.container > *:nth-child(7) { animation-delay: 0.65s; }
.container > *:nth-child(8) { animation-delay: 0.75s; }

/* 关于页面卡片依次从下往上出现 */
.about-card {
    opacity: 0;
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.about-card:nth-child(1) { animation-delay: 0.3s; }
.about-card:nth-child(2) { animation-delay: 0.4s; }
.about-card:nth-child(3) { animation-delay: 0.5s; }
.about-card:nth-child(4) { animation-delay: 0.6s; }
.about-card:nth-child(5) { animation-delay: 0.7s; }

/* ==================== 容器样式 ==================== */
/* 页面主容器，控制内容最大宽度和内外边距，使内容居中显示 */
.container {
    max-width: 1400px;            /* 内容最大宽度1400px，防止过宽屏幕内容太松散 */
    margin: 0 auto;               /* 水平居中 */
    padding: 40px 60px;           /* 上下40px，左右60px内边距 */
}

/* ==================== 头部浮动岛导航栏 ==================== */
/* 固定在顶部的浮动导航栏容器，不含毛玻璃效果 */
header.floating-header {
    position: fixed;
    top: 30px;
    left: 50px;
    right: 20px;
    z-index: 1000;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: none;
    border: none;
    border-radius: 0;
    padding: 0;
    margin-bottom: 0;
}

/* 浮动导航栏激活时，容器顶部留出补偿空间 */
.floating-nav-active {
    padding-top: 90px;
}

/* 浮动导航栏中导航链接单独毛玻璃胶囊 */
header.floating-header .nav-links {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: hsla(0, 0%, 100%, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    padding: 15px 25px;
}

/* ==================== 头部导航 ==================== */
/* 页面顶部区域，包含Logo和导航链接，采用Flex布局实现两端对齐 */
header {
    display: flex;                /* Flex布局 */
    justify-content: space-between;  /* Logo左对齐，导航右对齐 */
    align-items: center;          /* 垂直居中 */
    padding: 20px 0;             /* 上下20px内边距 */
    margin-bottom: 80px;          /* 底部80px外边距，与下方内容区域分隔 */
}

/* Logo区域（图标+文字），Flex布局使图标和文字水平排列 */
.logo-area {
    display: flex;                /* Flex布局 */
    align-items: center;          /* 垂直居中 */
    gap: 15px;                   /* 图标与文字间距15px */
}

/* Logo图标样式 */
.logo {
    width: 50px;                  /* 宽度50px */
    height: 50px;                 /* 高度50px */
    border-radius: 12px;          /* 12px圆角，使图标呈圆角矩形 */
}

/* Logo文字样式 */
.logo-text {
    font-size: 24px;              /* 字体大小24px */
    font-weight: 700;            /* 字体粗细700（粗体） */
    color: #ffffff;              /* 白色文字 */
    text-decoration: none;        /* 去掉下划线 */
    font-family: 'UranusPixel', 'Segoe UI', sans-serif;  /* 使用像素字体，降级为Segoe UI */
}

/* 导航链接容器，Flex布局使链接水平排列 */
.nav-links {
    display: flex;                /* Flex布局 */
    gap: 40px;                   /* 链接之间间距40px */
}

/* 导航链接样式 */
.nav-links a {
    color: #b0b0b0;              /* 灰色文字 */
    text-decoration: none;        /* 去掉下划线 */
    font-size: 16px;              /* 字体大小16px */
    transition: color 0.3s ease;  /* 颜色变化动画0.3秒 */
}

/* 导航链接悬停效果 */
.nav-links a:hover {
    color: #ffffff;              /* 悬停时变为白色 */
}

/* ==================== 关于页面卡片样式 ==================== */
/* 卡片容器，Flex布局横向排列 */
.about-cards-container {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
}

/* 单个卡片基础样式 */
.about-card {
    width: 180px;
    height: 600px;
    border-radius: 12px;
    padding: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: left;
    flex-shrink: 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 卡片悬停效果 */
.about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* 卡片图标区域 */
.about-card .card-icon {
    width: 100%;
    flex: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* 卡片图标大小 */
.about-card .card-icon svg {
    width: 32px;
    height: 32px;
    color: rgba(255, 255, 255, 0.9);
}

/* 卡片图标链接 */
.about-card .card-icon a {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 卡片分割线 */
.about-card hr {
    width: 100%;
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    margin: 10px 0;
}

/* 卡片内容区域 */
.about-card .card-content {
    width: 100%;
    flex: 3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    color: #ffffff;
    font-size: 12px;
    overflow: hidden;
}

/* 卡片标题 */
.about-card .card-content h3 {
    font-size: 14px;
    font-weight: 600;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

/* 卡片副标题 */
.about-card .card-content .card-subtitle {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px 0;
}

/* 卡片正文 */
.about-card .card-content p {
    margin: 5px 0;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.8);
}

/* 卡片按钮 */
.about-card .card-content .read-btn {
    color: #ffffff;
    text-decoration: underline;
    cursor: pointer;
    font-size: 12px;
    margin: 5px 0;
}

/* QQ群号显示 */
.about-card .card-content .qq-group-number {
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;
    margin: 10px 0;
}

/* 卡片注意事项标题 */
.about-card .card-content .card-notice {
    font-weight: 600;
    margin-top: 10px;
    color: #ffffff;
}

/* 卡片列表 */
.about-card .card-content .card-list {
    margin: 5px 0 0 15px;
    padding: 0;
    list-style: disc;
}

.about-card .card-content .card-list li {
    margin: 3px 0;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.7);
}

/* 卡片按钮组 */
.about-card .card-content .card-buttons {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

/* 卡片内按钮 */
.about-card .card-content .card-btn {
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 11px;
    text-decoration: none;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.3s ease;
}

.about-card .card-content .card-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* 卡片背景色 */
.card-qq {
    background: linear-gradient(135deg, #4d84b5 0%, #16a2a9 100%);
    text-decoration: none;
}

.card-bilibili {
    background: linear-gradient(135deg, #8c5aba 0%, #db7aaa 100%);
    text-decoration: none;
}

.card-github {
    background: linear-gradient(135deg, #45b16d 0%, #388554 100%);
    text-decoration: none;
}

.card-donation {
    background: linear-gradient(135deg, #8771ba 0%, #7153a5 100%);
    text-decoration: none;
}

.card-email {
    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);
    text-decoration: none;
}

/* ==================== 主视觉区域 (Hero) ==================== */
/* 语言切换链接 */
.lang-link {
    display: flex;                /* Flex布局 */
    align-items: center;          /* 垂直居中 */
    gap: 6px;                    /* 图标与文字间距6px */
}

/* 语言图标 */
.lang-icon {
    width: 20px;                  /* 宽度20px */
    height: 20px;                 /* 高度20px */
}

/* ==================== GitHub链接样式 ==================== */
/* 导航栏中的GitHub链接 */
.github-link {
    display: flex;                /* Flex布局 */
    align-items: center;          /* 垂直居中 */
    gap: 6px;                    /* 图标与文字间距6px */
}

/* GitHub图标 */
.github-icon {
    width: 20px;                  /* 宽度20px */
    height: 20px;                 /* 高度20px */
}

/* ==================== 占位区域 ==================== */
/* 占位元素 */
.spacer {
    height: 10vh;
}

/* ==================== 主视觉区域 (Hero) ==================== */
/* 页面首屏核心展示区域，包含标题、描述和应用截图，Flex布局实现左右分栏 */
.hero-section {
    display: flex;                /* Flex布局 */
    justify-content: space-between;  /* 文字和图片左右分布 */
    align-items: center;          /* 垂直居中对齐 */
    min-height: calc(100vh - 200px);  /* 最小高度为视口高度减200px（Header+Footer高度） */
    gap: 60px;                   /* 文字与图片间距60px */
}

/* 文字内容区域 */
.hero-text {
    flex: 1;                     /* 占据剩余空间的1份 */
    max-width: 600px;            /* 最大宽度600px，防止文字过长 */
}

/* 主标题样式 */
.hero-title {
    font-size: 90px;              /* 超大字体90px，视觉冲击力强 */
    font-weight: 700;            /* 粗体 */
    color: #ffffff;              /* 白色 */
    line-height: 1.1;            /* 行高1.1，紧凑排版 */
    margin-bottom: 20px;          /* 底部20px间距 */
    font-family: 'UranusPixel', 'Segoe UI', sans-serif;  /* 像素字体 */
    text-shadow:                 /* 多层文字阴影，营造发光效果 */
        0 0 20px rgba(75, 75, 75, 0.8),
        0 0 40px rgba(188, 188, 188, 0.6),
        0 0 60px rgba(255, 255, 255, 0.4),
        0 0 80px rgba(255, 255, 255, 0.3),
        0 0 120px rgba(255, 255, 255, 0.2);
}

/* 副标题样式 */
.hero-subtitle {
    font-size: 36px;              /* 字体大小36px */
    font-weight: 400;            /* 正常粗细 */
    color: #8b8b8b;              /* 浅灰色 */
    margin-bottom: 30px;          /* 底部30px间距 */
    display: flex;                /* Flex布局 */
    align-items: center;          /* 垂直居中 */
    gap: 12px;                   /* 图标与文字间距12px */
}

/* Minecraft图标 */
.mc-icon {
    width: 32px;                  /* 宽度32px */
    height: 32px;                 /* 高度32px */
    border-radius: 4px;           /* 4px圆角 */
}

/* 描述文字样式 */
.hero-desc {
    font-size: 18px;              /* 字体大小18px */
    color: #b0b0b0;              /* 灰色 */
    line-height: 1.8;            /* 行高1.8，提高可读性 */
    margin-bottom: 40px;          /* 底部40px间距 */
    max-width: 450px;            /* 最大宽度450px */
}

/* 按钮组容器，Flex布局使按钮水平排列 */
.cta-buttons {
    display: flex;                /* Flex布局 */
    gap: 20px;                   /* 按钮间距20px */
    flex-wrap: wrap;              /* 空间不足时换行 */
}

/* ==================== 按钮基础样式 ==================== */
/* 通用按钮样式，定义按钮的基础外观 */
.btn {
    padding: 16px 32px;           /* 上下16px，左右32px内边距 */
    border: none;                 /* 无边框 */
    border-radius: 12px;          /* 12px圆角 */
    font-size: 16px;              /* 字体大小16px */
    font-weight: 600;            /* 半粗体 */
    cursor: pointer;              /* 鼠标指针变为手型 */
    transition: all 0.3s ease;    /* 所有属性变化动画0.3秒 */
    text-decoration: none;        /* 去掉下划线（链接按钮） */
    display: inline-block;        /* 行内块级元素 */
}

/* 主按钮（绿色），用于主要操作 */
.btn-primary {
    background: #4ade80;         /* 绿色背景 */
    color: #0a0a0a;              /* 深灰色文字 */
    font-weight: 700;            /* 粗体 */
}

/* 主按钮悬停效果 */
.btn-primary:hover {
    background: #22c55e;         /* 背景变深 */
    transform: translateY(-2px);  /* 向上移动2px */
    box-shadow: 0 8px 25px rgba(74, 222, 128, 0.3);  /* 添加绿色阴影 */
}

/* 次要按钮（半透明），用于次要操作 */
.btn-secondary {
    background: rgba(255, 255, 255, 0.1);  /* 白色10%透明度背景 */
    backdrop-filter: blur(12px);  /* 背景模糊效果（毛玻璃） */
    -webkit-backdrop-filter: blur(12px);  /* Safari浏览器兼容 */
    color: white;                /* 白色文字 */
    border: 1px solid rgba(255, 255, 255, 0.2);  /* 白色20%透明度边框 */
}

/* 次要按钮悬停效果 */
.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.15);  /* 透明度增加到15% */
    transform: translateY(-2px);  /* 向上移动2px */
}

/* ==================== 占位区域 ==================== */
/* 占位元素 */
.spacer {
    height: 15vh;
}

/* ==================== Hero截图区域 ==================== */
/* 应用截图容器，展示手机和平板端效果 */
.hero-images {
    flex: 0.7;                   /* 占据剩余空间的0.7份 */
    max-width: 580px;            /* 最大宽度580px */
    display: flex;                /* Flex布局 */
    flex-direction: row;          /* 水平排列 */
    gap: 15px;                   /* 图片间距15px */
    align-items: flex-end;        /* 底部对齐，形成错落感 */
}

/* 图片卡片基础样式 */
.image-card {
    background: transparent;      /* 透明背景 */
    border-radius: 12px;          /* 12px圆角 */
    padding: 0;                   /* 无内边距 */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);  /* 深色阴影 */
    border: none;                 /* 无边框 */
    overflow: hidden;             /* 隐藏溢出内容 */
    flex-shrink: 0;               /* 不缩小 */
}

/* 图片卡片内图片 */
.image-card img {
    width: auto;                  /* 宽度自适应 */
    height: 300px;               /* 高度300px */
    border-radius: 12px;          /* 12px圆角 */
    display: block;               /* 块级元素 */
    object-fit: contain;          /* 保持比例，不拉伸 */
    background: rgba(10, 10, 10, 0.9);  /* 深灰色背景 */
}

/* 手机截图高度 */
.image-card.phone img {
    height: 400px;               /* 手机截图更高，400px */
}

/* 平板截图高度 */
.image-card.tablet img {
    height: 280px;               /* 平板截图略矮，280px */
}

/* 图片悬停遮罩，覆盖在图片上方 */
.image-overlay {
    position: absolute;           /* 绝对定位 */
    top: 0;                      /* 顶部对齐 */
    left: 0;                     /* 左侧对齐 */
    width: 100%;                 /* 宽度100% */
    height: 100%;                /* 高度100% */
    background: rgba(0, 0, 0, 0.7);  /* 黑色70%透明度 */
    display: flex;                /* Flex布局 */
    align-items: center;          /* 垂直居中 */
    justify-content: center;      /* 水平居中 */
    opacity: 0;                  /* 默认透明 */
    transition: opacity 0.3s ease;  /* 透明度变化动画0.3秒 */
    border-radius: 12px;          /* 12px圆角 */
}

/* 图片遮罩标签文字 */
.image-label {
    color: #4ade80;              /* 绿色文字 */
    font-size: 18px;              /* 字体大小18px */
    font-weight: 600;            /* 半粗体 */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);  /* 文字阴影 */
}

/* 图片卡片定位（需设为relative才能让overlay绝对定位） */
.image-card {
    position: relative;           /* 相对定位 */
}

/* 图片卡片悬停显示遮罩 */
.image-card:hover .image-overlay {
    opacity: 1;                  /* 悬停时显示遮罩 */
}

/* ==================== 页脚样式 ==================== */
/* 全屏分界线 */
.divider-wrapper {
    margin: 40px 0;
    position: relative;
    overflow: visible;
}

.divider-wrapper hr {
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

/* 分界线以下全部毛玻璃效果 */
.footer-container  {
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: -50vw;
    width: 100vw;
    max-width: 100vw;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding:0px 50px;
    box-sizing: border-box;
}

/* 页脚内容区域 */
.footer-content {
    max-width: 1400px;           /* 内容最大宽度1400px */
    margin: 0 auto;              /* 水平居中 */
    padding: 0 60px;             /* 左右60px内边距 */
}

/* 页脚布局 - 三列 */
.footer-row {
    display: flex;               /* Flex布局 */
    justify-content: space-between;  /* 三列均匀分布 */
    align-items: flex-start;     /* 顶部对齐 */
    gap: 40px;                  /* 列间距40px */
}

/* 页脚左侧 - Logo区域 */
.footer-left {
    flex: 0.5;                    /* 占据1份空间 */
    min-width: 200px;           /* 最小宽度200px */
}

/* 页脚Logo文字 */
.footer-logo {
    font-size: 50px;             /* 字体大小50px */
    font-weight: 700;           /* 粗体 */
    font-family: 'UranusPixel', 'Segoe UI', sans-serif;  /* 像素字体 */
    color: #ffffff;             /* 白色文字 */
    margin-bottom: 8px;          /* 底部8px间距 */
}

/* 页脚Logo中的.top */
.footer-logo .domain {
    color: #4ade80;             /* 绿色文字 */
}

/* 页脚副标题 */
.footer-slogan {
    color: #8b8b8b;             /* 浅灰色文字 */
    font-size: 14px;             /* 字体大小14px */
}

/* 页脚中间 - 导航链接 */
.footer-center {
    flex: 1;                    /* 占据1份空间 */
    display: flex;               /* Flex布局 */
    justify-content: center;     /* 水平居中 */
    gap: 60px;                  /* 列间距60px */
}

/* 页脚导航列 */
.footer-column {
    display: flex;               /* Flex布局 */
    flex-direction: column;      /* 垂直排列 */
    gap: 12px;                  /* 链接间距12px */
}

/* 页脚导航链接 */
.footer-column a {
    color: #b0b0b0;             /* 灰色文字 */
    text-decoration: none;       /* 去掉下划线 */
    font-size: 14px;             /* 字体大小14px */
    transition: color 0.3s ease; /* 颜色变化动画0.3秒 */
    display: flex;               /* Flex布局 */
    align-items: center;         /* 垂直居中 */
    gap: 8px;                   /* 图标与文字间距8px */
}

/* 页脚导航链接悬停效果 */
.footer-column a:hover {
    color: #ffffff;             /* 悬停时变白色 */
}

/* 页脚图标 */
.footer-icon {
    width: 18px;                 /* 宽度18px */
    height: 18px;                /* 高度18px */
}

/* 底端细线 */
.footer-line {
    padding-top: 20px;           /* 顶部40px内边距 */
    margin-top: 20px;            /* 顶部40px外边距 */
    border-top: 1px solid rgba(255, 255, 255, 0.05);  /* 顶部细边框分隔 */
}

/* ==================== GitHub链接样式 ==================== */
/* 导航栏中的GitHub链接 */
.github-link {
    display: flex;                /* Flex布局 */
    align-items: center;          /* 垂直居中 */
    gap: 6px;                    /* 图标与文字间距6px */
}

/* GitHub图标 */
.github-icon {
    width: 20px;                  /* 宽度20px */
    height: 20px;                 /* 高度20px */
}

/* GitHub链接悬停图标变色 */
.github-link:hover .github-icon {
    color: #ffffff;              /* 悬停时图标变白色 */
}

/* ==================== 语言切换样式 ==================== */
/* 语言切换链接 */
.lang-link {
    display: flex;                /* Flex布局 */
    align-items: center;          /* 垂直居中 */
    gap: 6px;                    /* 图标与文字间距6px */
}

/* 语言图标 */
.lang-icon {
    width: 20px;                  /* 宽度20px */
    height: 20px;                 /* 高度20px */
}

/* ==================== 固定下载按钮 ==================== */
/* 页面底部固定显示的毛玻璃下载按钮，方便用户随时点击下载 */
.fixed-download-btn {
    position: fixed;              /* 固定定位，不随滚动移动 */
    bottom: 30px;                /* 距底部30px */
    right: 30px;                 /* 距右边缘30px */
    padding: 20px 30px;           /* 上下20px，左右30px内边距 */
    background: hsla(0, 0%, 100%, 0.1);  /* 白色1%透明度背景 */
    backdrop-filter: blur(10px);  /* 背景模糊效果（毛玻璃） */
    -webkit-backdrop-filter: blur(12px);  /* Safari浏览器兼容 */
    border: 1px solid rgba(74, 222, 128, 0.4);  /* 绿色40%透明度边框 */
    color: #ffffff;              /* 白色文字 */
    font-size: 20px;              /* 字体大小20px */
    font-weight: 700;            /* 粗体 */
    text-decoration: none;        /* 去掉下划线 */
    border-radius: 240px;         /* 240px超大圆角，呈胶囊状 */
    z-index: 1000;               /* 层级1000，确保显示在内容上方 */
    transition: all 0.3s ease;    /* 所有属性变化动画0.3秒 */
}

/* 固定下载按钮悬停效果 */
.fixed-download-btn:hover {
    background: rgba(74, 222, 128, 0.35);  /* 背景透明度增加到35% */
    transform: translateY(-2px);  /* 向上移动2px */
    box-shadow: 0 6px 25px rgba(74, 222, 128, 0.3);  /* 阴影增强 */
    border-color: rgba(74, 222, 128, 0.6);  /* 边框透明度增加到60% */
}

/* ==================== 响应式适配 (平板) ==================== */
/* 屏幕宽度 <= 1024px 时的样式，针对平板设备 */
@media (max-width: 1024px) {
    .hero-section {
        flex-direction: column;   /* Hero区域改为垂直排列 */
        text-align: center;       /* 文字居中 */
    }

    .hero-title {
        font-size: 60px;          /* 标题字体缩小到60px */
    }

    .hero-subtitle {
        font-size: 24px;          /* 副标题字体缩小到24px */
    }

    .hero-desc {
        margin: 0 auto 40px;      /* 描述文字居中，底部40px间距 */
    }

    .cta-buttons {
        justify-content: center;  /* 按钮组居中 */
    }
}

/* ==================== 移动端侧边栏 ==================== */
/* 导航按钮（默认隐藏，移动端显示） */
.menu-toggle {
    display: none;                /* 默认隐藏 */
}

/* 侧边栏遮罩层 */
.sidebar-overlay {
    display: none;                /* 默认隐藏 */
    position: fixed;              /* 固定定位 */
    top: 0;                       /* 顶部对齐 */
    left: 0;                      /* 左侧对齐 */
    width: 100%;                  /* 宽度100% */
    height: 100%;                 /* 高度100% */
    background: rgba(0, 0, 0, 0.5);  /* 黑色50%透明度 */
    z-index: 999;                 /* 层级999 */
}

/* 侧边栏遮罩层激活状态 */
.sidebar-overlay.active {
    display: block;               /* 显示遮罩 */
}

/* 侧边栏容器 */
.sidebar {
    position: fixed;              /* 固定定位 */
    top: 0;                       /* 顶部对齐 */
    right: 0;                     /* 右侧对齐 */
    width: 250px;                 /* 宽度250px */
    height: 100%;                 /* 高度100% */
    background: rgba(20, 20, 20, 0);  /* 深灰色90%透明度背景 */
    backdrop-filter: blur(20px);  /* 毛玻璃模糊效果 */
    -webkit-backdrop-filter: blur(20px);  /* Safari兼容 */
    border-left: 1px solid rgba(255, 255, 255, 0.05);  /* 左侧边框 */
    transform: translateX(100%);  /* 默认向右隐藏 */
    transition: transform 0.3s ease;  /* 向左划开动画0.3秒 */
    z-index: 1000;               /* 层级1000 */
    padding: 80px 30px 30px;     /* 顶部80px，左右30px内边距 */
    display: flex;                /* Flex布局 */
    flex-direction: column;       /* 垂直排列 */
    gap: 20px;                   /* 项间距20px */
}

/* 侧边栏激活状态 */
.sidebar.active {
    transform: translateX(0);     /* 向左划入显示 */
}

/* 侧边栏链接样式 */
.sidebar a {
    color: #b0b0b0;              /* 灰色文字 */
    text-decoration: none;        /* 去掉下划线 */
    font-size: 18px;              /* 字体大小18px */
    padding: 12px 0;             /* 上下12px内边距 */
    display: flex;                /* Flex布局 */
    align-items: center;          /* 垂直居中 */
    gap: 10px;                   /* 图标与文字间距10px */
    transition: color 0.3s ease;  /* 颜色过渡动画 */
}

/* 侧边栏链接悬停效果 */
.sidebar a:hover {
    color: #ffffff;              /* 悬停时变白色 */
}

/* 侧边栏图标 */
.sidebar a img {
    width: 20px;                 /* 宽度20px */
    height: 20px;                /* 高度20px */
}

.sidebar a svg {
    width: 20px;                 /* 宽度20px */
    height: 20px;                /* 高度20px */
}

/* ==================== 响应式适配 (手机) ==================== */
/* 屏幕宽度 <= 768px 时的样式，针对手机设备 */
@media (max-width: 768px) {
    .container {
        padding: 20px;           /* 容器内边距缩小到20px */
    }

    header {
        margin-bottom: 40px;      /* 头部底部间距缩小到40px */
    }

    /* 隐藏整个导航栏 */
    .nav-links {
        display: none;
    }

    /* 移动端恢复header原始样式，不固定不毛玻璃 */
    header.floating-header {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        z-index: auto;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: none;
        border: none;
        border-radius: 0;
        padding: 20px 0;
        margin-bottom: 40px;
    }

    /* 移动端恢复nav-links原始样式，无胶囊 */
    header.floating-header .nav-links {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: none;
        border: none;
        border-radius: 0;
        padding: 0;
        display: none;
    }

    /* 移动端取消容器顶部补偿 */
    .floating-nav-active {
        padding-top: 0;
    }

    /* 显示导航按钮 */
    .menu-toggle {
        display: flex;            /* Flex布局 */
        position: fixed;          /* 固定定位 */
        top: 50px;                /* 距顶部50px */
        right: 50px;              /* 距右边50px */
        z-index: 1001;            /* 层级最高 */
        cursor: pointer;          /* 鼠标指针变为手型 */
    }

    .menu-toggle svg {
        width: 28px;              /* 图标宽度28px */
        height: 28px;             /* 图标高度28px */
        color: #b0b0b0;           /* 灰色图标 */
        transition: color 0.3s ease;  /* 颜色过渡动画 */
    }

    .menu-toggle:hover svg {
        color: #ffffff;           /* 悬停时变白色 */
    }

    .hero-title {
        font-size: 50px;          /* 标题字体缩小到50px */
    }

    .hero-subtitle {
        display: none;             /* 移动端隐藏副标题 */
    }

    .section-title {
        font-size: 32px;          /* 区域标题字体缩小到32px */
    }

    /* 关于页面卡片移动端适配 */
    .about-cards-container {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .about-card {
        width: 100%;
        max-width: 300px;
        height: auto;
        min-height: 200px;
        flex-direction: row;
        align-items: stretch;
    }

    .about-card .card-icon {
        flex: 0 0 60px;
        height: 60px;
        justify-content: center;
        align-items: flex-start;
        padding-top: 10px;
    }

    .about-card .card-icon svg {
        width: 24px;
        height: 24px;
    }

    .about-card hr {
        display: none;
    }

    .about-card .card-content {
        flex: 1;
        padding-left: 15px;
        justify-content: center;
    }

    .about-card .card-content h3 {
        font-size: 16px;
        margin-bottom: 5px;
    }

    .about-card .card-content p {
        font-size: 11px;
        margin: 3px 0;
    }

    .about-card .card-content .card-list {
        margin: 5px 0 0 10px;
    }

    .about-card .card-content .card-list li {
        font-size: 10px;
    }

    .about-card .card-content .qq-group-number {
        font-size: 16px;
    }
}

/* ==================== 固定下载按钮 (手机) ==================== */
/* 手机端固定下载按钮适配 */
@media (max-width: 768px) {
    .fixed-download-btn {
        padding: 16px 20px;       /* 内边距缩小 */
        font-size: 16px;          /* 字体缩小到16px */
        bottom: 15px;             /* 距底部15px */
        border-radius: 20px;       /* 圆角缩小到20px */
        white-space: nowrap;       /* 禁止文本自动换行 */
    }

/* ==================== 图片卡片布局 (手机) ==================== */
/* Hero截图区域竖向排列 */
    .hero-images {
        align-items: center;      /* 水平居中 */
        gap: 15px;                /* 图片间距15px */
        max-width: 100%;          /* 宽度适应屏幕 */
        margin-top: 30px;         /* 与上方文字保持间距 */
        align-items: flex-end;    /* 底部对齐，形成错落感 */
    }

/* 图片卡片宽度适应屏幕 */
    .image-card {
        width: 100%;              /* 宽度100% */
        max-width: 300px;         /* 最大宽度300px */
        flex-shrink: 1;           /* 允许缩小 */
    }

/* 图片卡片内图片响应式 */
    .image-card img {
        width: 100%;              /* 宽度100% */
        height: auto;             /* 高度自适应 */
        max-height: 400px;        /* 最大高度400px */
    }

/* 手机截图高度适配 */
    .image-card.phone img {
        height: auto;             /* 高度自适应 */
        max-height: 450px;        /* 最大高度450px */
    }

/* 平板截图高度适配 */
    .image-card.tablet img {
        height: auto;             /* 高度自适应 */
        max-height: 350px;        /* 最大高度350px */
    }

    /* 页脚移动端响应式 */
    .footer-row {
        flex-direction: column;   /* 垂直排列 */
        gap: 20px;               /* 间距缩小 */
    }

    .footer-center {
        flex-direction: column;   /* 垂直排列 */
        gap: 20px;               /* 间距缩小 */
        align-items: flex-start;  /* 左对齐 */
    }

    .footer-logo {
        font-size: 32px;          /* Logo字体缩小 */
    }

    .footer-content {
        padding: 0 20px;         /* 内边距缩小 */
    }

    .footer-container {
        padding: 0px 20px;       /* 容器内边距缩小 */
    }
}