body{
	background: linear-gradient(to bottom, #EDF6FC, #EEF7FF);
	/* 为内容创建空间，防止被navbar完全遮挡 */
    /*padding-top: 60px;*/
    /* body本身需要相对定位，以便其伪元素能正确工作 */
    position: relative;
    margin:0;
}

/* 使用::before伪元素来创建模糊遮罩层 */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px; /* 与navbar高度一致 */

    /* 应用高斯模糊效果 */
    backdrop-filter: blur(6px); /* 关键属性：对背后的内容进行模糊 */
    /* 注意：backdrop-filter的兼容性需要考虑，现代浏览器支持良好 */

    /* 确保伪元素在内容下方但在body背景之上 */
    z-index: 999;
}

/* 导航栏基础样式 */
.navbar {
    /* 固定定位，始终位于视口顶部 */
    position: fixed;
    top: 0;
    left: 0;
    right: 0; /* 确保占据整个宽度 */

    /* 恒定高度 */
    height: 60px; /* 你可以根据需要调整这个值 */

    /* 半透明背景 */
    background-color: rgba(233, 233, 245, 0.65);
    /* 或者使用黑色半透明 */
    /* background-color: rgba(0, 0, 0, 0.3); */

    /* 添加一点内边距，让内容不紧贴边缘 */
    padding: 0 20px;

    /* 设置z-index，确保它在其他内容之上 */
    z-index: 1000;

    /* 可选：添加阴影，增强层次感 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);

    /* 平滑过渡效果，例如背景色变化 */
    transition: background-color 0.3s ease;
    align-items: center;
    display: grid;
    place-items: center;
}
.navbar ul {
    list-style-type: none; /* 移除默认的列表样式 */
    padding: 0;
    display: flex; /* 让li水平排列 */
    gap: 20px; /* li之间的间距 */
    align-items: center;
}
.navbar li {
	display: flex;
    align-items: center;
	padding:0px 12px;
	position: relative;
}
.navbar a {
    text-decoration: none;
    padding:4px 16px;
    color: #666; /* 链接颜色 */
    font-weight: bold;
    transition: color 0.3s ease; /* 平滑的颜色过渡效果 */
    cursor: pointer;
}
.navbar a:hover {
    color: #000; /* 当鼠标悬停时改变颜色 */
    background-color: rgba(255, 255, 255, 0.5);
    /* 背景圆角 */
    border-radius: 20px;
}

/* ========== 汉堡按钮样式 ========== */
.menu-toggle {
    display: none; /* 默认隐藏，小屏时显示 */
    font-size: 24px;
    color: #666;
    background: none;
    border: none;
    cursor: pointer;
    /*padding: 10px;*/
    z-index: 1001;
}

/* ========== 响应式 ========== */
@media (max-width: 768px) {
    .menu-toggle {
        display: block; /* 小屏显示汉堡按钮 */
    }

    .nav-menu {
        position: absolute;
        top: 45px; /* 紧贴 navbar 下方 */
        left: 0;
        right: 0;
        background-color: rgba(233, 233, 245, 0.9);
        flex-direction: column;
        gap: 0;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease-in-out;
        box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    }

    .nav-menu.active {
        max-height: 240px; /* 足够容纳所有菜单项 */
        align-items: center;
        display: grid;
        place-items: center;
    }
    .nav-menu ul{
        width: 100%;
        text-align: center;
    }

    .nav-menu li {
        width: 100%;
        text-align: center;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
    }

    .nav-menu a {
        width: 100%;
        text-align: center;
        font-size: 16px;
    }

    .nav-menu a:hover {
        background-color: rgba(255, 255, 255, 0.3);
        border-radius: 0;
    }
}





#team-cards-section {
    padding: 20px 20px 80px 20px;
    max-width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

/* 团队介绍 */
#team-cards-section .card {
    background: white;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
    width: 25%;
    text-align: center;
    padding: 8px 24px 24px 24px;
    transition: all 0.3s ease;
    flex: 1 1 calc(25% - 20px); /* 适配响应式 */
}

#team-cards-section .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

#team-cards-section .card h2 {
    font-size: 1.6rem;
    color: #1a1a1a;
    margin-bottom: 16px;
    font-weight: 600;
}

#team-cards-section .card p {
    font-size: 1rem;
    color: #333;
    line-height: 1.7;
    margin: 0;
    text-align:left;
}

/* 响应式：小屏幕下堆叠 */
@media (max-width: 768px) {
    #team-cards-section {
        flex-direction: column;
        align-items: center;
    }
    #team-cards-section .card {
        width: 90%;
        max-width: 400px;
    }
}

/* 展示区容器 */
#show-case-section {
    padding: 20px 20px 80px 20px;
    max-width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

