body{
margin:0;
font-family:Microsoft YaHei;
background:#020617;
color:white;
background-image:radial-gradient(#334155 1px,transparent 1px);
background-size:40px 40px;
}
header{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-around;
background:#020617dd;
padding:20px;
}
a{color:white;margin:15px;text-decoration:none}
.hero{
height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
h1{
font-size:70px;
background:linear-gradient(90deg,#38bdf8,#2563eb);
color:transparent;
-webkit-background-clip:text;
}
button{
background:#2563eb;
color:white;
padding:15px 40px;
border:0;
border-radius:30px;
}
section{text-align:center;padding:80px}
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
gap:20px;
}
.grid div{
background:#111827;
padding:40px;
border-radius:20px;
}
.price p{
font-size:40px;
color:#60a5fa;
}

.login-btn{
margin-left:15px;
padding:8px 20px;
border-radius:20px;
background:#2563eb;
color:white;
text-decoration:none;
}

.popup{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
align-items:center;
justify-content:center;
z-index:9999;
}

.popup-content{
background:#111827;
padding:40px;
border-radius:20px;
text-align:center;
}

.popup-content a{
display:inline-block;
margin:20px;
padding:12px 30px;
background:#2563eb;
border-radius:20px;
}

.popup-content button{
padding:10px 30px;
background:#374151;
color:white;
border:0;
border-radius:20px;
}


.popup{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
align-items:center;
justify-content:center;
z-index:9999;
}

.popup-content{
background:#111827;
padding:40px;
border-radius:20px;
text-align:center;
color:white;
}

.popup-content a{
display:inline-block;
padding:12px 30px;
background:#2563eb;
color:white;
border-radius:20px;
text-decoration:none;
}

.popup-content button{
margin-top:20px;
padding:10px 30px;
border:0;
border-radius:20px;
}



/* ===========================
   手机端首页适配
   =========================== */

@media screen and (max-width:600px){


/* 顶部导航 */

nav{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:15px;

padding:15px;

}


nav a{

font-size:15px;

padding:6px 12px;

}



/* 公司名称 */

.logo,
header h1{

font-size:22px!important;

text-align:center;

}



/* 首页主标题 */

.hero h1{

font-size:42px!important;

line-height:1.3;

word-break:keep-all;

text-align:center;

padding:0 20px;

}



/* 副标题 */

.hero p{

font-size:18px!important;

line-height:1.6;

padding:0 25px;

}



/* 首页按钮 */

.hero button,
.hero a{

width:80%;

max-width:300px;

margin:auto;

display:block;

}



/* 内容区域 */

section{

padding-left:20px!important;

padding-right:20px!important;

}



/* 防止横向滚动 */

body{

overflow-x:hidden;

}



}



/* ===========================
   手机端适配
   =========================== */

@media screen and (max-width:600px){


body{
    overflow-x:hidden;
}


/* 顶部 */

header{

    padding:20px 10px;

    text-align:center;

}


header h3{

    font-size:20px;

    margin:0 0 15px 0;

}



/* 导航 */

nav{

    display:flex;

    justify-content:center;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

}



nav a{

    font-size:15px;

    padding:8px 15px;

    margin:0;

}



/* 登录注册按钮 */

.login-btn{

    border-radius:20px;

}



/* 首屏 */

.hero{

    padding:60px 20px;

    text-align:center;

}



/* 企业IT技术支持 */

.hero h1{

    font-size:42px!important;

    line-height:1.4;

    letter-spacing:2px;

    word-break:keep-all;

}



/* 业务系统开发 */

.hero h2{

    font-size:22px!important;

    line-height:1.6;

}



/* 描述 */

.hero p{

    font-size:18px;

}



/* 按钮 */

.hero button{

    width:80%;

    max-width:300px;

    height:45px;

    font-size:16px;

}



/* 服务卡片 */

.grid{

    display:block!important;

}


.grid div{

    margin:15px 0;

    padding:20px;

}



/* 标题 */

section h2{

    font-size:28px;

}



/* 联系方式 */

#contact p{

    font-size:16px;

}



/* 底部 */

footer{

    font-size:13px;

    padding:20px 10px;

    text-align:center;

}



}



/* ==========================
   修复手机端首屏重叠
   ========================== */

@media screen and (max-width:600px){


header{

    position:relative;

    z-index:10;

    background:#020617;

}



.hero{

    padding-top:80px !important;

    min-height:700px;

}



.hero h1{

    font-size:38px !important;

    line-height:1.5 !important;

    margin-top:20px;

    margin-bottom:50px;

    color:#2188ff;

}



.hero h2{

    margin-top:0;

    font-size:22px !important;

}



.hero p{

    margin-top:30px;

}



.hero button{

    margin-top:420px !important;

}



}



@media screen and (max-width:600px){


.hero{

    min-height:auto !important;

    padding:60px 20px 80px !important;

}



.hero h1{

    margin:0 0 40px 0 !important;

}



.hero button{

    margin-top:40px !important;

}



}