/* ------------------------
   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;}


/* From Uiverse.io by Nawsome */ 
.loader {
  position: absolute;
  top: 80%;
  left: 92%;
  z-index: 10;
  width: 160px;
  height: 100px;
  margin-left: -80px;
  margin-top: -50px;
  border-radius: 5px;
  background: #b8b8b8;
  animation: dot1_ 3s cubic-bezier(0.55,0.3,0.24,0.99) infinite;
}
@media (max-width:500px){
  .loader {top: 80%;left: 50%;}
  .hero-content {margin-bottom: 250px;}
}

.loader:nth-child(2) {
  z-index: 11;
  width: 150px;
  height: 90px;
  margin-top: -45px;
  margin-left: -75px;
  border-radius: 3px;
  background: #17181a;
  animation-name: dot2_;
}

.loader:nth-child(3) {
  z-index: 12;
  width: 40px;
  height: 20px;
  margin-top: 50px;
  margin-left: -20px;
  border-radius: 0 0 5px 5px;
  background: #e43a3a;
  animation-name: dot3_;
}

@keyframes dot1_ {
  3%,97% {
    width: 160px;
    height: 100px;
    margin-top: -50px;
    margin-left: -80px;
  }

  30%,36% {
    width: 80px;
    height: 120px;
    margin-top: -60px;
    margin-left: -40px;
  }

  63%,69% {
    width: 40px;
    height: 80px;
    margin-top: -40px;
    margin-left: -20px;
  }
}

@keyframes dot2_ {
  3%,97% {
    height: 90px;
    width: 150px;
    margin-left: -75px;
    margin-top: -45px;
  }

  30%,36% {
    width: 70px;
    height: 96px;
    margin-left: -35px;
    margin-top: -48px;
  }

  63%,69% {
    width: 32px;
    height: 60px;
    margin-left: -16px;
    margin-top: -30px;
  }
}

@keyframes dot3_ {
  3%,97% {
    height: 20px;
    width: 40px;
    margin-left: -20px;
    margin-top: 50px;
  }

  30%,36% {
    width: 8px;
    height: 8px;
    margin-left: -5px;
    margin-top: 49px;
    border-radius: 8px;
  }

  63%,69% {
    width: 16px;
    height: 4px;
    margin-left: -8px;
    margin-top: -37px;
    border-radius: 10px;
  }
}