/*通用部分的样式*/
    *{
        margin:0;
        padding:0;
        box-sizing:border-box;
    }

    body{
        font-family: "Microsoft YaHei",sans-serif;
        background:#0f172a;
        color:white;
    }

/* ===== Hero大图 ===== */
    .hero{
        height:100vh;/*这个是沾满一屏的意思*/
        background:url("/static/img/homepage/hero02.jpg") center/cover no-repeat;
        background-attachment:fixed;/* 固定背景 */
        position:relative;
        overflow:hidden;
        }
    .hero::before{/* 遮罩层（提升质感） */
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(
            to bottom,
            rgba(0,0,0,0.4),
            rgba(0,0,0,0.6)
        );
    }


/* 顶部导航 */

    .navbar{
        position:fixed;
        top:0;
        width:100%;
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:20px 60px;
        background:rgba(0,0,0,0.3);
        transition:0.3s;
        z-index:10;
    }
    .navbar.scrolled{
        background:rgba(0,0,0,0.7);
        backdrop-filter:blur(8px);
        }


    .menu a{
        color:white;
        font-size:14px;
        text-decoration:none;
        margin-left:30px;
        position:relative;
        transition:0.25s;
    }
    .menu a:hover{
        transform:translateY(-2px) scale(1.2);
        }

    .logo{
        font-size:22px;
        font-weight:bold;
    }

    .menu{
        display:flex;
        gap:30px;
    }



/* Hero文字 */
    .hero-content{
        position:absolute;
        top:50%;
        left:50%;
        transform:translate(-50%,-50%);
        text-align:center;
        z-index:2;
    }
/* 标题动画 */
    .title{
        font-size:28px;
        opacity:0;
        transform:translateY(40px);
        animation:fadeUp 1s forwards;
        }
    .subtitle{
        margin:20px 0 40px;
        font-size:16px;
        opacity:0;
        animation:fadeUp 1s 0.4s forwards;
        }
    @keyframes fadeUp{
        to{
        opacity:1;
        transform:translateY(0);
        }
        }

    /* 二维码区域 */
    .hero-info{
        display:flex;
        align-items:center;
        gap:30px;
        justify-content:center;
        margin-top:20px;
        opacity:0;
        animation:fadeUp 1s 0.8s forwards;
        }
    .qrcode{
        width:80px;
        border-radius:10px;
    }
    .hero-text{
        text-align:left;
        line-height:1.8;
        }


/* 播放按钮 */
    .play-btn{
        margin:40px auto 0;
        width:50px;
        height:50px;
        border-radius:50%;
        background:rgba(255,255,255,0.2);
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:18px;
        cursor:pointer;
        backdrop-filter:blur(6px);
        animation:breath 2s infinite;
        }

    @keyframes breath{
        0%{box-shadow:0 0 0 rgba(255,255,255,0.4);}
        50%{box-shadow:0 0 20px rgba(255,255,255,0.7);}
        100%{box-shadow:0 0 0 rgba(255,255,255,0.4);}
        }


/* 视频弹窗 */
    .video-modal{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.8);
        display:none;
        align-items:center;
        justify-content:center;
        z-index:999;
        }
    .video-box{
        position:relative;
        }
    .close{
        position:absolute;
        top:-40px;
        right:0;
        font-size:40px;
        cursor:pointer;
        color:white;
        }

