body{

margin:0;

font-family:Inter,system-ui;

background:

linear-gradient(
180deg,
#020617,
#0f172a
);

color:white;

}


/* container */

.container{

max-width:1150px;

margin:auto;

padding:30px;

}


/* NAV */

header{

backdrop-filter:blur(20px);

background:#020617cc;

border-bottom:1px solid #1e293b;

}

.nav{

display:flex;

justify-content:space-between;

align-items:center;

}

nav a{

margin-left:20px;

text-decoration:none;

color:white;

opacity:.8;

}

nav a:hover{

opacity:1;

color:#60a5fa;

}


/* HERO */

.hero{

padding:90px 0;

}

.hero-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:50px;

align-items:center;

}

.hero img{

width:100%;

border-radius:20px;

box-shadow:

0 20px 80px rgba(0,0,0,.6);

}

h1{

font-size:48px;

line-height:1.2;

}


/* BUTTON */

.btn{

background:

linear-gradient(
90deg,
#6366f1,
#38bdf8
);

padding:14px 26px;

border-radius:12px;

display:inline-block;

margin-top:20px;

text-decoration:none;

color:white;

border:none;

cursor:pointer;

}


/* SKILLS */

.chips span{

background:#020617;

padding:10px 15px;

margin:5px;

display:inline-block;

border-radius:30px;

border:1px solid #1e293b;

}


/* CARDS */

.cards{

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:25px;

}

.card{

background:

rgba(2,6,23,.7);

backdrop-filter:blur(12px);

border-radius:18px;

padding:25px;

border:

1px solid #1e293b;

transition:.3s;

}

.card:hover{

transform:

translateY(-8px);

border-color:#6366f1;

}


/* FORM */

form{

max-width:500px;

display:flex;

flex-direction:column;

gap:15px;

}

input,textarea{

padding:14px;

border-radius:10px;

border:none;

background:#020617;

color:white;

}


/* FOOTER */

footer{

text-align:center;

padding:25px;

margin-top:50px;

border-top:1px solid #1e293b;

}