body { background: #151417; color: #fff; margin: 0; font-family: 'Montserrat', Arial, sans-serif; }
.navbar { position: fixed; top: 0; left: 0; right: 0; background: #111; display: flex; align-items: center; padding: 8px 32px; height: 58px; z-index: 100; }
.nav-toggle { background: none; border: none; color: #e2006d; font-size: 2rem; margin-right: 16px; }
.nav-brand { color: #fff; font-size: 1.25rem; font-weight: bold; letter-spacing: .07em; }
.nav-drawer-bg { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000a; z-index: 99; }
.nav-drawer { display: none; position: fixed; top: 0; left: 0; width: 260px; height: 100vh; background: #111; padding: 36px 16px 12px 16px; z-index: 100; box-shadow: 3px 0 24px #000a; }
.nav-drawer .nav-close { background: none; border: none; color: #e2006d; font-size: 2.1rem; position: absolute; top: 9px; left: 18px; }
.nav-drawer ul { list-style: none; margin: 40px 0 0 0; padding: 0; }
.nav-drawer ul li { margin: 28px 0; }
.nav-drawer ul li a { color: #fff; font-size: 1.24rem; font-weight: 600; text-decoration: none; transition: color .2s; }
.nav-drawer ul li a.active, .nav-drawer ul li a:hover { color: #e2006d; }
.hero { min-height: 100vh; text-align: center; padding-top: 130px; background: #151417; position: relative; overflow: hidden; }
#star-canvas { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero > *:not(#star-canvas) { position: relative; z-index: 2;}
.hero-hello { color: #e2006d; font-size: 1.45rem; letter-spacing: 2px; font-weight: 700; margin-bottom: 12px;}
.hero-name { font-size: 4rem; font-weight: bold; color: #fff; margin-bottom: 18px; letter-spacing: 0.075em;}
.hero-roles { color: #fff; font-size: 1.25rem; font-weight: 500; margin-bottom: 34px; letter-spacing: 0.10em;}
.role-divider { color: #e2006d; margin: 0 6px;}
.hero-btn { background: transparent; color: #fff; font-size: 1rem; border: 2px solid #fff; border-radius: 5px; padding: 16px 40px; font-weight: 700; letter-spacing: 0.07em; margin-top: 16px; margin-bottom: 48px; cursor: pointer; transition: background 0.22s, color 0.22s, border 0.22s;}
.hero-btn:hover { background: #fff; color: #111; border: 2px solid #e2006d;}
.hero-social { margin-top: 35px; display: flex; justify-content: center; gap: 32px;}
.hero-social a { font-size: 2.3rem; color: #fff; transition: color 0.18s;}
.hero-social a:hover { color: #e2006d;}
.about-section { background: #fff; color: #111; padding: 70px 0 40px 0; }
.about-section h2 { font-size: 2rem; font-weight: 700; color: #222; text-align: center; margin-bottom: 0px;}
.about-subtitle { text-align: center; color: #e2006d; font-weight: 700; font-size: 1.15rem; letter-spacing: 0.13em; margin-bottom: 24px;}
.about-main { display: flex; justify-content: center; align-items: center; gap: 38px; margin-bottom: 22px;}
.about-img-wrap { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; border: 4px solid #e2006d; display: flex; align-items: center; justify-content: center; background: #fff; flex-shrink: 0;}
.about-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.about-bio { font-size: 1.18rem; color: #444; text-align: left; line-height: 1.5; max-width: 470px;}
.about-details { display: flex; justify-content: center; align-items: flex-start; gap: 38px; margin-top: 38px; }
.profile-col, .work-col { font-size: 1.08rem; color: #222; max-width: 260px; }
.profile-col { display: flex; flex-direction: column; gap: 17px; }
.profile-col h3 { margin-bottom: 10px; }
.profile-item { margin-bottom: 8px; }
.vertical-divider {
  width: 2px;
  background: #eaeaea;
  height: 180px;
  margin: 0 34px;
}
.work-col { display: flex; flex-direction: column; gap: 24px; }
.work-col h3 { margin-bottom: 10px; }
.work-item strong { font-weight: bold; font-size: 1.13rem; color: #222; }
.work-company {
  display: block;
  font-size: 1.01rem;
  color: #878787;
  font-weight: 500;
  margin-top: 2px;
  margin-left: 0;
  letter-spacing: 0.02em;
}
.inspiration-section { background: #eef4f4; color: #222; padding: 50px 0 40px 0; }
.inspiration-section h2 { font-size: 2rem; font-weight: 700; color: #222; text-align: center; margin-bottom: 0px;}
.inspiration-subtitle { text-align: center; margin-bottom: 22px; color: #e2006d; font-weight: 700; font-size: 1.25rem; letter-spacing: 0.11em;}
.inspiration-flex { display: flex; align-items: center; max-width: 1000px; margin: 0 auto; gap: 38px;}
.inspiration-img-wrap { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; border: 4px solid #e2006d; display: flex; align-items: center; justify-content: center; background: #fff; flex-shrink: 0;}
.inspiration-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.inspiration-text { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; font-size: 1.18rem; line-height: 1.42;}
.inspiration-name { color: #e2006d; font-weight: bold; font-size: 1.2rem; margin-right: 8px;}
.know-more-btn { margin-top: 18px; background: none; color: #111; border: 2px solid #111; border-radius: 5px; padding: 10px 32px; font-size: 1.17rem; font-weight: 700; cursor: pointer; transition: background 0.2s, color 0.2s, border 0.2s;}
.know-more-btn:hover { background: #e2006d; color: #fff; border: 2px solid #e2006d;}
.timeline-section { background: #f6f6f6; color: #222; padding: 42px 0 22px 0;}
.timeline-section h2, .timeline-title { text-align: center; }
.timeline-title { color: #e2006d; font-size: 1.37rem; font-weight: bold; margin-bottom: 28px;}
.timeline { margin: 0 auto; max-width: 930px; }
.timeline-item { display: flex; align-items: flex-start; margin: 47px 0; }
.timeline-icon { width: 54px; height: 54px; border-radius: 50%; background: #222; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 2rem; margin-right: 28px;}
.timeline-item h3 { margin: 0; font-size: 1.16rem; color: #222; font-weight: bold;}
.timeline-date { font-size: 1rem; color: #757575; margin-bottom: 6px; display: block;}
.footer-section { background: #18181b; color: #fff; text-align: center; padding: 50px 0 24px 0;margin-top:0;}
.footer-contact { margin-bottom: 23px; }
.footer-label { color: #e2006d; font-size: 1.3rem; font-weight: bold; margin-bottom: 6px;}
.footer-email { display: block; font-size: 1.22rem; color: #fff; margin-bottom: 10px; text-decoration: none; }
.footer-social { margin-bottom: 22px; display: flex; justify-content: center; gap: 32px; }
.footer-social a { font-size: 2.17rem; color: #fff; transition: color 0.18s;}
.footer-social a:hover { color: #e2006d; }
.copyright { font-size: 1rem; color: #aaa; margin-top: 26px;}
@media (max-width: 1000px) {
  .about-main, .about-details, .inspiration-flex, .timeline-item { flex-direction: column; text-align: center;}
  .about-details, .inspiration-flex { gap: 24px; }
  .timeline { padding: 0 12px;}
  .vertical-divider { display: none; }
}