/* =================================================
 鲅鱼公主 bayugongzhu.com
 APP CSS V2
================================================= */


/* ---------- RESET ---------- */


*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


html{
    scroll-behavior:smooth;
}


body{

    font-family:
    "PingFang SC",
    "Microsoft YaHei",
    Arial,
    sans-serif;

    background:#f7fafc;

    color:#243746;

    line-height:1.8;

}



a{

    text-decoration:none;

    color:inherit;

}


img{

    max-width:100%;

    display:block;

}


/* ---------- COMMON ---------- */


.container{

    width:1200px;

    max-width:92%;

    margin:auto;

}



.section{

    padding:80px 0;

}



.section h2{

    font-size:36px;

    font-weight:800;

    margin-bottom:12px;

}



.subtitle{

    color:#78909c;

    margin-bottom:40px;

}



.bg-light{

    background:#f3f8fb;

}





/* =================================================
 HEADER
================================================= */


.site-header{


    position:absolute;

    top:0;

    left:0;

    width:100%;

    z-index:999;


    background:
    rgba(0,70,90,.25);


    backdrop-filter:blur(12px);


}



.nav-container{


    height:82px;


    display:flex;

    align-items:center;

    justify-content:space-between;


}



.logo{


    color:white;

    font-size:26px;

    font-weight:900;

}



.logo span{

    color:#ffc44d;

}



.site-header nav{


    display:flex;

    gap:38px;

}



.site-header nav a{


    color:white;

    font-size:16px;

    transition:.3s;


}



.site-header nav a:hover{


    color:#ffc44d;


}



/* =================================================
 HERO
================================================= */


.home-hero{


    min-height:680px;


    background:

    linear-gradient(
    rgba(0,70,100,.55),
    rgba(0,100,140,.65)
    ),

    url('/public/images/hero.jpg')

    center/cover;


    display:flex;

    align-items:center;


}



.home-hero h1{


    color:white;

    font-size:64px;

    line-height:1.2;

    font-weight:900;


}



.home-hero p{


    color:white;

    font-size:22px;

    margin:20px 0 40px;


}



.search-home{


    width:620px;

    height:65px;

    background:white;

    border-radius:40px;

    display:flex;

    overflow:hidden;

}



.search-home input{


    flex:1;

    border:0;

    padding:0 30px;

    font-size:16px;

    outline:none;


}



.search-home button{


    width:130px;

    border:0;

    background:#ffbd3d;

    color:white;

    font-size:18px;


}



/* HERO入口 */


.home-entry{


    margin-top:50px;

    display:grid;

    grid-template-columns:
    repeat(4,1fr);

    gap:25px;


}



.home-entry a{


    height:150px;


    border-radius:22px;


    background:

    rgba(255,255,255,.22);


    border:

    1px solid rgba(255,255,255,.35);


    color:white;


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    font-size:18px;


    transition:.3s;


}



.home-entry a:hover{


    transform:
    translateY(-8px);


    background:white;

    color:#007c99;


}



/* =================================================
 首页卡片
================================================= */


.home-card{


    background:white;


    border-radius:20px;


    padding:30px;


    box-shadow:

    0 10px 35px

    rgba(0,0,0,.06);


}



.home-card h3{


    font-size:22px;

    margin-bottom:15px;


}



.today-grid{


    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:30px;


}



/* 景点 */


.spot-box{


    background:white;

    border-radius:20px;

    overflow:hidden;

    box-shadow:

    0 10px 30px

    rgba(0,0,0,.08);


}



.spot-box h3,

.spot-box p{


    padding:0 25px;


}


.spot-box h3{


    margin-top:20px;


}




/* =================================================
 AI Banner
================================================= */


.ai-home{


    padding:70px 0;


}



.ai-home .container{


    background:

    linear-gradient(
    135deg,
    #0087a5,
    #00bfd8
    );


    border-radius:30px;


    padding:55px;


    color:white;


    display:flex;

    justify-content:space-between;

    align-items:center;


}



.ai-home h2{


    font-size:36px;

}



.ai-home a{


    background:#ffc044;

    padding:16px 40px;

    border-radius:50px;

    color:white;


}




/* =================================================
 FOOTER
================================================= */


.site-footer{


    background:#003b4d;


    color:white;


    margin-top:40px;


}



.footer-container{


    width:1200px;

    max-width:92%;

    margin:auto;


    padding:70px 0;


    display:grid;


    grid-template-columns:
    1.2fr 1fr 1fr;


    gap:60px;


}



.footer-col h3{


    font-size:24px;


    margin-bottom:20px;


}



.footer-col p{


    color:#cfe3ea;

    margin-bottom:12px;


}



.footer-col a{


    display:block;

    color:#d8edf3;

    margin-bottom:12px;

}



.footer-col a:hover{


    color:#ffc044;


}



.footer-bottom{


    border-top:

    1px solid

    rgba(255,255,255,.15);


    text-align:center;


    padding:25px;


    color:#b8d2da;


}



/* =================================================
 MOBILE
================================================= */


@media(max-width:768px){



.nav-container{


    height:auto;

    padding:20px;

    flex-direction:column;


}



.site-header nav{


    margin-top:15px;

    gap:15px;

    flex-wrap:wrap;


}



.home-hero h1{


    font-size:40px;


}



.search-home{


    width:100%;


}



.home-entry{


    grid-template-columns:
    repeat(2,1fr);


}



.today-grid,


.footer-container{


    grid-template-columns:1fr;


}



.ai-home .container{


    flex-direction:column;

    gap:30px;

    text-align:center;


}



}