/* 联系我们弹窗样式 */
    .contact-modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.85);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        padding: 20px;
    }

    .contact-box {
        width: 100%;
        max-width: 800px;
        background: #1a2138;
        border-radius: 12px;
        padding: 30px;
        position: relative;
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.1);
    }

    .contact-close {
        position: absolute;
        top: -40px;
        right: 0;
        font-size: 40px;
        cursor: pointer;
        color: white;
        transition: all 0.3s ease;
    }

    .contact-container {
        display: flex;
        gap: 40px;
    }

    .contact-info {
        flex: 1;
        padding: 20px;
        background: rgba(255, 255, 255, 0.05);
        border-radius: 8px;
    }

    .contact-info h3 {
        font-size: 20px;
        margin-bottom: 20px;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding-bottom: 10px;
    }

    .contact-info p {
        margin: 10px 0;
        line-height: 1.6;
        color: rgba(255, 255, 255, 0.8);
    }

    .contact-form {
        flex: 2;
        padding: 20px 0;
    }

    .contact-form h3 {
        font-size: 20px;
        margin-bottom: 20px;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        padding-bottom: 10px;
    }

    .form-group {
        margin-bottom: 20px;
    }

    .form-group label {
        display: block;
        margin-bottom: 8px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 12px 15px;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 6px;
        background: rgba(0, 0, 0, 0.3);
        color: #fff;
        font-size: 14px;
        font-family: "Microsoft YaHei", sans-serif;
        transition: all 0.3s ease;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: rgba(255, 255, 255, 0.5);
        background: rgba(0, 0, 0, 0.4);
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    }

    .form-group textarea {
        resize: vertical;
        min-height: 100px;
    }

    .submit-btn {
        width: 100%;
        padding: 12px;
        background: linear-gradient(to right, #2563eb, #3b82f6);
        border: none;
        border-radius: 6px;
        color: #fff;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .submit-btn:hover {
        background: linear-gradient(to right, #1d4ed8, #2563eb);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(37, 99, 235, 0.3);
    }

    .submit-status {
        margin-top: 15px;
        text-align: center;
        font-size: 14px;
        display: none;
    }

    /* 响应式适配 */
    @media (max-width: 768px) {
        .contact-container {
            flex-direction: column;
            gap: 20px;
        }
        .contact-box {
            padding: 20px;
        }
        .contact-close {
            top: -30px;
            font-size: 30px;
        }
    }



/* ===== 服务区 ===== */

    .services {
      width: 100%;
      padding: 0px 0; /* 上下间距，可调整 */
      background-color: #000; /* 建议配深色背景，突出毛玻璃效果 */
    }
    /* 卡片网格容器：确保每个卡片占满一行 */
    .service-grid {
        width: 100%; /* 整体宽度，居中显示 */
        margin: 0 auto;
        display: flex;
        flex-direction: column; /* 纵向排列，每个卡片占一行 */
        gap: 0px; /* 卡片之间的间距，可调整 */
    }


/* 毛玻璃卡片 */

    .card {
      /* 尺寸：撑满一行，高度适配长条形图片 */
      width: 100%;
      height: 220px; /* 长条形高度，可根据图片调整 */
      /* 定位：为子元素做基准 */
      position: relative;
      /* 毛玻璃核心 */
      background: rgba(255, 255, 255, 0.08); /* 半透明白色，毛玻璃基底 */
      backdrop-filter: blur(8px); /* 默认模糊，原神风格 */
      -webkit-backdrop-filter: blur(8px); /* 兼容webkit内核浏览器 */
      /* 边框：默认透明，hover显白色 */
      border: 1px solid transparent;
      /* 溢出隐藏：避免放大/图片超出卡片 */
      overflow: hidden;
      /* 过渡动画：所有变化都顺滑 */
      transition: all 0.6s ease;
      /* 鼠标样式 */
      cursor: pointer;
    }

    /* 卡片背景图：独立图层，默认模糊 */
    .card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* 使用CSS变量绑定背景图，每个卡片独立 */
      background-image: var(--card-bg);
      background-size: cover; /* 铺满卡片，保持比例 */
      background-position: center; /* 图片居中 */
      filter: blur(4px); /* 默认模糊，叠加毛玻璃更有层次 */
      transition: filter 0.6s ease;
      /* 层级：在毛玻璃下方 */
      z-index: -1;
    }
    /* Hover交互：清晰+放大+白边框 */
    .card:hover {
      /* 毛玻璃清晰 */
      backdrop-filter: blur(0);
      -webkit-backdrop-filter: blur(0);
      /* 轻微阴影，强化层次感 */
      box-shadow: 0 0 25px rgba(255, 255, 255, 0.1);
    }
    /* Hover时背景图清晰 */
    .card:hover::before {
      filter: blur(0);
    }
    /* 文字容器：居中显示，层级高于背景 */
    .card-text {
      position: absolute;
      top: 50%;
      left: 30%;
      transform: translate(-50%, -50%);
      text-align: center;
      z-index: 1; /* 确保文字在最上层 */
      width: 100%;
      padding: 0 20px; /* 左右内边距，避免文字贴边 */
    }

    /* text1：默认显示，原神风格文字样式 */
    .text1 {
      color: #fff;
      font-size: 28px; /* 主文字大小，可调整 */
      font-weight: 600;
      text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); /* 文字阴影，增强可读性 */
      transition: all 0.6s ease;
    }

    /* text2：默认隐藏，hover显示 */
    .text2 {
      color: #fff;
      font-size: 28px; /* 副文字大小，可调整 */
      opacity: 0; /* 默认透明 */
      transform: translateY(20px); /* 默认下移，增加动画感 */
      margin-top: 15px; /* 和text1的间距 */
      transition: all 0.8s ease; /* 动画稍慢，更自然 */
      text-shadow: 0 1px 8px rgba(0, 0, 0, 0.7);
    }

    /* Hover时显示text2 */
    .card:hover .text2 {
      opacity: 1;
      transform: translateY(0); /* 归位 */
    }

    /* 响应式适配：小屏幕调整卡片高度和文字大小 */
    @media (max-width: 768px) {
      .card {
        height: 200px; /* 小屏降低卡片高度 */
      }
      .text1 {
        font-size: 22px;
      }
      .text2 {
        font-size: 16px;
      }
    }


/* ===== 页脚 ===== */

    .footer {
      /* 去掉固定height，用padding自适应内容，避免内容溢出 */
      padding: 30px 0;
      text-align: center;
      background: #020617; /* 保留深色背景，和原神风格统一 */
      font-size: 12px;
      color: rgba(255, 255, 255, 0.7); /* 文字半透，更有质感 */
      border-top: 1px solid rgba(255, 255, 255, 0.1); /* 顶部细边框，分隔内容区 */
    }

    /* 容器：控制内边距+适配宽度，和首页卡片网格对齐 */
    .footer-container {
      width: 100%;
      max-width: 100%;
      padding: 0 15px; /* 和服务板块的内边距一致，视觉对齐 */
      margin: 0 auto;
    }

    /* 文字统一样式：增加行高，提升可读性 */
    .footer-text {
      line-height: 1.8; /* 行高拉大，避免文字挤在一起 */
      margin: 4px 0; /* 统一上下间距 */
      transition: color 0.3s ease; /* 可选：鼠标 hover 文字变亮 */
    }

    /* 可选优化：鼠标移到文字上变亮，增加轻微交互 */
    .footer-text:hover {
      color: rgba(255, 255, 255, 0.9);
    }

    /* 响应式适配：小屏幕字体稍小，行高调整 */
    @media (max-width: 768px) {
      .footer {
        font-size: 12px;
        padding: 20px 0;
      }
      .footer-text {
        line-height: 1.6;
      }
    }