:root{
	--bg:#0f1724;
	--card:#0b1220;
	--muted:#94a3b8;
	--accent:#6ee7b7;
	--accent-2:#367acd;
	--text:#e6eef8;
	--radius:12px;
	--container-width:1100px;
	--glass: rgba(255,255,255,0.04);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
	margin:0;
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	background:linear-gradient(180deg,#071026 0%, #07182a 100%);
	color:var(--text);
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
	line-height:1.5;
}

.container{max-width:var(--container-width);margin:0 auto;padding:0 20px}

.site-header{backdrop-filter:blur(6px);position:sticky;top:0;z-index:50;background:linear-gradient(180deg, rgba(7,24,38,0.6), rgba(7,24,38,0.2));border-bottom:1px solid rgba(255,255,255,0.02)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 0}
.logo{font-weight:700;color:var(--text);text-decoration:none;font-size:1.05rem}

.nav{display:flex;gap:18px}
.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px}
.nav a:hover{color:var(--text);background:var(--glass)}
.nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:1.25rem}

.hero{padding:64px 0}
.hero-inner{display:flex;gap:30px;align-items:center}
.hero h1{font-size:2.1rem;margin:0}
.lead{color:var(--muted);margin-top:12px;max-width:54ch}
.hero-card{flex:0 0 220px}
.avatar{width:200px;height:200px;border-radius:20px;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:0 10px 30px rgba(8,10,20,0.6);overflow:hidden;display:flex;align-items:center;justify-content:center}
.avatar-img{width:100%;height:100%;object-fit:cover;display:block;border-radius:inherit}
.cta-row{margin-top:18px}
.btn{display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#171718;padding:10px 18px;border-radius:10px;text-decoration:none;font-weight:600}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--text)}

.section{padding:56px 0}
.about-grid{display:grid;grid-template-columns:1fr 280px;gap:20px;align-items:start}

.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(2,6,23,0.6);display:flex;flex-direction:column}
.card-media{height:140px;background-size:cover;background-position:center}
/*.proj1{background:linear-gradient(135deg,#7c3aed,#06b6d4)}*/
/* Inside style.css */

/* Remove or comment out these old gradient classes since we are using real images now */
/* .proj1{...} */
/* .proj2{...} */
/* .proj3{...} */

.card-media {
    height: 180px; /* Increased height slightly for better visibility */
    width: 100%;
    overflow: hidden; /* Ensures image doesn't spill out */
    background-color: var(--card); /* Fallback color */
    position: relative;
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image covers the area without stretching */
    object-position: top; /* Focuses on the top of the website screenshot */
    display: block;
    transition: transform 0.3s ease; /* Adds a nice zoom effect on hover */
}

/* Optional: Subtle zoom effect when hovering over the card */
.card:hover .card-media img {
    transform: scale(1.05);
}
.proj2{background:linear-gradient(135deg,#f97316,#f43f5e)}
.proj3{background:linear-gradient(135deg,#06b6d4,#7c3aed)}
.card-body{padding:16px}
.card h3{margin:0 0 8px 0}
.card p{color:var(--muted);margin:0 0 12px}
.card-actions .link{color:var(--accent);text-decoration:none}

.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:24px;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:10px}
.contact-form input,.contact-form textarea{padding:10px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.contact-form label{font-size:0.9rem}

.contact-info{color:var(--muted)}

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

/* Responsive */
@media (max-width:900px){
	.projects-grid{grid-template-columns:repeat(2,1fr)}
	.about-grid{grid-template-columns:1fr}
	.contact-grid{grid-template-columns:1fr}
	.hero-inner{flex-direction:column-reverse;text-align:center}
	.hero-card{margin-bottom:12px}
}

@media (max-width:600px){
	.projects-grid{grid-template-columns:1fr}
	.nav{display:none}
	.nav-toggle{display:block}
	.container{padding:0 16px}
	.hero h1{font-size:1.6rem}
}

/* Small niceties */
a.link{color:var(--accent);}
button{cursor:pointer}

@media (prefers-reduced-motion: no-preference){
	.hero h1,.card,.avatar{transition:transform .28s ease,opacity .28s ease}
	.card:hover{transform:translateY(-6px)}
}