*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:           #060e0e;
  --card-bg:      #0c2020;
  --card-border:  #0f3535;
  --divider:      #0f3535;
  --cyan:         #00e5cc;
  --text:         #e2e8f0;
  --text-muted:   #4aacac;
  --text-dim:     #2a8080;
  --media-bg:     #0f2e2e;   /* card media slot background */
  --media-dim:    #1a6060;   /* card media placeholder text */
  --card-title:   #d0f0f0;   /* card title text color */
  --tl-divider:   #0f2525;   /* timeline row divider */

  /* border colors */
  --border-ui:    #0f4040;   /* chip and ghost button borders */
  --border-photo: #0f4545;   /* hero photo frame border */

  /* tag category colors */
  --rl:       #00e5cc;
  --ros:      #00c2e0;
  --llm:      #38bdf8;
  --vr:       #818cf8;
  --hardware: #34d399;
  --vision:   #22d3ee;
  --sim:      #67e8f9;
  --ml:       #a78bfa;

  --font-name:    'League Spartan', sans-serif;
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Poppins', sans-serif;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }

/* NAV */
nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 64px;
  border-bottom: 1px solid var(--divider);
  margin-bottom: 52px;
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--bg);
}
.nav-brand {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--cyan);
}
.nav-links {
  display: flex;
  gap: 24px;
}
.nav-links a {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 2px;
  color: #3a9090;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--cyan); }

/* HERO */
.hero {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 56px;
  align-items: center;
  padding: 0 64px;
  margin-bottom: 80px;
}
.hero-tag {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 5px;
  color: var(--cyan);
  margin-bottom: 16px;
}
.hero-name {
  font-family: var(--font-name);
  font-size: 62px;
  font-weight: 900;
  line-height: 1;
  color: #fff;
  letter-spacing: -2px;
  white-space: nowrap;
}
.hero-sub {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 18px;
  line-height: 1.75;
  max-width: 440px;
}
.hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 22px;
}
.hero-chip {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 2px;
  padding: 5px 12px;
  border: 1px solid var(--border-ui);
  color: #2aacac;
}
.hero-btns {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}
.btn-primary {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 2px;
  padding: 10px 22px;
  background: var(--cyan);
  color: var(--bg);
  font-weight: 700;
  cursor: pointer;
  border: none;
}
.btn-ghost {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 2px;
  padding: 10px 22px;
  border: 1px solid var(--border-ui);
  color: var(--text-muted);
  cursor: pointer;
  background: transparent;
}
.hero-photo-wrap {
  background: #0c2222;
  border: 1px solid var(--border-photo);
  height: 400px;
  position: relative;
  overflow: hidden;
}
.hero-photo-wrap::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--cyan);
  z-index: 1;
}
.hero-photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* SECTION TITLE */
.section { padding: 0 64px; margin-bottom: 80px; }
.sec-title {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 6px;
  color: var(--cyan);
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--divider);
}

/* BENTO GRID */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

/* CARD */
.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.card.featured { grid-column: span 2; }

.card-accent { height: 3px; width: 100%; background: var(--card-border); }

.card-media {
  background: var(--media-bg);
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--media-dim);
  font-size: 10px;
  letter-spacing: 1px;
  position: relative;
  font-family: var(--font-heading);
}
.card.featured .card-media { height: 450px; }

.card-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}
.card-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.badge {
  position: absolute;
  top: 10px; right: 10px;
  font-family: var(--font-heading);
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 8px;
  background: var(--cyan);
  color: var(--bg);
  font-weight: 700;
}

.card-body { padding: 16px 18px; flex: 1; }
.card-tag-line {
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 3px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.card-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--card-title);
  margin-bottom: 6px;
}
.card-desc {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}

/* TAG CHIPS */
.tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tag {
  font-family: var(--font-heading);
  font-size: 8px;
  letter-spacing: 1px;
  padding: 3px 8px;
  font-weight: 600;
  transition: filter 0.2s, transform 0.2s;
}
a.tag { display: inline-block; text-decoration: none; }
a.tag:hover { filter: brightness(1.2); transform: translateY(-1px); }
.tag.rl       { background: #00e5cc18; color: var(--rl);       border: 1px solid #00e5cc33; }
.tag.ros      { background: #00c2e018; color: var(--ros);      border: 1px solid #00c2e033; }
.tag.llm      { background: #38bdf818; color: var(--llm);      border: 1px solid #38bdf833; }
.tag.vr       { background: #818cf818; color: var(--vr);       border: 1px solid #818cf833; }
.tag.hardware { background: #34d39918; color: var(--hardware); border: 1px solid #34d39933; }
.tag.vision   { background: #22d3ee18; color: var(--vision);   border: 1px solid #22d3ee33; }
.tag.sim      { background: #67e8f918; color: var(--sim);      border: 1px solid #67e8f933; }
.tag.ml       { background: #a78bfa18; color: var(--ml);       border: 1px solid #a78bfa33; }

.card-footer {
  display: flex;
  gap: 16px;
  padding: 12px 18px;
  border-top: 1px solid var(--card-border);
}
.card-link {
  font-family: var(--font-heading);
  font-size: 9px;
  letter-spacing: 2px;
  color: var(--cyan);
}
.card-link:hover { text-decoration: underline; }

/* TIMELINE */
.timeline { display: flex; flex-direction: column; }
.tl-item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid var(--tl-divider);
}
.tl-item:first-child { padding-top: 0; }
.tl-date {
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 2px;
  color: var(--text-dim);
  padding-top: 2px;
}
.tl-title {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--card-title);
}
.tl-org {
  font-size: 11px;
  color: var(--cyan);
  margin-top: 3px;
}
.tl-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  line-height: 1.6;
}

/* TWO-COL CARD GRID (publications + achievements) */
.two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.info-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  padding: 24px;
}
.info-card h3 {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--cyan);
  margin-bottom: 16px;
}
.info-card ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.info-card li {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  padding-left: 12px;
  border-left: 2px solid var(--card-border);
}
.info-card li strong { color: var(--cyan); }
.info-card li a { color: var(--llm); }
.info-card li a:hover { text-decoration: underline; }

/* SKILLS */
.chip-wrap { display: flex; flex-wrap: wrap; gap: 8px; }

/* FOOTER */
.footer {
  padding: 48px 64px;
  border-top: 1px solid var(--divider);
  margin-top: 24px;
}
.footer h2 {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
}
.footer p {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 24px;
}
.contact-links a {
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--cyan);
}
.contact-links a:hover { text-decoration: underline; }
.footer-note {
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
}

/* RESPONSIVE DESIGN */
@media (max-width: 800px) {
  nav {
    padding: 16px 24px;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
  }
  .hero {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 0 24px;
    margin-bottom: 48px;
  }
  .hero-name {
    font-size: 42px;
    white-space: normal;
  }
  .hero-photo-wrap {
    height: 320px;
  }
  .hero-text {
    order: 2; /* Put text below image on mobile, or just leave it above */
  }
  .hero-photo-wrap {
    order: 1; /* Image first on mobile */
  }
  .section {
    padding: 0 24px;
    margin-bottom: 48px;
  }
  .bento {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }
  .card, .card.featured {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  .card.featured .card-media {
    height: 350px;
  }
  .card-media {
    height: 250px;
  }
  .tl-item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 16px 0;
  }
  .two-col {
    grid-template-columns: 1fr;
  }
  .footer {
    padding: 32px 24px;
  }
}