body{

margin:0;
font-family:Inter;
color:white;

background:
radial-gradient(circle at 20% 30%, #111 0%, transparent 40%),
radial-gradient(circle at 80% 20%, #0f0f0f 0%, transparent 40%),
radial-gradient(circle at 50% 80%, #111 0%, transparent 40%),
linear-gradient(180deg,#050505,#0a0a0a);

}



/* HERO */

.hero{

min-height:95vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:40px;

}

.hero-content{

max-width:750px;

}

.hero h1{

font-size:52px;
line-height:1.2;
margin-bottom:20px;

}

.hero p{

font-size:20px;
color:#bfbfbf;

}

.btn{

display:inline-block;
margin-top:30px;
background:#00ffc8;
color:black;
padding:16px 36px;
border-radius:10px;
text-decoration:none;
font-weight:600;

}



/* ABOUT */

.about{

padding:100px 20px;
text-align:center;
background:#0f0f0f;

}

.about h2{

font-size:36px;
margin-bottom:25px;

}

.about p{

max-width:700px;
margin:auto;
color:#bbb;
line-height:1.7;

}



/* PROJECTS */

.projects{

padding:120px 20px;

}

.section-title{

text-align:center;
font-size:40px;
margin-bottom:60px;

}

.grid{

display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:40px;
max-width:1100px;
margin:auto;

}



/* CARD */

.card{

position:relative;

background:#111;

border-radius:18px;

padding:45px;

overflow:hidden;

text-decoration:none;
color:white;

border:1px solid rgba(255,255,255,0.05);

box-shadow:0 15px 40px rgba(0,0,0,0.8);

transition:0.4s;

}



/* CARD LIGHT */

.card-glow{

position:absolute;

width:250px;
height:250px;

background:radial-gradient(circle,
rgba(0,255,200,0.25),
transparent 70%);

top:-120px;
left:-120px;

filter:blur(40px);

transition:0.5s;

}



/* CARD HOVER */

.card:hover{

transform:translateY(-12px) scale(1.03);

box-shadow:
0 40px 90px rgba(0,0,0,0.95),
0 0 40px rgba(0,255,200,0.25);

border:1px solid rgba(0,255,200,0.5);

}



/* CONTENT */

.card-content{

position:relative;
z-index:2;

}

.card h3{

font-size:26px;
margin-bottom:10px;

}

.card p{

color:#aaa;

}



/* TAG */

.tag{

display:inline-block;

margin-top:20px;

padding:6px 14px;

font-size:13px;

background:rgba(255,255,255,0.06);

border-radius:20px;

color:#ddd;

}



/* WHATSAPP */

.whatsapp{

position:fixed;
bottom:25px;
right:25px;

background:#25d366;

color:white;

padding:14px 20px;

border-radius:40px;

font-weight:600;

text-decoration:none;

box-shadow:0 10px 25px rgba(0,0,0,0.4);

}



/* FOOTER */

footer{

text-align:center;
padding:40px;
color:#777;

}



/* MOBILE */

@media(max-width:768px){

.hero h1{

font-size:34px;

}

.hero p{

font-size:16px;

}

.section-title{

font-size:28px;

}

.about h2{

font-size:28px;

}

}