:root{
  --bg:#0f1724; --card:#0b1220; --muted:#94a3b8; --accent:#7c3aed; --glass: rgba(255,255,255,0.04);
  --maxw:1200px;
  --radius:14px;
  --ff: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:var(--ff); background:linear-gradient(180deg,#071024 0%,#071226 50%, #041022 100%); color:#e6eef8; line-height:1.45;
}
.container{max-width:var(--maxw); margin:40px auto; padding:24px}

/* NAV */
header{backdrop-filter: blur(6px); background:linear-gradient(180deg, rgba(255,255,255,0.03), transparent); border-radius:16px; padding:12px 18px; display:flex; align-items:center; justify-content:space-between}
.brand{display:flex; gap:12px; align-items:center}
.logo{width:46px;height:46px;border-radius:10px;background:linear-gradient(135deg,var(--accent), #4f46e5); display:flex;align-items:center;justify-content:center;font-weight:700}
nav a{color:var(--muted); text-decoration:none; margin:0 10px; font-weight:600}
nav a:hover{color:#fff}
.cta{background:linear-gradient(90deg,var(--accent),#4f46e5); padding:8px 14px; border-radius:10px; color:white; font-weight:700; text-decoration:none}

/* HERO */
.hero{display:grid;grid-template-columns:1fr 420px; gap:28px;align-items:center;margin-top:26px}
.hero-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent); border-radius:var(--radius); padding:28px}
h1{font-size:36px;margin:0 0 10px}
p.lead{color:var(--muted); margin:0 0 16px}
.skills{display:flex; gap:8px; flex-wrap:wrap}
.chip{background:var(--glass); padding:8px 10px; border-radius:999px; color:var(--muted); font-weight:600}

/* PROFILE */
.profile{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:12px}
.profile img{width:100%; border-radius:10px; display:block}
.profile .meta{margin-top:10px}

/* GRID */
.section{margin-top:34px}
.grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px}
.card{position:relative; overflow:hidden; border-radius:12px; background:var(--card);}
.card img{width:100%; height:260px; object-fit:cover; display:block; transition:transform .5s ease}
.card:hover img{transform:scale(1.06)}
.card .meta{position:absolute; left:12px; bottom:12px; background:linear-gradient(90deg, rgba(0,0,0,0.6), transparent); padding:8px 12px; border-radius:10px}
.card .meta h3{margin:0;font-size:16px}
.card .meta p{margin:2px 0 0;color:var(--muted);font-size:13px}

/* VIDEO */
.video-row{display:flex; gap:14px}
.video-row video{width:100%; height:320px; border-radius:12px; background:black}

/* LIGHTBOX */
.lightbox{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(2,6,23,0.8); z-index:60}
.lightbox.open{display:flex}
.lightbox img{max-width:92%; max-height:86%; border-radius:12px; box-shadow:0 10px 40px rgba(2,6,23,0.8)}
.close-btn{position:absolute; right:28px; top:28px; background:rgba(255,255,255,0.06); padding:8px 10px; border-radius:8px; cursor:pointer}

/* CONTACT */
form{display:grid; gap:12px}
input, textarea{background:transparent; border:1px solid rgba(255,255,255,0.06); padding:12px; color:inherit; border-radius:8px}
.btn{border:none; padding:12px 16px; border-radius:10px; font-weight:700; cursor:pointer; background:linear-gradient(90deg,var(--accent), #4f46e5); color:white}

/* FOOTER */
footer{margin-top:46px; text-align:center; color:var(--muted)}

/* RESPONSIVE */
@media (max-width:1000px){
  .hero{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .hero img{display:none}
  header{padding:10px}
}