:root {
	--bg: #fff;
	--text: #1b1b1f;
	--muted: #6b7280;
	--accent: #7c3aed; /* purple */
	--accent-2: #06b6d4; /* teal */
	--card: #f8fafc;
}

* { box-sizing: border-box; }
body { margin:0; font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; color:var(--text); background:var(--bg); line-height:1.5; }
.container { max-width:1100px; margin:0 auto; padding:24px; }

.site-header { border-bottom:1px solid #eef2f7; background:linear-gradient(180deg, rgba(124,58,237,0.04), transparent); }
.header-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.avatar { width:64px; height:64px; border-radius:8px; }
.brand-text h1 { margin:0; font-size:18px; }
.tag { margin:0; color:var(--muted); font-size:13px; }

.main-nav a { margin-left:16px; text-decoration:none; color:var(--muted); padding:8px 6px; border-radius:6px; }
.main-nav a.active, .main-nav a:hover { color:var(--text); background:rgba(0,0,0,0.03); }

.hero { padding:56px 0; }
.hero-grid { display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:center; }
.hero-copy h2 { margin-top:0; font-size:32px; }
.hero-copy p { color:var(--muted); }
.cta-row { margin-top:18px; }
.btn { background:var(--accent); color:white; padding:10px 18px; border-radius:8px; text-decoration:none; display:inline-block; }
.btn.ghost { background:transparent; color:var(--accent); border:1px solid rgba(124,58,237,0.12); }

.hero-image img { width:100%; border-radius:12px; box-shadow:0 6px 18px rgba(17,24,39,0.06); }

.featured h3 { margin-top:0; }
.cards { display:flex; gap:16px; margin-top:12px; }
.card { background:var(--card); padding:12px; border-radius:12px; flex:1; }
.card img { width:100%; border-radius:8px; }

.quote blockquote { font-style:italic; border-left:4px solid var(--accent); margin:24px 0; padding-left:12px; color:var(--muted); }

.site-footer { border-top:1px solid #eef2f7; margin-top:40px; padding:18px 0; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; }
.footer-nav a { margin-left:12px; color:var(--muted); text-decoration:none; }

/* About & Projects */
.about-grid { display:grid; grid-template-columns:1fr 260px; gap:24px; align-items:start; }
.about-aside img { width:100%; border-radius:8px; }
.skill-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.skill { background:#fff; border:1px solid #eef2f7; padding:8px 12px; border-radius:8px; color:var(--muted); }

.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:16px; }
.project-card { background:var(--card); padding:12px; border-radius:10px; }
.project-card img { width:100%; border-radius:8px; }

.contact-form { max-width:640px; display:flex; flex-direction:column; gap:12px; }
.contact-form label { display:flex; flex-direction:column; font-weight:600; color:var(--muted); }
.contact-form input, .contact-form textarea { padding:10px; border:1px solid #e6edf3; border-radius:8px; font-size:15px; }

/* Responsive */
@media (max-width:900px){
	.hero-grid { grid-template-columns:1fr; }
	.cards { flex-direction:column; }
	.about-grid, .projects-grid { grid-template-columns:1fr; }
	.header-inner { flex-direction:column; align-items:flex-start; gap:12px; }
}

@media (max-width:480px){
	.avatar { width:48px; height:48px; }
	.hero-copy h2 { font-size:22px; }
}

/* small reset */
html,body { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }