:root{
      --bg:#0f1724;
      --card:#0b1220;
      --muted:#9aa4b2;
      --accent:#7c3aed;
      --glass: rgba(255,255,255,0.04);
      --radius:14px;
      color-scheme: dark;
      color:#e6eef8;
      background:linear-gradient(180deg,var(--bg),#071024);
}
*{
	box-sizing:border-box
}
html,body{
	/*height:100%;*/
	margin:0;
	font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
	color:inherit;
	background:inherit;
}
a{
	color:inherit;
	text-decoration:none
}

/* layout */
.container{
	max-width:1100px;
	margin:0 auto;
	padding:40px 20px
}
header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px
}
.brand{
	display:flex;
	align-items:center;
	gap:12px
}
.logo{
	width:48px;
	height:48px;
	border-radius:12px;
	background:linear-gradient(135deg,var(--accent),#059669);
	display:flex;
	align-items:center;
	justify-content:center;
	font-weight:700;
	color:white
}

nav{
	display:flex;
	gap:14px
}
nav a{
	padding:8px 12px;
	border-radius:10px;
	color:var(--muted);
	font-weight:600
}
nav a:hover{
	color:white;
	background:rgba(255,255,255,0.03)
}

.hamburger {
	display:none;
	font-size:24px;
	background:none;
	border:none;
}

/* hero */
.hero{
	background-color:rgba(255,255,255,0.04);
	display:grid;
	grid-template-columns:1fr 360px;
	gap:28px;
	align-items:center;
	margin-top:36px
}
.intro{
	padding:28px;
	border-radius:var(--radius);
	backdrop-filter:blur(6px);
	
}
.intro h1{
	margin:0;
	font-size:28px
}
.intro p{
	color:var(--muted);
	margin-top:8px;
	line-height:1.6
}
.cta{
	margin-top:18px;
	display:flex;
	gap:12px
}
.btn{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:10px 14px;
	border-radius:12px;
	font-weight:700;
	cursor:pointer
}
.btn-primary{
	background:linear-gradient(90deg,var(--accent),#059669);
	color:white;
	box-shadow:0 6px 18px rgba(16,185,129,0.08)
}

.btn-ghost{
	border:1px solid rgba(255,255,255,0.06);
	color:var(--muted);
	background:transparent
}
.profile-card{
	background-color:rgba(255,255,255,0.04);
	padding:22px;
	border-radius:16px;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:12px
}
.avatar{
	width:120px;
	height:120px;
	border-radius:20px;
	background:linear-gradient(135deg,#0ea5e9,#10b981);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:36px;
	color:white;font-weight:700
}

.profile-card p{
	color:var(--muted);
	text-align:center;
	margin:0
}

/* sections */
section{
	margin-top:32px
}
h2{
	font-size:18px;
	margin:0 0 12px
}
.cards{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:16px
}
.project{
	/*background:var(--glass);*/
	background-color:rgba(255,255,255,0.04);
	padding:16px;
	border-radius:12px;
	border:1px solid rgba(255,255,255,0.02)
}
.project h3{
	margin:0 0 8px;
	font-size:16px
}
.project p{
	margin:0;
	color:var(--muted);
	font-size:14px
}
.tags{
	display:flex;
	gap:8px;
	margin-top:10px;
	flex-wrap:wrap
}
.tag{
	padding:6px 8px;
	border-radius:999px;
	font-size:12px;
	/*background:linear-gradient(135deg,var(--accent),#3b82f6);*/
	background:linear-gradient(90deg,var(--accent),#059669);
}

/* skills */
.skills{
	display:flex;
	gap:10px;
	flex-wrap:wrap
}
.skill{
	padding:8px 10px;
	border-radius:10px;
	background-color:rgba(255,255,255,0.04);
	color:var(--muted);
	font-weight:600
}

/* contact */
.contact-grid{
	display:grid;
	grid-template-columns:1fr 320px;
	gap:16px
}
form{
	display:flex;
	flex-direction:column;
	gap:10px
}
input,textarea,select{
	padding:10px;
	width: 100%;
	border-radius:10px;
	background:#ffffff;
	border: 2px solid #ffffff;
	color:#000000;
}
textarea{
	width: 100%;
	min-height:120px;
	border: 2px solid #ffffff;
}

footer{
	display:flex;
	justify-content:space-between;
	align-items:center;
	margin-top:28px;
	color:var(--muted);
	font-size:13px
}

/* responsive */
@media (max-width:960px){
	.hero{
		grid-template-columns:1fr
	}
	.cards{
		grid-template-columns:repeat(2,1fr)
	}
	.contact-grid{
		grid-template-columns:1fr
	}
}
@media (max-width:768px){
	nav{
		display:none
	}
	.nav {
		display:none;
		position:absolute;
		top:60px;
		right:0;
		width:200px;
		z-index: 9999;
		background-color:rgba(0,0,0,0.7);
	}
	.nav a { 
		display:block;
		padding:12px;
	}
	header{
		align-items:flex-start
	}
	.cards{
		grid-template-columns:1fr
	}
 	.hamburger { display:block; }
}

/* small helpers */
.muted{
	color:var(--muted)
}
.mono{
	font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Noto Mono", monospace
}
.editButtonArea{
	display:flex;
	gap:10px;
	padding-left:28px;
	padding-top:10px;
}