/* ===========================
   NEXUS v1.1 CSS
   Matches index_fixed.html
=========================== */

:root{
 --bg:#050816;
 --surface:#10192b;
 --surface2:#162238;
 --text:#eef4ff;
 --muted:#9fb3cf;
 --accent:#00f5d4;
 --border:rgba(255,255,255,.08);
 --radius:20px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
font-family:Inter,sans-serif;
background:radial-gradient(circle at top left,rgba(0,245,212,.08),transparent 30%),var(--bg);
color:var(--text);
overflow-x:hidden;
line-height:1.7;
}

a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

#progress{
position:fixed;
top:0;
left:0;
height:4px;
width:0;
background:linear-gradient(90deg,#00f5d4,#5aa9ff);
z-index:9999;
}

.nav{
position:fixed;
top:18px;
left:50%;
transform:translateX(-50%);
width:min(1200px,92%);
display:flex;
justify-content:space-between;
align-items:center;
padding:16px 28px;
background:rgba(10,18,32,.72);
backdrop-filter:blur(16px);
border:1px solid var(--border);
border-radius:18px;
z-index:999;
}

.logo{font-size:1.4rem;font-weight:800;color:var(--accent)}

.nav nav{display:flex;gap:26px}
.nav nav a{color:var(--muted);transition:.3s}
.nav nav a:hover{color:var(--accent)}

section{
width:min(1200px,92%);
margin:auto;
padding:110px 0;
}

.hero{
display:grid;
grid-template-columns:1.2fr .8fr;
gap:70px;
align-items:center;
min-height:100vh;
}

.badge{
display:inline-block;
padding:8px 16px;
border-radius:999px;
background:rgba(0,245,212,.1);
color:var(--accent);
}

.hero h1{
font-family:"Space Grotesk",sans-serif;
font-size:clamp(3.2rem,8vw,5.8rem);
line-height:.95;
margin:22px 0;
}

.hero h1 span{color:var(--accent)}
.hero p{color:var(--muted);max-width:620px}

.buttons{
display:flex;
gap:16px;
margin-top:34px;
}

.primary,.secondary{
padding:15px 28px;
border-radius:999px;
font-weight:600;
transition:.3s;
}

.primary{
background:var(--accent);
color:#001c18;
}

.secondary{
border:1px solid var(--border);
}

.primary:hover,.secondary:hover{
transform:translateY(-4px);
}

.avatar{
border-radius:28px;
border:1px solid var(--border);
}

.impact{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}

.impact>div{
background:linear-gradient(180deg,var(--surface),var(--surface2));
padding:28px;
border-radius:var(--radius);
border:1px solid var(--border);
}

.impact h2{
color:var(--accent);
font-size:2.5rem;
}

.project-card{
margin-top:24px;
padding:28px;
background:linear-gradient(180deg,var(--surface),var(--surface2));
border:1px solid var(--border);
border-radius:var(--radius);
transition:.35s;
}

.project-card:hover{
transform:translateY(-8px);
border-color:rgba(0,245,212,.35);
}

.project-card p{
margin-top:14px;
color:var(--muted);
}

.flow{
display:flex;
flex-wrap:wrap;
gap:14px;
align-items:center;
margin-top:24px;
}

.flow div{
padding:14px 20px;
background:var(--surface);
border-radius:14px;
border:1px solid var(--border);
}

#building ul{
padding-left:22px;
margin-top:20px;
}

.contact{
text-align:center;
}

.contact-status{
display:inline-block;
padding:8px 18px;
background:rgba(0,245,212,.1);
color:var(--accent);
border-radius:999px;
}

.contact-sub{
max-width:720px;
margin:18px auto 40px;
color:var(--muted);
}

.contact-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:22px;
}

.contact-card{
display:flex;
align-items:center;
gap:18px;
padding:24px;
background:linear-gradient(180deg,var(--surface),var(--surface2));
border:1px solid var(--border);
border-radius:20px;
transition:.35s;
}

.contact-card:hover{
transform:translateY(-8px);
border-color:rgba(0,245,212,.35);
box-shadow:0 20px 40px rgba(0,245,212,.15);
}

.contact-card span{
font-size:2rem;
}

.contact-card h3{
margin-bottom:4px;
}

.contact-card p{
color:var(--muted);
word-break:break-word;
}

footer{
margin-top:60px;
padding-top:30px;
border-top:1px solid var(--border);
color:var(--muted);
line-height:2;
}

.reveal{
opacity:0;
transform:translateY(30px);
transition:.8s;
}

.reveal.show{
opacity:1;
transform:none;
}

@media(max-width:900px){

.nav nav{display:none}

.hero{
grid-template-columns:1fr;
padding-top:120px;
}

.impact{
grid-template-columns:1fr 1fr;
}

.contact-grid{
grid-template-columns:1fr;
}

section{
padding:80px 0;
}

.hero h1{
font-size:3.4rem;
}

}

@media(max-width:600px){

.impact{
grid-template-columns:1fr;
}

.buttons{
flex-direction:column;
}

.primary,.secondary{
text-align:center;
}

}