/* ================================
CONTACT SECTION
================================ */

.contact-section{
padding:100px 60px;
background:#111827;
}

.contact-container{
max-width:800px;
margin:auto;
background:rgba(255,255,255,0.03);
padding:50px;
border-radius:16px;
backdrop-filter:blur(10px);
border:1px solid rgba(255,255,255,0.05);
}

.contact-container h2{
text-align:center;
margin-bottom:40px;
}


/* ================================
FORM FIELDS
================================ */

.form-group{
margin-bottom:25px;
}

input,
textarea{
width:100%;
padding:14px;
background:#1a1d24;
border:1px solid rgba(255,255,255,0.08);
border-radius:8px;
color:#fff;
font-size:1rem;
transition:.3s ease;
}

input:focus,
textarea:focus{
outline:none;
border-color:#ff3c00;
box-shadow:0 0 10px rgba(255,60,0,.2);
}

textarea{
resize:vertical;
min-height:120px;
}


/* ================================
SUBMIT BUTTON
================================ */

.contact-container button{
display:block;
margin:40px auto 0 auto;
width:fit-content;
padding:16px 48px;
font-size:1rem;
letter-spacing:1px;
position:relative;
}


/* ================================
LOADING STATE
================================ */

.contact-container button.loading{
pointer-events:none;
opacity:.8;
}

.contact-container button.loading::after{
content:"";
position:absolute;
right:20px;
top:50%;
width:18px;
height:18px;
border:3px solid rgba(255,255,255,.3);
border-top:3px solid #fff;
border-radius:50%;
transform:translateY(-50%);
animation:spin .8s linear infinite;
}

@keyframes spin{
to{transform:translateY(-50%) rotate(360deg);}
}


/* ================================
FORM MESSAGE
================================ */

.form-message{
text-align:center;
margin-bottom:25px;
padding:15px 20px;
border-radius:8px;
font-weight:500;
max-height:0;
opacity:0;
overflow:hidden;
transition:.4s ease;
}

.form-message.show{
max-height:200px;
opacity:1;
margin-bottom:25px;
}

.form-message.success{
background:rgba(0,150,80,.15);
border:1px solid rgba(0,150,80,.4);
color:#4ade80;
}

.form-message.error{
background:rgba(200,30,30,.15);
border:1px solid rgba(200,30,30,.4);
color:#ff6b6b;
}


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

@media(max-width:768px){

.contact-section{
padding:80px 20px;
}

.contact-container{
padding:30px;
}

.contact-container button{
width:100%;
}

}

/* SUPPORT BLOCK GRID */

.support-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:24px;
margin-top:40px;
}

.support-card{
background:#161e27;
padding:24px;
border-radius:8px;
transition:.25s ease;
}

.support-card h3{
margin-bottom:8px;
}

.support-card p{
color:#9aa6b2;
line-height:1.6;
font-size:14.5px;
}

.support-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.support-card h3::before{
content:"";
display:block;
width:40px;
height:3px;
background:#ff5a1f;
margin-bottom:12px;
}

/* HERO SECTION */

.support-hero{
height:40vh;
min-height:240px;
background:linear-gradient(
rgba(10,15,20,.75),
rgba(10,15,20,.85)
),
url("../hero-led-visual-usa.webp") center/cover no-repeat;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:40px 20px;
}

.support-hero-inner{
max-width:700px;
}

.support-hero h1{
margin-bottom:15px;
}

.support-hero p{
color:#9aa6b2;
}

/* SERVICES */

.support-services{
padding:90px 20px;
background:#0f151c;
}

.support-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:24px;
margin-top:40px;
}

.support-card{
background:#161e27;
padding:24px;
border-radius:8px;
transition:.25s ease;
}

.support-card h3{
margin-bottom:10px;
}

.support-card p{
color:#9aa6b2;
font-size:14.5px;
line-height:1.6;
}

.support-card:hover{
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(0,0,0,.35);
}

.support-card h3::before{
content:"";
display:block;
width:40px;
height:3px;
background:#ff5a1f;
margin-bottom:12px;
}

/* SUPPORT INTRO */

.support-intro{
padding:80px 20px;
background:#11161c;
}

.support-intro p{
max-width:780px;
margin-top:18px;
color:#9aa6b2;
line-height:1.7;
}

/* ================================
SUPPORT CREDIBILITY STRIP
================================ */

.support-credibility{
background:#0f141a;
padding:30px 20px;
}

.support-credibility .credibility-grid{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:20px;
font-weight:600;
color:#d6dde5;
text-align:center;
max-width:1100px;
margin:auto;
}