/*base */
:root{
  --bg:#0a0a0a;
  --fg:#e8e8e8;
  --muted:#a8a8a8;
  --card:#121212;
  --line:#1f1f1f;
  --accent:#7aa2ff; 
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  line-height:1.6;
}

.container{width:min(1100px,92%);margin:0 auto}
.small{opacity:.8;font-size:.95rem}

.nav{
  position:sticky;top:0;z-index:10;
  backdrop-filter:saturate(1.2) blur(8px);
  background:rgba(10,10,10,.6);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;
  padding:.8rem 1rem;
}
.nav .brand{font-weight:600;letter-spacing:.06em;color:var(--fg);text-decoration:none}
.nav a{color:var(--muted);text-decoration:none;margin-left:1rem}
.nav a:hover{color:var(--fg)}

.section{padding:8rem 0;border-bottom:1px solid var(--line)}
.section-title{
  font-family:"Playfair Display",serif;
  font-size:2.2rem;
  margin:0 0 1rem 0;
}
.section-intro{color:var(--muted);max-width:60ch}

.hero{padding:12rem 0 8rem 0}
.hero-title{
  font-family:"Playfair Display",serif;
  font-size:3.2rem;line-height:1.2;margin:0 0 .8rem 0;
  letter-spacing:.01em;
}
.hero-sub{color:var(--muted);max-width:70ch}
.hero-meta{margin-top:1.4rem;display:flex;gap:1rem;flex-wrap:wrap}
.button{
  background:var(--fg);color:#000;padding:.7rem 1rem;border-radius:.5rem;
  text-decoration:none;font-weight:600;border:1px solid transparent;
}

.circle-image {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  margin: 1.25rem 0 0 0;
  display: block;
}


.button:hover{background:transparent;color:var(--fg);border-color:var(--fg)}
.link{color:var(--accent);text-decoration:none;border-bottom:1px solid transparent}
.link:hover{border-color:var(--accent)}

/* grid and cards */
.grid{
  margin-top:2rem;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:1.2rem;
}
.card{
  grid-column:span 6;
  background:var(--card);padding:1.4rem;border-radius:.8rem;
  border:1px solid var(--line);
  transition:transform .25s ease, border-color .25s ease;
}
.card:hover{transform:translateY(-4px);border-color:#2a2a2a}
.card.muted{opacity:.7}
.card-meta{display:flex;justify-content:space-between;color:var(--muted);font-size:.9rem}
.card-title{margin:.4rem 0 .6rem 0;font-size:1.3rem}
.card-desc{color:#d0d0d0}
.card-actions{margin-top:.8rem;display:flex;gap:1rem;flex-wrap:wrap}

@media (max-width:900px){
  .card{grid-column:span 12}
  .hero-title{font-size:2.4rem}
}

/* reveal as scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.reveal.show{opacity:1;transform:none}

/* foooter */
.footer{padding:3rem 0;color:var(--muted)}