/* 卡片基础：固定高度，基于视口 */
#show-case-section .card {
    position: relative;
    width: calc(33.3% - 20px);
    height: 30vh;
    min-height: 480px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* 确保内容垂直布局 */
}

#show-case-section .card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

@media (max-width: 768px) {
    #show-case-section {
        flex-direction: column;
        align-items: center;
    }
    #show-case-section .card {
        width: 90%;
        max-width: 400px;
    }
}

/* 图片：占据上部 62% */
#show-case-section .card img {
    height: 75%; /* 相对于 card 高度 */
    width: 100%;
    object-fit: cover; /* 不拉伸，居中裁剪 */
    display: block;
    padding: 0;
}

/* 模糊蒙版：覆盖图片区域 */
#show-case-section .card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 75%; /* 与 img 高度一致 */
    background: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 1;
}

#show-case-section .card:hover .overlay {
    opacity: 1;
    visibility: visible;
}

/* 查看详情按钮 */
#show-case-section .card .view-details {
    padding: 12px 28px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transform: scale(0.8) translateY(20px);
    opacity: 0;
}

#show-case-section .card:hover .view-details {
    opacity: 1;
    transform: scale(1) translateY(0);
}

#show-case-section .card .view-details:hover {
    background: rgba(0, 0, 0, 0.9);
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

/* 内容区：文字部分 */
#show-case-section .card .content {
    margin-top: auto; /* 关键：将 content 推向容器底部 */
    padding: 0;
    background: #fff;
    height:25%;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px; /* h3 和 p 之间间距 */
    z-index: 2;
}

#show-case-section .card .content h3 {
    font-size: 1.4rem;
    color: #1a1a1a;
    font-weight: 600;
    line-height: 1.3;
    margin:4px 8px 8px 8px;
}

#show-case-section .card .content p {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin:0 12px 0 12px;
}

/*案例预览弹窗*/
#preview-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}
#preview-modal.active {
    display: flex;
}

/* 弹窗内容区 */
.modal-content {
    background: white;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    border-radius: 12px;
    overflow: hidden; /* 外层不溢出 */
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 图片、标题、内容都放进一个可滚动的容器 */
.modal-scroll-area {
    overflow-y: auto;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* 图片 */
.modal-image {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

/* 标题 */
.modal-title {
    margin: 16px 20px 8px;
    font-size: 1.5em;
    color: #333;
}

/* 内容区域 */
.modal-body {
    padding: 0 20px 20px;
    font-size: 1em;
    color: #555;
    line-height: 1.6;
}

/* 关闭按钮 */
.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ccc;
    cursor: pointer;
    z-index: 10;
    color: #555;
    font-weight: bold;
    transition: all 0.2s;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 30px;
    padding-bottom:5px;
}
.close-btn:hover {
    background: #f44336;
    color: white;
    border-color: #f44336;
}

/* 滚动条样式（可选：美化滚动条） */
.modal-scroll-area::-webkit-scrollbar {
    width: 8px;
}

.modal-scroll-area::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.modal-scroll-area::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}

.modal-scroll-area::-webkit-scrollbar-thumb:hover {
    background: #999;
}


/* 工具资源区 */
#tools-section {
    padding: 20px 20px 80px 20px;
    max-width: 80%;
    margin: 0 auto;
}

/*#tools-section h2 {
    text-align: center;
    margin-bottom: 30px;
    color: #333;
}*/

/* 分类导航 */
/* 工具区头部：导航 + 搜索 并排 */
.tools-header {
    display: flex;
    justify-content: space-between; /* 左右分开 */
    align-items: center;           /* 垂直居中 */
    gap: 20px;                     /* 两者间距 */
    margin-top:0;
    margin-bottom: 20px;
    margin-left:10%;
    flex-wrap: wrap;               /* 小屏幕时换行 */
    width: 80%;
}

/* 分类导航容器 */
.category-nav {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;                /* 占据剩余空间 */
    flex-wrap: wrap;
}

/* 搜索框容器 */
.tools-search {
    flex: 0 0 auto;                /* 不伸缩，保持自身宽度 */
    text-align: right;             /* 内部内容靠右对齐 */
}

#tool-search-input {
    padding: 10px 16px;
    width: 240px;                  /* 固定宽度 */
    max-width: 100%;               /* 不能超过父容器 */
    border: 2px solid #ddd;
    border-radius: 30px;
    font-size: 1em;
    outline: none;
    transition: border-color 0.3s;
}

#tool-search-input:focus {
    border-color: #007cba;
}

#tool-search-input::placeholder {
    color: #aaa;
}

