:root{
  --purple:#5B21B6;
  --purple-soft:#7C3AED;
  --bg:#060606;
  --text:#F5F5F5;
  --muted:#F5F5F5;
  --surface:#111;
}

*{box-sizing:border-box;}

body{
  margin:0;
  font-family:'Inter',sans-serif;
  color:var(--text);
  background:
    radial-gradient(circle at 20% 20%, rgba(91,33,182,0.35), transparent 40%),
    radial-gradient(circle at 80% 0%, rgba(124,58,237,0.25), transparent 40%),
    var(--bg);
}

/* NAV */
nav{
  position:fixed;
  top:30px;
  left:50%;
  transform:translateX(-50%);
  z-index:20;
}

nav a{
  margin:0 20px;
  text-decoration:none;
  color:var(--muted);
  font-size:13px;
  letter-spacing:1px;
}

nav a:hover{
  color:var(--text);
}

/* SECTIONS */
section{
  min-height:100vh;
  display:flex;
  align-items:center;
  padding:120px 10vw;
}

/* TYPOGRAPHY */
h1{
  font-family:'Playfair Display',serif;
  font-size:100px;
  margin:0;
}

h2{
  font-family:'Playfair Display',serif;
  font-size:60px;
  margin-bottom:30px;
}

h3{
  margin-top:30px;
}

p{
  max-width:520px;
  font-size:18px;
  line-height:1.7;
  color:var(--muted);
}

/* HERO */
.hero{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:80px;
}

.hero > div:first-child {
  width: 500px;
  flex-shrink: 0;
}

.hero img{
  width: clamp(200px, 30vw, 500px);
  height: auto;
  border-radius:20px;
  align-self:flex-start;
}

/* CTA */
.cta{
  margin-top:30px;
  padding:14px 26px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg,var(--purple),var(--purple-soft));
  color:#fff;
  cursor:pointer;
  box-shadow:0 20px 60px rgba(91,33,182,0.4);
}

/* ABOUT GRID */
.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
}

/* PORTFOLIO */
.portfolio{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:40px;
}

.card{
  background:var(--surface);
  padding:40px;
  border-radius:20px;
  cursor:pointer;
  transition:0.3s;
  position:relative;
}

.card:hover{
  transform:translateY(-10px);
}

/* MODAL */
.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:30;
}

.modal{
  background:#0d0d0d;
  padding:60px;
  border-radius:30px;
  max-width:700px;
  width:90%;
}

.close{
  position:absolute;
  top:30px;
  right:40px;
  cursor:pointer;
  color:var(--muted);
}