/* ==================================================
   JUQING EA
   CONTACT PAGE STYLE
   MATCH STRATEGY / DOWNLOAD SYSTEM UI
================================================== */



/* 页面主体 */

.contact-page{

    width:1200px;

    margin:120px auto 80px;

    color:#ffffff;

}



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


.contact-hero{


    background:#101a33;


    border:1px solid rgba(65,120,190,.35);


    border-radius:20px;


    padding:75px 70px 85px;


    display:flex;


    justify-content:space-between;


    align-items:center;

    margin-bottom:90px;
}



.contact-tag{


    display:inline-block;


    color:#54d8ff;


    letter-spacing:4px;


    font-size:13px;


    padding:8px 22px;


    border-radius:20px;


    border:1px solid rgba(84,216,255,.35);


    background:#0d1830;


}



.contact-hero h1{


    margin-top:30px;


    font-size:52px;


    font-weight:800;


    color:#ffffff;


}



.contact-hero h2{


    margin-top:15px;


    font-size:28px;


    color:#6fbfff;


}



.contact-hero p{


    margin-top:25px;


    width:620px;


    line-height:2;


    font-size:16px;


    color:#91a4c7;


}





/* 右侧图标 */


.contact-circle{

    width:220px;
    height:220px;

    border-radius:50%;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    background:#0d1730;

    border:1px solid rgba(84,216,255,.35);

    box-shadow:
    inset 0 0 40px rgba(84,216,255,.08),
    0 0 40px rgba(84,216,255,.12);

}


.contact-circle div{

    font-size:42px;

    font-weight:800;

    color:#ffffff;

}


.contact-circle span{

    margin-top:10px;

    font-size:12px;

    letter-spacing:3px;

    color:#54d8ff;

}





/* =========================
 联系渠道标题
========================= */


.contact-title{


    text-align:center;


    margin:80px 0 40px;


}



.contact-title h2{


    font-size:32px;


    color:#ffffff;


}



.contact-title p{


    color:#91a4c7;


}






/* =========================
 联系卡片
========================= */


.contact-info-grid{

    display:grid;

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

    gap:18px;

    margin-top:90px;

}




.contact-card{


    background:#101a33;


    border:1px solid rgba(65,120,190,.35);


    border-radius:18px;


    padding:35px 22px;


    text-align:center;


    transition:.25s;


}



.contact-card:hover{

    transform:
    translateY(-10px);

    border-color:#54d8ff;

    background:#142343;

    box-shadow:

0 15px 35px rgba(0,120,255,.22
);

}





.contact-icon{

width:62px;
height:62px;

margin:auto;

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

border-radius:16px;


/* 半透明玻璃底 */
background:
linear-gradient(
145deg,
rgba(84,216,255,.12),
rgba(20,35,70,.55)
);


/* 蓝色细描边 */
border:1px solid rgba(84,216,255,.45);


/* 玻璃内光 */
box-shadow:

inset 0 0 20px rgba(84,216,255,.08),

0 0 15px rgba(0,150,255,.08);


backdrop-filter:blur(10px);


transition:.35s;

}

.contact-icon svg{
     display:block;

    width:30px;

    height:30px;


    fill:none;


    stroke:#66dcff;


    stroke-width:1.6;


    stroke-linecap:round;


    stroke-linejoin:round;


    filter:
    drop-shadow(
    0 0 6px rgba(84,216,255,.5)
    );


    transition:.35s;

}

.contact-card h3{


    margin-top:25px;


    color:#ffffff;


    font-size:20px;


}



.contact-card p{


    margin-top:15px;


    color:#6fbfff;


    font-weight:bold;


}



.contact-card span{


    display:block;


    margin-top:15px;


    color:#91a4c7;


    font-size:14px;


    line-height:1.7;


}




.contact-card button{


    margin-top:25px;


    padding:10px 25px;


    border-radius:8px;


    background:#17284c;


    border:1px solid #3673c9;


    color:#72c9ff;


}





