/* Dark portfolio style */
:root{
  --bg:#0b1120;
  --card:#0f1724;
  --muted:#9aa6b2;
  --accent:#6ee7b7;
  --accent2:#60a5fa;
}
*{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: radial-gradient(1200px 600px at 10% 10%, rgba(96,165,250,0.06), transparent 8%),
              radial-gradient(900px 400px at 90% 90%, rgba(110,231,183,0.04), transparent 8%),
              var(--bg);
  color:#e6eef8;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  padding-bottom:60px;
}

/* page container */
.container{
  width:min(1100px, 92%);
  margin:0 auto;
}

/* header */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:28px 0;
}
.brand{
  display:flex;
  gap:12px;
  align-items:center;
}
.brand .logo{
  width:48px;height:48px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  display:flex;align-items:center;justify-content:center;font-weight:700;color:#022;
  box-shadow:0 6px 18px rgba(2,6,23,0.6);
  transform:translateY(-2px);
}
.nav a{
  color:var(--muted);text-decoration:none;margin-left:18px;
  transition:color .18s ease;
}
.nav a:hover{color:var(--accent);}

/* hero */
.hero{
  display:grid;
  grid-template-columns:1fr 360px;
  gap:28px;
  align-items:center;
  padding:50px 0 20px;
}
.hero .intro h1{font-size:38px;margin:0 0 8px}
.intro p{color:var(--muted);margin:0 0 20px;max-width:60ch}
.cta{
  display:inline-flex;padding:12px 18px;border-radius:10px;background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#042; font-weight:600; text-decoration:none; box-shadow:0 8px 30px rgba(96,165,250,0.08);
  transform:translateY(0); transition:transform .12s ease;
}
.cta:active{transform:translateY(2px)}

/* profile card */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:18px;border-radius:14px;box-shadow:0 8px 30px rgba(2,6,23,0.6);
}
.profile{
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:18px;
}
.profile img{width:160px;border-radius:12px;border:4px solid rgba(255,255,255,0.04)}

/* sections */
.section{padding:38px 0}
.section h2{margin:0 0 18px;font-size:22px}
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:18px;
}

/* project card */
.project{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005));
  padding:16px;border-radius:12px;overflow:hidden;position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
}
.project:hover{transform:translateY(-6px);box-shadow:0 12px 40px rgba(2,6,23,0.6)}
.project .img{height:140px;border-radius:8px;background:linear-gradient(135deg,var(--accent2),var(--accent));margin-bottom:10px}
.project h3{margin:0 0 8px;font-size:18px}
.project p{margin:0;color:var(--muted);font-size:14px}

/* contact */
.form{display:flex;flex-direction:column;gap:10px}
.input, textarea{background:transparent;border:1px solid rgba(255,255,255,0.04);padding:12px;border-radius:8px;color:#e6eef8}
.button{display:inline-block;padding:12px 16px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:10px;color:#042;text-decoration:none;font-weight:600;border:none}

/* footer */
.footer{padding:24px 0;color:var(--muted);text-align:center}

/* small screen */
@media(max-width:880px){
  .hero{grid-template-columns:1fr; padding-top:20px}
  .profile img{width:140px}
}

/* subtle animated underline */
.animated-underline{
  background:linear-gradient(90deg,var(--accent) 0 0);
  background-size:0% 2px;
  background-repeat:no-repeat;
  background-position:0 100%;
  transition:background-size .28s ease;
}
a:hover.animated-underline{background-size:100% 2px}