.contact-hero{

padding:170px 0 120px;

background:#fafaf8;

position:relative;

overflow:hidden;

}

.contact-hero::before{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(rgba(0,0,0,.02) 1px,transparent 1px),

linear-gradient(90deg,rgba(0,0,0,.02) 1px,transparent 1px);

background-size:48px 48px;

opacity:.5;

}

.contact-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:80px;

align-items:center;

position:relative;

z-index:2;

}

.contact-left h1{

font-size:82px;

font-weight:800;

line-height:.92;

letter-spacing:-3px;

margin:30px 0;

}

.contact-left h1 span{

display:block;

background:linear-gradient(90deg,#4F7DFF,#8D63FF,#FF8B4D);

-webkit-background-clip:text;

color:transparent;

}

.contact-left p{

font-size:20px;

line-height:1.9;

max-width:550px;

color:#666;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:18px;

}

.btn-dark{

background:#111;

color:#fff;

padding:18px 34px;

border-radius:14px;

text-decoration:none;

transition:.3s;

}

.btn-light{

border:1px solid #ddd;

padding:18px 34px;

border-radius:14px;

text-decoration:none;

color:#111;

}

.btn-dark:hover{

transform:translateY(-4px);

}
.contact-right{

display:flex;

justify-content:center;

align-items:center;

}

.engineering-circle{

width:520px;

height:520px;

border-radius:50%;

position:relative;

}

.ring{

position:absolute;

border:1px solid #dcdcdc;

border-radius:50%;

left:50%;

top:50%;

transform:translate(-50%,-50%);

}

.ring1{

width:520px;

height:520px;

}

.ring2{

width:360px;

height:360px;

}

.ring3{

width:180px;

height:180px;

}

.center-node{

position:absolute;

left:50%;

top:50%;

width:16px;

height:16px;

background:#FF8B4D;

border-radius:50%;

transform:translate(-50%,-50%);

}

.node{

position:absolute;

width:10px;

height:10px;

background:#4F7DFF;

border-radius:50%;

}

.n1{top:40px;left:250px;}
.n2{right:70px;top:140px;}
.n3{right:90px;bottom:110px;}
.n4{left:90px;bottom:90px;}
.n5{left:40px;top:180px;}
.n6{top:250px;right:30px;}

@media(max-width:992px){

.contact-grid{

grid-template-columns:1fr;

text-align:center;

}

.contact-left p{

margin:auto;

margin-bottom:40px;

}

.hero-buttons{

justify-content:center;

}

.contact-left h1{

font-size:58px;

}

.engineering-circle{

width:380px;

height:380px;

}

.ring1{

width:380px;

height:380px;

}

.ring2{

width:260px;

height:260px;

}

.ring3{

width:140px;

height:140px;

}

}