:root{
  --bg: #0f1115;
  --panel: #14171d;
  --text: #e7e9ee;
  --muted: #aeb5c2;
  --accent: #93a7ff; /* soft, not glowing */
  --rule: #2a2f39;
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* HERO */
.hero{
  position: relative;
  min-height: 10svh;
  display: grid;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* move content to top */
  align-items: center;
  min-height: 60svh;
  padding-top: 3rem;
  padding: clamp(2rem, 6vw, 4rem) 1rem;
  overflow: hidden;
  background: linear-gradient(180deg, #0f1115 0%, #0f1115 60%, #0f1115 100%);
}

/* Subtle perspective grid “floor” */
.grid3d{
  position:absolute; inset:auto 0 0 0; height: 48svh;
  background:
    linear-gradient(transparent 0 35%, rgba(255,255,255,0.04) 35% 36%, transparent 36% 100%),
    repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,0.06) 39px, transparent 40px),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,0.06) 39px, transparent 40px);
  transform-origin: 50% 100%;
  transform: perspective(1200px) rotateX(62deg) translateY(10%);
  opacity: .35;
}

/* Headset silhouette */
.vr-visual{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none;
  top: 65%;
}


.vr-svg{
  width:min(88vw, 960px);
  color: #d0d6e8; /* stroke color (inherits through currentColor) */
  transition: transform .8s ease;
}

/* Hero text block */
.hero-inner{
  position: relative;
  z-index: 1;
  text-align: center;
  width: min(960px, 92vw);
}
.avatar{
  width:185px; height:185px; border-radius: 50%;
  object-fit: cover; object-position: center;
  border: 1px solid var(--rule);
  margin: 0 auto 1rem;
}
.title{
  font-weight: 700;
  letter-spacing: .2px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  margin: .25rem 0 .2rem;
}
.tagline{
  color: var(--muted);
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
}

/* Sections */
.section{
  padding: clamp(2.2rem, 5vw, 3.2rem) 1.25rem;
  width: min(1100px, 92vw);
  margin: 0 auto;
}
.section + .section{ border-top: 1px solid var(--rule); }

.section-header{
  display:flex; align-items:center; gap:.8rem; margin-bottom: 1.1rem;
}
.section-header h2{
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 700; letter-spacing:.2px;
}
.section-header .rule{
  height:1px; background: var(--rule);
  flex:1;
}

.lead{ color: #d5d9e5; max-width: 75ch; }

/* Project */
.project{ background: var(--panel); border:1px solid var(--rule); border-radius: 12px; padding: 1.25rem; }
.project + .project{ margin-top: 1rem; }
.project-header h3{
  margin:.1rem 0 .6rem;
  font-weight: 650;
  font-size: 1.05rem;
}
.project-header a{ color: var(--text); text-decoration: none; border-bottom: 1px dashed var(--rule); }
.project-header a:hover{ color: var(--accent); border-bottom-color: var(--accent); }
.project-body p{ margin:.35rem 0; color: #cfd5e4; }

/* Timeline */
.timeline{ display:grid; gap: 1.2rem; }
.t-item{
  display:grid; gap:.35rem;
  background: transparent;
  padding: .2rem 0;
  border-left: 3px solid var(--rule);
  padding-left: .9rem;
}
.t-meta{ display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items: baseline; }
.t-role{ font-weight: 600; }
.t-date{ color: var(--muted); font-size:.95rem; }
.t-desc{ color:#cfd5e4; max-width: 75ch; }

/* Contact */
.contact a{ color: var(--accent); text-decoration: none; }
.contact a:hover{ text-decoration: underline; }

/* Footer */
.footer{
  border-top:1px solid var(--rule);
  padding: 1.4rem 1.25rem; text-align:center; color: var(--muted);
}

/* Reveal (soft, minimal) */
.reveal{ opacity:0; transform: translateY(10px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible{ opacity:1; transform: translateY(0); }

/* Responsive */
@media (min-width: 900px){
  .hero{ min-height: 78svh; }
}

.award {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  max-width: 650px;
  margin-top: 1rem;
  color: #d5d9e5;
}
.award p {
  margin: 0;
  font-weight: 500;
  font-size: 1rem;
}