/* Banner 主容器：全屏宽，最小高度视口，内容垂直居中，纯色背景 #4874cb */
.banner {
    position: relative;
    width: 100%;
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
	/*background-image: url(../images/banner.jpg);*/
	background-position: top;
	background-repeat: no-repeat;
	background-size: 100% 100%;
    background-color: #4874cb; /* 纯色背景，完全符合色值要求 */
    overflow: hidden;
}

/* 可选：极简微光晕，提升文字层次感（完全不影响纯色背景主视觉，且无图片和复杂元素） 
   为了增加一点科技质感但又保持干净，增加一个极淡的渐变光晕层，但不改变纯色本质。
   注意：依旧保持视觉上纯净蓝色，不添加任何图片或纹理。 */
.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.05));
    pointer-events: none;
    z-index: 1;
}

/* 内容容器：位于最上层，确保文字清晰 */
.banner-content {
    position: relative;
    z-index: 10;
    max-width: 1250px;
    width: 100%;
    margin: 0 auto;
    padding: 2rem 1.5rem;
    text-align: center;
    color: white;
    animation: fadeInUp 0.7s ease-out;
}

/* 正标题：干净科技感，白色渐变或者纯白醒目 */
.main-title {
    font-size: 0.48rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 0.4em;
    line-height: 1.2;
    background: linear-gradient(135deg, #FFFFFF, #E0F0FF);
    background-clip: text;
    -webkit-background-clip: text;
    /*color: transparent;*/
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.2);
}

@supports not (background-clip: text) {
    .main-title {
        color: white;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
    }
}

/* 副标题：不加边框，干净半透背景，符合无边框要求 */
.subtitle {
    font-size:0.36rem;
    font-weight: 500;
    margin-bottom: 0.05rem;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    /*background: rgba(0, 0, 0, 0.2);*/
    backdrop-filter: blur(4px);
    padding: 0.1rem 0.5rem;
    border-radius: 60px;
    display: inline-block;
    letter-spacing: 0.4px;
    /* 确保没有任何边框 */
    border: none;
    color: #FFF;
    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
}

.subtitle2 {
    font-size:0.24rem;
    font-weight: 500;
	margin-bottom: 0.3rem;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    /*background: rgba(0, 0, 0, 0.2);*/
    /*backdrop-filter: blur(4px);*/
    padding: 0.1rem 0.5rem;
    border-radius: 60px;
    display: inline-block;
    letter-spacing: 0.4px;
    /* 确保没有任何边框 */
    border: none;
    color: #FFF;
    /*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);*/
}

/* 按钮组 */
.button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.2rem;
    margin-top: 0.3rem;
}

/* 通用按钮样式，搭配 #4874cb 背景的对比色 */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.16rem 0.8rem;
    font-size: 0.18rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 60px;
    transition: all 0.25s ease;
    cursor: pointer;
    font-family: inherit;
    letter-spacing: 0.3px;
    border: none;
}

/* 稿件征集按钮 - 明亮对比，白色主调，突出蓝色背景 */
.btn-primary {
    background: white;
    color: #4874cb;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover {
    transform: translateY(-3px);
    background: #f0f5ff;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
    color: #2b5bcb;
}

/* 成为伙伴按钮 - 半透明玻璃质感，与蓝色背景融合 */
.btn-secondary {
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: white;
}

.btn-secondary:hover {
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(12px);
    border-color: white;
    transform: translateY(-3px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}

.btn:active {
    transform: translateY(1px);
}

/* 移动端适配 */
@media (max-width: 560px) {
	.banner{
		min-height: 40vh;
	}
    .button-group {
        /*flex-direction: column;*/
        align-items: stretch;
        width: 85%;
        margin-left: auto;
        margin-right: auto;
        gap: 0.2rem;
    }
    .btn {
        width: 45%;
        padding: 0.2rem 0.2rem;
        font-size: 0.18rem;
    }
    .banner-content {
        width: 100%;
        padding: 0.2rem 0.2rem;
		margin-top: 0.8rem;
    }
    .subtitle {
        padding: 0.2rem 0.2rem;
        font-size: 0.30rem;
        margin-bottom: 0.2rem;
        backdrop-filter: blur(4px);
        border: none;
    }
	.subtitle2 {
	    padding: 0.2rem 0.2rem;
	    font-size: 0.24rem;
	    margin-bottom: 0.2rem;
		backdrop-filter: blur(4px);
	    border: none;
	}
}

/* 大屏幕适配 */
@media (min-width: 1600px) {
    .btn {
        padding: 0.2rem 1rem;
        font-size: 0.18rem;
    }
}

/* 淡入动画 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 焦点可见性 */
.btn:focus-visible {
    outline: 3px solid #ffd966;
    outline-offset: 3px;
}