.contact-card button:hover{


    background:#21427a;


}


/* ===== 联系图标 hover 能量效果 ===== */


.
contact-card:hover .contact-icon
{


    border-color:#54d8ff;


    background:

    linear-gradient
(
    145deg
,
    rgba(84,216,255,.25
),
    rgba(20,35,70,.75
)
    );


    box-shadow:


    0 0 25px rgba(84,216,255,.35
),

    inset 0 0 25px rgba(84,216,255,.15
);


}



.
contact-card:hover .contact-icon svg
{


    stroke:#ffffff;


    filter:

    drop-shadow
(
    0 0 12px
 #54d8ff
    );


}




/* =========================
 服务能力
========================= */


.contact-service{


    margin-top:60px;


    padding:45px;


    background:#101a33;


    border:1px solid rgba(65,120,190,.35);


    border-radius:20px;


}




.contact-service h2{


    text-align:center;


    color:#ffffff;


    margin-bottom:40px;


}



.service-list{


    display:grid;


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


    gap:20px;


}



.service-item{


    display:flex;


    gap:20px;


    padding:25px;


    background:#0d1730;


    border:1px solid rgba(65,120,190,.3);


    border-radius:15px;


}



.service-item>div{


    font-size:30px;


}



.service-item h3{


    color:#ffffff;


}



.service-item p{


    color:#91a4c7;


}

.service-item:last-child{


    grid-column:1 / 3;


}


.service-item:last-child::after{


    content:"CONSULT  ·  LICENSE  ·  SUPPORT  ·  PARTNER";


    display:block;


    margin-top:18px;


    padding-top:15px;


    border-top:1px solid rgba(84,216,255,.15);


    color:#54d8ff;


    font-size:12px;


    letter-spacing:2px;


}




/* =========================
 全球服务
========================= */


.global-service{


    margin-top:60px;


    padding:45px;


    display:grid;


    grid-template-columns:1fr 320px 1fr;


    gap:40px;


    background:#101a33;


    border:1px solid rgba(65,120,190,.35);


    border-radius:20px;


}



.global-service h2{


    color:#ffffff;


}



.global-service p,
.global-service li{


    color:#91a4c7;


    line-height:2;


}




.numbers{


    display:flex;


    gap:35px;


    margin-top:30px;


}



.numbers strong{


    display:block;


    font-size:40px;


    color:#54d8ff;


}



.numbers span{


    color:#91a4c7;


}






/* 地图 */

.service-map{


    height:220px;


    background:#0d1730;


    border:1px solid rgba(65,120,190,.3);


    border-radius:18px;


    position:relative;


}



.map-point{


    position:absolute;


    width:12px;


    height:12px;


    border-radius:50%;


    background:#54d8ff;


}





.map-point:nth-child(1){

left:30%;

top:35%;

}



.map-point:nth-child(2){

left:60%;

top:50%;

}



.map-point:nth-child(3){

left:75%;

top:30%;

}







/* =========================
 底部入口
========================= */


.contact-entry{


    margin-top:60px;


    display:grid;


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


    gap:22px;


}



.contact-entry>div{


    padding:35px;


    background:#101a33;


    border:1px solid rgba(65,120,190,.35);


    border-radius:18px;


}



.contact-entry h2{


    color:#ffffff;


}



.contact-entry p{


    color:#91a4c7;


}




.contact-entry button{


    margin-top:20px;


    padding:12px 30px;


    border-radius:8px;


    background:#17284c;


    color:#72c9ff;


    border:1px solid #3673c9;


}





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


@media(max-width:900px){


.contact-page{

width:92%;

}



.contact-hero{

flex-direction:column;

}



.contact-info-grid{

grid-template-columns:1fr;

}



.global-service{

grid-template-columns:1fr;

}



.contact-entry{

grid-template-columns:1fr;

}


}