/* =========================
Theme Variables
========================= */

:root {

--bg-primary: #070b17;
--bg-secondary: #0d1324;

--text-primary: #f4f8ff;
--text-secondary: #a8b4d6;

--accent-primary: #33d6ff;
--accent-secondary: #7a5cff;

--border-soft: rgba(120,154,255,0.15);

--container-width: 1100px;

}


/* =========================
Base
========================= */

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

body{

font-family: Arial, Helvetica, sans-serif;
background:
radial-gradient(circle at top left, rgba(122,92,255,0.18), transparent 35%),
radial-gradient(circle at top right, rgba(51,214,255,0.14), transparent 30%),
linear-gradient(180deg,#050814,#08101f);

color:var(--text-primary);
line-height:1.6;
min-height:100vh;

}


/* =========================
Layout
========================= */

.container{

width:min(100% - 2rem,var(--container-width));
margin:auto;

}


section{

padding:80px 0;

}


/* =========================
Header
========================= */

.site-header{

background:rgba(7,11,23,0.85);
border-bottom:1px solid var(--border-soft);
backdrop-filter:blur(10px);

}

.site-header .container{

display:flex;
justify-content:space-between;
align-items:center;
min-height:70px;

}

.logo{

font-weight:800;
letter-spacing:0.1em;
text-transform:uppercase;
color:white;
text-decoration:none;

}

.main-nav ul{

display:flex;
gap:20px;
list-style:none;

}

.main-nav a{

color:var(--text-secondary);
text-decoration:none;
font-size:0.95rem;

}

.main-nav a:hover{

color:var(--accent-primary);

}


/* =========================
Contact Section
========================= */

.contact-section{

display:flex;
align-items:center;

}

.contact-section h1{

font-size:2.8rem;
margin-bottom:15px;

}

.contact-intro{

color:var(--text-secondary);
margin-bottom:35px;

}


/* =========================
Form Container
========================= */

.form-container{

background:rgba(15,20,40,0.8);
border:1px solid var(--border-soft);
border-radius:14px;
padding:40px;

max-width:600px;

box-shadow:
0 10px 30px rgba(0,0,0,0.35),
0 0 25px rgba(51,214,255,0.15);

}


/* =========================
Form Styling
========================= */

form p{

margin-bottom:20px;

}

label{

display:flex;
flex-direction:column;
gap:8px;
font-size:0.9rem;
color:var(--text-secondary);

}

input,
textarea,
select{

background:#0a1122;
border:1px solid rgba(120,154,255,0.15);
border-radius:8px;

padding:10px 12px;

color:white;
font-size:0.95rem;

outline:none;

}

input:focus,
textarea:focus,
select:focus{

border-color:var(--accent-primary);
box-shadow:0 0 10px rgba(51,214,255,0.3);

}


/* =========================
Button
========================= */

button{

background:linear-gradient(135deg,var(--accent-primary),#76e6ff);

border:none;
border-radius:999px;

padding:12px 24px;

font-weight:700;

cursor:pointer;

transition:all 0.25s ease;

}

button:hover{

transform:translateY(-2px);

box-shadow:0 0 20px rgba(51,214,255,0.4);

}


/* =========================
Footer
========================= */

.site-footer{

border-top:1px solid var(--border-soft);
margin-top:60px;

}

.site-footer .container{

text-align:center;
padding:20px 0;

color:var(--text-secondary);

}


/* =========================
Responsive
========================= */

@media (max-width:700px){

.site-header .container{

flex-direction:column;
gap:12px;

}

.form-container{

padding:25px;

}

.contact-section h1{

font-size:2rem;

}

}