.category-btn {
    padding: 10px 20px;
    background: #f0f0f0;
    border: 2px solid #ddd;
    border-radius: 30px;
    font-size: 1em;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.category-btn.active {
    background: #007cba;
    color: white;
    border-color: #007cba;
}

.category-btn:hover:not(.active) {
    background: #e0e0e0;
    border-color: #bbb;
}

/* 小屏幕适配：堆叠显示 */
@media (max-width: 600px) {
    .tools-header {
        flex-direction: column;
        align-items: stretch;      /* 拉伸子元素 */
        gap: 15px;
    }

    .category-nav {
        justify-content: center;   /* 居中 */
    }

    .tools-search {
        text-align: center;
    }

    #tool-search-input {
        width: 90%;                 /* 占满大部分 */
        margin: 0 auto;             /* 居中 */
    }
}

/* 工具卡片网格 */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 20px;
    padding: 0;
}

.tool-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.tool-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.tool-card a {
    text-decoration: none;
    color: inherit;
}

/* 工具图标 */
.tool-icon {
    width: 80px;
    height: 80px;
    margin: 15px auto 10px;
    border-radius: 10px;
    display: block;
}

/* 工具名称 */
.tool-name {
    text-align: center;
    font-weight: bold;
    color: #333;
    margin: 0 0 5px;
    font-size: 1.1em;
}

/* 工具描述 */
.tool-desc {
    text-align: center;
    color: #666;
    font-size: 0.9em;
    padding: 0 15px 15px;
    line-height: 1.5;
}

/* 联系我们 */
#contact-section {
    padding: 20px 20px 80px 20px;
    max-width: 75%;
    margin: 0 auto;
    display: flex;
    gap: 30px;
    align-items: stretch;
}

/* 小屏幕下改为垂直堆叠 */
@media (max-width: 768px) {
    #contact-section {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* 左侧联系信息区域 */
.contact-info {
            flex: 1;
            min-width: 280px;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        }

        .contact-info h3 {
            color: #333;
            margin-top: 0;
            margin-bottom: 15px;
            font-size: 1.5em;
            border-bottom: 2px solid #007cba;
            padding-bottom: 5px;
        }

        .contact-info ul {
            list-style: none;
            padding: 0;
            margin: 0;
            font-size: 1em;
            line-height: 1.8;
        }

        .contact-info li {
            display: flex;
            align-items: center;
            margin-bottom: 1em; /* 控制列表项之间的垂直间距 */
        }

        .contact-info li:last-child {
            margin-bottom: 0; /* 最后一项不加底部间距 */
        }

        .contact-info img {
            width: 24px;
            height: 24px;
            margin-right: 8px;
            object-fit: contain;
            align-self: center; /* 确保图标垂直居中 */
        }

        .contact-info strong {
            color: #333;
            min-width: 50px;
        }

        .contact-info a {
            color: #007cba;
            text-decoration: none;
        }

        .contact-info a:hover {
            text-decoration: underline;
            cursor: pointer;
        }

        /* 二维码弹窗样式 */
        .qr-modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            justify-content: center;
            align-items: center;
            z-index: 1000;
            backdrop-filter: blur(3px);
        }

        .qr-modal-content {
            background: white;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            max-width: 280px;
            text-align: center;
        }

        .qr-modal-content img {
            width: 180px;
            height: 180px;
            margin: 10px auto;
            display: block;
        }

        .qr-modal-content p {
            margin: 0 0 10px;
            color: #333;
            font-size: 1em;
        }

        .qr-close {
            color: #aaa;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 5px;
        }

        .qr-close:hover {
            color: #000;
        }

/* 表单区域保持原有样式，但适配新布局 */
.contact-form {
    flex: 2;
    min-width: 300px;
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.form-group {
    flex: 1 1 200px;
    display: flex;
    flex-direction: column;
}

.form-group.full-width {
    flex: 1 1 100%;
}

label {
    font-weight: bold;
    margin-bottom: 6px;
    color: #333;
    font-size: 0.95em;
}

input[type="text"],
input[type="tel"],
input[type="email"],
select,
textarea {
    padding: 10px;
    border: 2px solid #ddd;
    border-radius: 6px;
    font-size: 1em;
    transition: border-color 0.3s;
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: #007cba;
}

textarea {
    resize: vertical;
}

/* 错误提示 */
.error-message {
    color: #d32f2f;
    font-size: 0.9em;
    margin: 10px 0;
    min-height: 20px;
}

/* 提交按钮 */
.submit-btn {
    padding: 12px 30px;
    background: #007cba;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 1em;
    cursor: pointer;
    transition: background 0.3s;
}

.submit-btn:hover {
    background: #005a87;
}

/* 小屏幕适配：表单内部字段也变为垂直排列 */
@media (max-width: 600px) {
    .form-row {
        flex-direction: column;
    }

    .form-group {
        flex: 1 1 100%;
    }
}