/* ------------------------
   RESET & BASE
------------------------- */
* {margin: 0;padding: 0;box-sizing: border-box;}
html, body {font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;background-color: #000;color: #eaeaea;height: 100%;}
a {color: inherit;text-decoration: none;}
/* ------------------------
   HEADER
------------------------- */
.header {position: absolute;top: 0;left: 0;width: 100%;padding: 28px 64px;display: flex;justify-content: space-between;align-items: center;z-index: 10;}
.logo {font-weight: 700;letter-spacing: 0.12em;font-size: 14px;}
.nav {display: flex;gap: 48px;}
.nav a {font-size: 13px;color: #bdbdbd;position: relative;}
.nav a::after {content: "";position: absolute;bottom: -6px;left: 0;width: 0;height: 1px;background: #fff;transition: width 0.3s ease;}
.nav a:hover::after {width: 100%;}
.burger {display: none;font-size: 20px;cursor: pointer;}
/* ------------------------
   HERO SECTION
------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.75), rgba(0,0,0,0.95));
  display: flex;
  align-items: center;
  padding: 0 64px;
}
.overlay {position: absolute;inset: 0;background: radial-gradient(circle at 70% 40%,rgba(255,255,255,0.08),rgba(0,0,0,0.85) 60%);z-index: 1;}
/* ------------------------
   HERO CONTENT
------------------------- */
.hero-content {position: relative;z-index: 2;max-width: 520px;}
.line {display: block;width: 80px;height: 1px;background: #fff;margin-bottom: 24px;}
.hero-content h1 {font-size: 48px;font-weight: 500;line-height: 1.15;margin-bottom: 20px;}
.hero-content p {font-size: 15px;color: #bdbdbd;margin-bottom: 32px;}
.hero-link {font-size: 13px;letter-spacing: 0.08em;text-transform: uppercase;position: relative;}
/* ------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 900px) {
  .header {padding: 20px 32px;}
  .nav {display: none;}
  .burger {display: block;}
  .hero {padding: 0 32px;}
  .play {right: 32px;width: 64px;height: 64px;}
  .hero-content h1 {font-size: 36px;}
}

@media (max-width: 500px) {
  .hero-content h1 {font-size: 30px;}
}

/* ------------------------
   PAGE HERO (SIMPLE)
------------------------- */
.page-hero {min-height: 60vh;display: flex;align-items: center;padding: 0 64px;background:linear-gradient(180deg, rgba(0,0,0,0.7), rgba(0,0,0,0.95));}
.page-hero-content h1 {font-size: 48px;font-weight: 500;}
/* ------------------------
   ABOUT PAGE
------------------------- */
.about {background-color: #000;padding: 1px 64px 1px;}
.about-inner {max-width: 640px;}
.about-content p {font-size: 15px;color: #bdbdbd;line-height: 1.8;margin-bottom: 24px;}
/* ------------------------
   RESPONSIVE
------------------------- */
@media (max-width: 900px) {
  .page-hero {padding: 0 32px;}
  .page-hero-content h1 {font-size: 36px;}
  .about {padding: 100px 32px 120px;}
}
@media (max-width: 500px) {
  .page-hero-content h1 {
    font-size: 30px;
  }
}

/* ------------------------
   BACK LINK (GLOBAL)
------------------------- */
.back-link {display: inline-block;font-size: 40px;color: #bdbdbd;margin-bottom: 32px;transition: transform 0.3s ease, color 0.3s ease;}
.back-link:hover {color: #fff;}
/* ------------------------
   BACK LINK RESPONSIVE
------------------------- */
@media (max-width: 900px) {
  .back-link {font-size: 22px;margin-bottom: 28px;}
}
@media (max-width: 500px) {
  .back-link {font-size: 24px;margin-bottom: 24px;}
}


/* ------------------------
   PAGE SUBTITLE
------------------------- */
.page-subtitle {margin-top: 14px;font-size: 14px;color: #bdbdbd;max-width: 520px;line-height: 1.7;}

/* ------------------------
   PROJECTS
------------------------- */
.projects {background: #000;padding: 10px 64px 10px;}
.projects-inner {max-width: 1100px;}
.projects-grid {display: grid;grid-template-columns: repeat(2, minmax(0, 1fr));gap: 20px;}
.project-card {display: block;padding: 22px 22px;border: 1px solid rgba(255,255,255,0.12);border-radius: 18px;background: rgba(255,255,255,0.02);transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;}
.project-card:hover {border-color: rgba(255,255,255,0.22);background: rgba(255,255,255,0.04);}
.project-top {display: flex;justify-content: space-between;align-items: baseline;gap: 16px;margin-bottom: 10px;}
.project-card h2 {font-size: 16px;font-weight: 500;color: #eaeaea;letter-spacing: 0.01em;}
.project-arrow {font-size: 16px;color: #bdbdbd;transition: transform 0.25s ease, color 0.25s ease;}
.project-card:hover .project-arrow {color: #fff;transform: translate(2px, -2px);}
.project-card p {font-size: 13px;color: #bdbdbd;line-height: 1.6;}
/* ------------------------
   RESPONSIVE PROJECTS
------------------------- */
@media (max-width: 900px) {
  .projects {padding: 64px 32px 120px;}
  .projects-grid {grid-template-columns: 1fr;gap: 16px;}
  .project-card {border-radius: 16px;}
}

@media (max-width: 500px) {
  .project-card {padding: 20px;}
}

/* ------------------------
   PROJECT THUMB
------------------------- */
.project-thumb {width: 100%;aspect-ratio: 16 / 10;overflow: hidden;border-radius: 12px;margin-bottom: 16px;background: #111;}
.project-thumb img {width: 100%;height: 100%;object-fit: cover;filter: saturate(0.9) contrast(1.05);transition: transform 0.4s ease;}