/* ===== GLOBAL RESET ===== */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter',sans-serif;
scroll-behavior:smooth;
}

/* ===== BACKGROUND ===== */
body{
color:#e2e8f0;
background: radial-gradient(circle at 20% 30%, #1e293b, #020617);
min-height:100vh;
overflow-x:hidden;
}

/* ===== NAVBAR ===== */
header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
position:fixed;
width:100%;
top:0;
z-index:100;
background:rgba(255,255,255,0.03);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,0.05);
}

header h2{
font-weight:600;
color:#fff;
letter-spacing:1px;
font-size:18px;
}

nav{
display:flex;
align-items:center;
}

nav a{
margin-left:25px;
text-decoration:none;
color:#94a3b8;
font-size:14px;
transition:0.3s;
}

nav a:hover{
color:#fff;
}

/* ===== HERO ===== */
#home{
height:100vh;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
padding:0 10%;
}

.hero-text h1{
  font-size:52px;
  font-weight:700;
  line-height:1.2;
  background: linear-gradient(90deg, #6366f1, #22d3ee);

  /* Standard property */
  background-clip: text;

  /* Vendor prefix for Chrome/Safari */
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
}
.hero-text p{
margin-top:20px;
color:#94a3b8;
font-size:18px;
}

/* ===== BUTTONS ===== */
.btn{
display:inline-block;
margin-top:30px;
padding:12px 26px;
border-radius:10px;
background: linear-gradient(135deg,#6366f1,#22d3ee);
color:#fff;
text-decoration:none;
font-weight:500;
box-shadow:0 0 20px rgba(99,102,241,0.4);
transition:0.3s;
}

.btn:hover{
transform:translateY(-2px);
box-shadow:0 0 30px rgba(99,102,241,0.6);
}

.btn-outline{
background:transparent;
border:1px solid rgba(255,255,255,0.2);
color:#e2e8f0;
box-shadow:none;
}

.btn-outline:hover{
background:rgba(255,255,255,0.05);
}

/* ===== SECTION ===== */
section{
padding:100px 10%;
position:relative;
z-index:1;
}

h2{
font-size:30px;
margin-bottom:25px;
}

/* ===== GLASS CARDS ===== */
.card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
backdrop-filter:blur(10px);
padding:25px;
border-radius:16px;
transition:0.3s;
}

.card:hover{
transform:translateY(-6px);
border-color:#6366f1;
box-shadow:0 0 30px rgba(99,102,241,0.2);
}

/* ===== GRID ===== */
.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:25px;
}

/* ===== PROJECT CARDS ===== */
.project{
background:rgba(255,255,255,0.04);
padding:20px;
border-radius:16px;
border:1px solid rgba(255,255,255,0.08);
transition:0.3s;
}

.project:hover{
transform:translateY(-8px) scale(1.02);
box-shadow:0 0 40px rgba(34,211,238,0.2);
}

.project h3{
color:#fff;
margin-bottom:10px;
}

.project p{
color:#94a3b8;
font-size:14px;
}

/* ===== SKILLS ===== */
.skills span{
display:inline-block;
padding:8px 14px;
margin:6px;
border-radius:20px;
font-size:13px;
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.1);
transition:0.3s;
}

.skills span:hover{
background:linear-gradient(135deg,#6366f1,#22d3ee);
color:#fff;
}

/* ===== CONTACT FORM ===== */
input, textarea{
width:100%;
padding:14px;
margin-top:12px;
border-radius:10px;
border:1px solid rgba(255,255,255,0.1);
background:rgba(0,0,0,0.5);
color:#fff;
font-size:14px;
}

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

input:focus, textarea:focus{
outline:none;
border-color:#6366f1;
box-shadow:0 0 10px rgba(99,102,241,0.3);
}

/* ===== BUTTON ===== */
button{
margin-top:15px;
width:100%;
padding:14px;
border:none;
border-radius:10px;
background: linear-gradient(135deg,#6366f1,#22d3ee);
color:#fff;
cursor:pointer;
font-weight:500;
transition:0.3s;
}

button:hover{
transform:translateY(-2px);
box-shadow:0 0 20px rgba(99,102,241,0.5);
}

/* ===== FOOTER ===== */
footer{
text-align:center;
padding:30px;
background:rgba(255,255,255,0.02);
color:#94a3b8;
margin-top:40px;
border-top:1px solid rgba(255,255,255,0.05);
}

/* ===== ANIMATION ===== */
.hidden{
opacity:0;
transform:translateY(40px);
transition:all 0.8s ease;
}

.show{
opacity:1;
transform:translateY(0);
}

/* ===== CURSOR GLOW (UPDATED) ===== */
.cursor-glow{
position:fixed;
width:40px;
height:40px;
background: radial-gradient(circle, rgba(99,102,241,0.4), transparent 70%);
pointer-events:none;
border-radius:50%;
transform:translate(-50%, -50%);
z-index:0;
filter: blur(14px);
mix-blend-mode: screen;
}

/* ===== HERO FIX ===== */
.hero-text{
position:relative;
z-index:2;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width:768px){

header{
padding:15px 5%;
}

nav{
display:none;
}

#home{
padding:0 5%;
}

.hero-text h1{
font-size:32px;
}

.hero-text p{
font-size:15px;
}

section{
padding:70px 5%;
}

h2{
font-size:24px;
}

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

.btn{
padding:10px 20px;
font-size:14px;
}

input, textarea{
font-size:13px;
padding:12px;
}

button{
padding:12px;
}

.cursor-glow{
width:30px;
height:30px;
}
}