/* =========================================================
   GLASS HEADER — COMPLETE
========================================================= */

.glass-header {
  position: fixed;
  top: 20px;
  left: 49%;
  transform: translateX(-50%);
  width: min(1150px, calc(100% - 40px));
  z-index: 9999;

  font-family: inherit;
}


/* =========================================================
   HEADER INNER
========================================================= */

.header-inner {
  width: 100%;
  min-height: 64px;

  display: flex;
  align-items: center;

  padding: 0 14px 0 20px;

  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.06);

  transition:
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}


/* =========================================================
   LOGO
========================================================= */

.logo {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;

  text-decoration: none;

  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.04em;

  color: #111;

  transition: color 0.25s ease;
}

.logo span {
  display: inline-block;

  width: 6px;
  height: 6px;

  margin-left: 2px;

  background: currentColor;
  border-radius: 50%;
}


/* =========================================================
   DESKTOP NAV — CENTERED
========================================================= */

.nav {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 4px;

  margin-left: auto;
  margin-right: auto;
}

.nav a {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  height: 38px;
  padding: 0 9px;

  color: #555;
  text-decoration: none;

  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;

  white-space: nowrap;

  border-radius: 9px;

  transition:
    color 0.25s ease,
    background 0.25s ease;
}


/* =========================================================
   NAV UNDERLINE
========================================================= */

.nav a::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 3px;

  width: 0;
  height: 2px;

  background: currentColor;

  border-radius: 10px;

  transform: translateX(-50%);

  transition:
    width 0.25s ease;
}


/* Hover */

.nav a:hover {
  color: #111;
  background: rgba(0, 0, 0, 0.045);
}

.nav a:hover::after {
  width: 16px;
}


/* Active menu */

.nav a.active {
  color: #111;
}

.nav a.active::after {
  width: 16px;
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode .nav a {
  color: #aaa;
}

body.dark-mode .nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

body.dark-mode .nav a.active {
  color: #fff;
}


/* =========================================================
   HEADER TIME
========================================================= */

.header-time {
  flex-shrink: 0;

  display: flex;
  align-items: baseline;
  gap: 3px;

  /* Geser area info sedikit ke kiri */
  margin-left: 4px;
  margin-right: 10px;

  color: #555;

  white-space: nowrap;

  transition: color 0.25s ease;
}

.header-time span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.header-time small {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.05em;

  opacity: 0.7;
}


/* =========================================================
   CV BUTTON
========================================================= */

.cv-button {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  /* Sedikit lebih dekat ke area tengah */
  margin-left: 0;
  margin-right: 6px;

  color: #111;
  text-decoration: none;

  font-size: 11px;
  font-weight: 700;

  background: rgba(0, 0, 0, 0.045);

  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.cv-button:hover {
  background: #111;
  border-color: #111;
  color: #fff;

  transform: translateY(-1px);
}


/* =========================================================
   THEME TOGGLE
========================================================= */

.theme-toggle {
  flex-shrink: 0;

  width: 38px;
  height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-left: 0;
  margin-right: 10px;

  padding: 0;

  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 10px;

  background: rgba(0, 0, 0, 0.045);

  color: #111;

  cursor: pointer;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

/* .theme-toggle:hover {

  background:
    rgba(173, 173, 173, 0.97);
} */


.theme-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 17px;
  line-height: 1;

  transform: translateY(-1px);
}

/* =========================================================
   LET'S TALK
========================================================= */

.header-cta {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 82px;
  height: 38px;

  padding: 0 15px;

  color: #fff;
  background: #111;

  border: 1px solid #111;
  border-radius: 10px;

  text-decoration: none;

  font-size: 11px;
  font-weight: 600;

  white-space: nowrap;

  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.25s ease;
}

.header-cta:hover {
  background: #333;
  border-color: #333;

  transform: translateY(-1px);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.menu-toggle {
  display: none;

  width: 40px;
  height: 40px;

  padding: 0;

  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 5px;

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;

  background: rgba(0, 0, 0, 0.045);

  cursor: pointer;

  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}

.menu-toggle span {
  display: block;

  width: 16px;
  height: 1.5px;

  background: #111;

  border-radius: 2px;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    background 0.25s ease;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.mobile-menu {
  display: none;

  margin-top: 8px;

  padding: 10px;

  background: rgba(255, 255, 255, 0.88);

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.08);

  overflow: hidden;
}

.mobile-menu a {
  display: flex;
  align-items: center;

  min-height: 44px;

  padding: 0 14px;

  color: #444;
  text-decoration: none;

  font-size: 13px;
  font-weight: 500;

  border-radius: 10px;

  transition:
    color 0.2s ease,
    background 0.2s ease;
}

.mobile-menu a:hover {
  color: #111;
  background: rgba(0, 0, 0, 0.05);
}


/* =========================================================
   DARK MODE
========================================================= */

body.dark-mode .header-inner {
  background: rgba(15, 15, 15, 0.90);

  border-color: rgba(255, 255, 255, 0.10);

  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.25);
}


/* LOGO */

body.dark-mode .logo {
  color: #fff;
}


/* NAV */

body.dark-mode .nav a {
  color: #aaa;
}

body.dark-mode .nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}


/* TIME */

body.dark-mode .header-time {
  color: #aaa;
}


/* CV */

body.dark-mode .cv-button {
  color: #010101;

  background: rgb(255, 255, 255);

  border-color: rgba(255, 255, 255, 0.10);
}

body.dark-mode .cv-button:hover {
  color: #f1eeee;
  background: #060606;
  border-color: #fff;
}


/* THEME BUTTON */

body.dark-mode .theme-toggle {
  color: #fff;

  background: rgba(246, 244, 244, 0.973);

  border-color: rgba(255, 255, 255, 0.10);
}




/* LET'S TALK */

body.dark-mode .header-cta {
  color: #111;

  background: #fff;
  border-color: #fff;
}

body.dark-mode .header-cta:hover {
  background: #ddd;
  border-color: #ddd;
}


/* =========================================================
   MOBILE HEADER + MOBILE MENU
   COMPLETE / CLEAN VERSION
========================================================= */


/* =========================================================
   MOBILE MENU — BASE
========================================================= */

.mobile-menu {
  display: block;

  width: 100%;
  box-sizing: border-box;

  margin-top: 8px;
  padding: 10px;

  background: rgba(255, 255, 255, 0.92);

  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.08);

  overflow: hidden;

  /* CLOSED STATE */

  max-height: 0;

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  transform: translateY(-18px);

  transform-origin: top;

  margin-bottom: 0;

  transition:
    max-height 0.45s ease,
    opacity 0.25s ease,
    transform 0.35s ease,
    visibility 0.35s ease,
    margin-bottom 0.35s ease;
}


/* =========================================================
   MOBILE MENU — OPEN STATE
========================================================= */

.mobile-menu.active {
  max-height: 600px;

  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform: translateY(0);

  margin-bottom: 8px;
}


/* =========================================================
   MOBILE MENU LINKS
========================================================= */

.mobile-menu a {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;
  min-height: 44px;

  padding: 0 14px;

  box-sizing: border-box;

  color: #444;

  text-decoration: none;

  font-size: 13px;
  font-weight: 500;

  border-radius: 10px;

  /* INITIAL */

  opacity: 0;

  transform: translateY(-10px);

  transition:
    opacity 0.25s ease,
    transform 0.3s ease,
    color 0.25s ease,
    background 0.25s ease;
}


/* =========================================================
   MOBILE MENU LINKS — OPEN
========================================================= */

.mobile-menu.active a {
  opacity: 1;

  transform: translateY(0);
}


/* =========================================================
   LINK ANIMATION DELAY
========================================================= */

.mobile-menu.active a:nth-child(1) {
  transition-delay: 0.03s;
}

.mobile-menu.active a:nth-child(2) {
  transition-delay: 0.06s;
}

.mobile-menu.active a:nth-child(3) {
  transition-delay: 0.09s;
}

.mobile-menu.active a:nth-child(4) {
  transition-delay: 0.12s;
}

.mobile-menu.active a:nth-child(5) {
  transition-delay: 0.15s;
}

.mobile-menu.active a:nth-child(6) {
  transition-delay: 0.18s;
}

.mobile-menu.active a:nth-child(7) {
  transition-delay: 0.21s;
}

.mobile-menu.active a:nth-child(8) {
  transition-delay: 0.24s;
}


/* =========================================================
   MOBILE MENU — HOVER
========================================================= */

.mobile-menu a:hover {
  color: #111;

  background: rgba(0, 0, 0, 0.045);
}


/* =========================================================
   MOBILE MENU — ACTIVE
========================================================= */

.mobile-menu a.active {
  color: #111;
}


/* =========================================================
   MOBILE MENU — ACTIVE UNDERLINE
========================================================= */

.mobile-menu a.active::after {
  content: "";

  position: absolute;

  left: 14px;
  bottom: 7px;

  width: 18px;
  height: 2px;

  background: currentColor;

  border-radius: 10px;
}


/* =========================================================
   HAMBURGER BUTTON — BASE
========================================================= */

.menu-toggle {
  display: none;

  flex-shrink: 0;

  width: 40px;
  height: 40px;

  margin: 0;
  padding: 0;

  align-items: center;
  justify-content: center;

  flex-direction: column;

  gap: 5px;

  background: rgba(0, 0, 0, 0.045);

  border: 1px solid rgba(0, 0, 0, 0.08);

  border-radius: 10px;

  cursor: pointer;

  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}


/* =========================================================
   HAMBURGER LINES
========================================================= */

.menu-toggle span {
  display: block;

  width: 16px;
  height: 1.5px;

  background: #111;

  border-radius: 2px;

  transition:
    transform 0.25s ease,
    opacity 0.25s ease,
    background 0.25s ease;
}


/* =========================================================
   HAMBURGER ACTIVE → X
========================================================= */

.menu-toggle.active span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}


/* =========================================================
   MOBILE — <= 900px
========================================================= */

@media (max-width: 900px) {

  /* -------------------------------------------------------
     HEADER CONTAINER
  ------------------------------------------------------- */

  .glass-header {
    width: min(100% - 28px, 700px);

    top: 14px;
    left: 50%;

    transform: translateX(-50%);
  }


  /* -------------------------------------------------------
     HEADER INNER
  ------------------------------------------------------- */

  .header-inner {
    width: 100%;

    min-height: 60px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    padding: 0 10px 0 16px;

    border-radius: 16px;
  }


  /* -------------------------------------------------------
     HIDE DESKTOP NAV
  ------------------------------------------------------- */

  .nav {
    display: none !important;
  }


  /* -------------------------------------------------------
     HIDE LET'S TALK
  ------------------------------------------------------- */

  .header-cta {
    display: none !important;
  }


  /* -------------------------------------------------------
     SHOW TIME
  ------------------------------------------------------- */

  .header-time {
    display: flex;

    flex-shrink: 0;

    align-items: baseline;

    gap: 3px;

    margin-left: auto;

    margin-right: 8px;
  }


  /* -------------------------------------------------------
     SHOW CV
  ------------------------------------------------------- */

  .cv-button {
    display: inline-flex;

    flex-shrink: 0;

    align-items: center;

    justify-content: center;

    width: 36px;
    height: 36px;

    margin-left: 0;
    margin-right: 6px;

    padding: 0;

    box-sizing: border-box;

    border-radius: 9px;
  }


  /* -------------------------------------------------------
     SHOW DARK MODE
  ------------------------------------------------------- */

  .theme-toggle {
    display: inline-flex;

    flex-shrink: 0;

    align-items: center;

    justify-content: center;

    width: 36px;
    height: 36px;

    margin-left: 0;
    margin-right: 7px;

    padding: 0;

    box-sizing: border-box;

    border-radius: 9px;
  }


  /* -------------------------------------------------------
     SHOW HAMBURGER
  ------------------------------------------------------- */

  .menu-toggle {
    display: flex;

    flex-shrink: 0;

    width: 40px;
    height: 40px;

    margin: 0;
  }


  /* -------------------------------------------------------
     MOBILE MENU
     
     IMPORTANT:
     JANGAN pakai display:none di sini.
     Animasi menggunakan max-height + opacity.
  ------------------------------------------------------- */

  .mobile-menu {
    display: block;
  }
}


/* =========================================================
   MOBILE DARK MODE
========================================================= */

@media (max-width: 900px) {

  /* -------------------------------------------------------
     HEADER
  ------------------------------------------------------- */

  body.dark-mode .header-inner {
    background: rgba(15, 15, 15, 0.90);

    border-color: rgba(255, 255, 255, 0.10);
  }


  /* -------------------------------------------------------
     TIME
  ------------------------------------------------------- */

  body.dark-mode .header-time {
    color: #aaa;
  }


  /* -------------------------------------------------------
     CV
  ------------------------------------------------------- */

  body.dark-mode .cv-button {
    color: #010101;

    background: rgba(253, 252, 252, 0.977);

    border-color: rgba(0, 0, 0, 0.1);
  }

  body.dark-mode .cv-button:hover {
    color: #f6f4f4;

    background: #0a0a0a;

    border-color: #fff;
  }


  /* -------------------------------------------------------
     THEME
  ------------------------------------------------------- */

  body.dark-mode .theme-toggle {
    color: #fff;

    background: rgba(232, 229, 229, 0.929);

    border-color: rgba(255, 255, 255, 0.10);
  }


  /* -------------------------------------------------------
     HAMBURGER
  ------------------------------------------------------- */

  body.dark-mode .menu-toggle {
    background: rgba(255, 255, 255, 0.07);

    border-color: rgba(255, 255, 255, 0.10);
  }

  body.dark-mode .menu-toggle span {
    background: #fff;
  }


  /* -------------------------------------------------------
     MOBILE MENU
  ------------------------------------------------------- */

  body.dark-mode .mobile-menu {
    background: rgba(15, 15, 15, 0.94);

    border-color: rgba(255, 255, 255, 0.10);

    box-shadow:
      0 12px 35px rgba(0, 0, 0, 0.35);
  }

  body.dark-mode .mobile-menu a {
    color: #aaa;
  }

  body.dark-mode .mobile-menu a:hover {
    color: #fff;

    background: rgba(255, 255, 255, 0.07);
  }

  body.dark-mode .mobile-menu a.active {
    color: #fff;
  }
}


/* =========================================================
   SMALL MOBILE — <= 480px
========================================================= */

@media (max-width: 480px) {

  .glass-header {
    width: calc(100% - 20px);

    top: 10px;
  }


  .header-inner {
    min-height: 56px;

    padding: 0 7px 0 14px;

    border-radius: 15px;
  }


  /* -------------------------------------------------------
     LOGO
  ------------------------------------------------------- */

  .logo {
    font-size: 17px;
  }


  /* -------------------------------------------------------
     TIME
  ------------------------------------------------------- */

  .header-time {
    gap: 2px;

    margin-right: 6px;
  }

  .header-time span {
    font-size: 10px;
  }

  .header-time small {
    font-size: 7px;
  }


  /* -------------------------------------------------------
     CV
  ------------------------------------------------------- */

  .cv-button {
    width: 34px;
    height: 34px;

    margin-right: 5px;

    border-radius: 8px;

    font-size: 10px;
  }


  /* -------------------------------------------------------
     THEME
  ------------------------------------------------------- */

  .theme-toggle {
    width: 34px;
    height: 34px;

    margin-right: 6px;

    border-radius: 8px;
  }

  .theme-icon {
    font-size: 16px;
  }


  /* -------------------------------------------------------
     HAMBURGER
  ------------------------------------------------------- */

  .menu-toggle {
    width: 36px;
    height: 36px;

    border-radius: 9px;
  }

  .menu-toggle span {
    width: 15px;
  }


  /* -------------------------------------------------------
     MOBILE MENU
  ------------------------------------------------------- */

  .mobile-menu {
    margin-top: 6px;

    padding: 8px;

    border-radius: 14px;
  }

  .mobile-menu a {
    min-height: 42px;

    padding: 0 13px;

    font-size: 12px;
  }

  .mobile-menu a.active::after {
    left: 13px;

    bottom: 6px;

    width: 17px;
  }
}


/* =========================================================
   VERY SMALL MOBILE — <= 360px
========================================================= */

@media (max-width: 360px) {

  .glass-header {
    width: calc(100% - 16px);
  }


  .header-inner {
    padding-left: 12px;

    padding-right: 6px;
  }


  .logo {
    font-size: 16px;
  }


  /* TIME */

  .header-time {
    margin-right: 4px;
  }

  .header-time span {
    font-size: 9px;
  }

  .header-time small {
    font-size: 6px;
  }


  /* CV */

  .cv-button {
    width: 32px;
    height: 32px;

    margin-right: 4px;

    font-size: 9px;
  }


  /* THEME */

  .theme-toggle {
    width: 32px;
    height: 32px;

    margin-right: 5px;
  }

  .theme-icon {
    font-size: 15px;
  }


  /* HAMBURGER */

  .menu-toggle {
    width: 34px;
    height: 34px;
  }
}

/* ------------------------------------------------------------------------------------------------------ */


/* ========================================
   HERO SECTION
======================================== */

.hero {
  min-height: 100vh;

  display: flex;
  align-items: center;

  padding: 120px 20px 80px;
}


/* ========================================
   HERO INNER
======================================== */

.hero-inner {
  width: min(1100px, 100%);

  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;

  align-items: center;

  gap: 80px;
}


/* ========================================
   PHOTO
======================================== */

.hero-photo {
  display: flex;

  justify-content: center;
  align-items: center;
}

.hero-photo img {
  display: block;

  width: 280px;
  height: 360px;

  object-fit: cover;

  border-radius: 24px;

  border: 1px solid rgba(255, 255, 255, 0.25);

  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);

  background: rgba(255, 255, 255, 0.12);
}


/* ========================================
   HERO CONTENT
======================================== */

.hero-content {
  max-width: 520px;
}


/* HELLO */

.hero-label {
  margin: 0 0 10px;

  color: rgba(0, 0, 0, 0.5);

  font-size: 15px;
  font-weight: 500;

  letter-spacing: 0.5px;
}


/* NAME */

.hero-name {
  margin: 0;

  color: #000;

  font-size: clamp(60px, 8vw, 100px);

  line-height: 0.95;

  font-weight: 700;

  letter-spacing: -5px;
}


/* SPECIALIZATION */

.hero-role {
  margin: 20px 0 0;

  color: rgba(0, 0, 0, 0.65);

  font-size: 22px;

  font-weight: 500;

  letter-spacing: -0.5px;
}


/* DESCRIPTION */

.hero-description {
  max-width: 450px;

  margin: 20px 0 0;

  color: rgba(0, 0, 0, 0.5);

  font-size: 15px;

  line-height: 1.7;
}


/* ========================================
   BUTTONS
======================================== */

.hero-actions {
  display: flex;

  gap: 10px;

  margin-top: 30px;
}


.hero-button {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 12px 18px;

  border-radius: 12px;

  text-decoration: none;

  font-size: 14px;
  font-weight: 500;

  transition: all 0.25s ease;
}


/* PRIMARY */

.hero-button.primary {
  color: #fff;

  background: #000;
}

.hero-button.primary:hover {
  /* background: rgba(255, 255, 255, 0.059); */

  transform: translateY(-2px);

  box-shadow:
    0 8px 20px rgba(254, 254, 254, 0.15);
}


/* SECONDARY */

.hero-button.secondary {
  color: #000;

  background: rgb(255, 255, 255);

  border: 1px solid rgba(0, 0, 0, 0.08);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-button.secondary:hover {
  background: rgba(255, 255, 255, 0.5);

  transform: translateY(-2px);

    box-shadow:
    0 8px 20px rgba(255, 251, 251, 0.248);
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .hero {
    min-height: auto;

    padding: 120px 20px 70px;
  }


  /* CONTENT JADI 1 KOLOM */

  .hero-inner {
    width: 100%;

    grid-template-columns: 1fr;

    gap: 38px;
  }


  /* ====================================
     PHOTO
  ==================================== */

  .hero-photo {
    order: 1;

    width: 100%;
  }


  .hero-photo img {
    width: 240px;
    height: 300px;

    border-radius: 20px;
  }


  /* ====================================
     TEXT
  ==================================== */

  .hero-content {
    order: 2;

    width: 100%;
    max-width: 100%;

    text-align: center;
  }


  .hero-label {
    margin-bottom: 8px;

    font-size: 14px;
  }


  .hero-name {
    font-size: clamp(56px, 18vw, 80px);

    line-height: 0.95;

    letter-spacing: -4px;
  }


  .hero-role {
    margin-top: 16px;

    font-size: 18px;

    line-height: 1.4;
  }


  .hero-description {
    max-width: 340px;

    margin: 16px auto 0;

    font-size: 14px;

    line-height: 1.65;
  }


  /* ====================================
     BUTTONS
  ==================================== */

  .hero-actions {
    justify-content: center;

    flex-wrap: wrap;

    margin-top: 25px;
  }


  .hero-button {
    padding: 11px 16px;

    font-size: 13px;
  }

}


/* ---------------------------------------------------------------------------------------------------- */

/* ========================================
   ABOUT SECTION
======================================== */

.about {
  padding: 120px 20px;

  background: #f5f5f5;
}


/* ========================================
   ABOUT INNER
======================================== */

.about-inner {
  width: min(1100px, 100%);

  margin: 0 auto;
}


/* ========================================
   SECTION HEADING
======================================== */

.about-heading {
  max-width: 700px;

  margin-bottom: 60px;
}


.section-label {
  margin: 0 0 14px;

  color: rgba(0, 0, 0, 0.45);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}


.about-heading h2 {
  margin: 0;

  color: #000;

  font-size: clamp(42px, 6vw, 72px);

  line-height: 1;

  font-weight: 600;

  letter-spacing: -4px;
}


.about-heading h2 span {
  color: rgba(0, 0, 0, 0.35);
}


/* ========================================
   ABOUT CONTENT
======================================== */

.about-content {
  display: grid;

  grid-template-columns: 1.2fr 0.8fr;

  gap: 80px;

  align-items: start;
}


/* ========================================
   ABOUT TEXT
======================================== */

.about-text {
  max-width: 600px;
}


.about-text p {
  margin: 0 0 20px;

  color: rgba(0, 0, 0, 0.5);

  font-size: 16px;

  line-height: 1.8;
}


.about-text .about-intro {
  margin-bottom: 25px;

  color: rgba(0, 0, 0, 0.8);

  font-size: 20px;

  line-height: 1.6;

  font-weight: 500;

  letter-spacing: -0.3px;
}


/* ========================================
   STATS
======================================== */

.about-stats {
  display: grid;

  grid-template-columns: 1fr;

  gap: 12px;
}


/* ========================================
   STAT CARD
======================================== */

.stat-card {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding: 20px 22px;

  background: rgba(255, 255, 255, 0.18);

  border: 1px solid rgba(0, 0, 0, 0.06);

  border-radius: 16px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.04);

  transition:
    transform 0.25s ease,
    background 0.25s ease;
}


.stat-card:hover {
  transform: translateY(-3px);

  background: rgba(255, 255, 255, 0.4);
}


/* NUMBER */

.stat-number {
  color: #000;

  font-size: 28px;

  font-weight: 600;

  letter-spacing: -1px;
}


/* LABEL */

.stat-label {
  color: rgba(0, 0, 0, 0.45);

  font-size: 13px;

  font-weight: 500;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .about {
    padding: 90px 20px;
  }


  /* HEADING */

  .about-heading {
    margin-bottom: 40px;
  }


  .section-label {
    font-size: 12px;

    margin-bottom: 12px;
  }


  .about-heading h2 {
    font-size: clamp(40px, 12vw, 58px);

    line-height: 1.02;

    letter-spacing: -3px;
  }


  /* CONTENT */

  .about-content {
    grid-template-columns: 1fr;

    gap: 40px;
  }


  /* TEXT */

  .about-text {
    max-width: 100%;
  }


  .about-text .about-intro {
    font-size: 18px;

    line-height: 1.6;
  }


  .about-text p {
    font-size: 15px;

    line-height: 1.75;
  }


  /* STATS */

  .about-stats {
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;
  }


  .stat-card {
    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

    padding: 16px;
  }


  .stat-number {
    font-size: 23px;
  }


  .stat-label {
    font-size: 11px;

    line-height: 1.3;
  }

}


/* ------------------------------------------------------------------------------------------ */


/* ========================================
   SKILLS SECTION
======================================== */

.skills {
  padding: 120px 20px;

  background: #fff;
}


/* ========================================
   SKILLS INNER
======================================== */

.skills-inner {
  width: min(1100px, 100%);

  margin: 0 auto;
}


/* ========================================
   SECTION HEADING
======================================== */

.skills-heading {
  max-width: 700px;

  margin-bottom: 60px;
}


.skills-heading .section-label {
  margin: 0 0 14px;

  color: rgba(0, 0, 0, 0.45);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}


.skills-heading h2 {
  margin: 0;

  color: #000;

  font-size: clamp(42px, 6vw, 72px);

  line-height: 1;

  font-weight: 600;

  letter-spacing: -4px;
}


.skills-heading h2 span {
  color: rgba(0, 0, 0, 0.35);
}


/* ========================================
   SKILLS GRID
======================================== */

.skills-grid {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 16px;
}


/* ========================================
   SKILL CARD
======================================== */

.skill-card {
  position: relative;

  min-height: 320px;

  padding: 28px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  background: rgba(255, 255, 255, 0.5);

  border: 1px solid rgba(0, 0, 0, 0.07);

  border-radius: 22px;

  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.04);

  overflow: hidden;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}


/* HOVER */

.skill-card:hover {
  transform: translateY(-5px);

  background: rgba(255, 255, 255, 0.8);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.08);
}


/* ========================================
   NUMBER
======================================== */

.skill-number {
  color: rgba(0, 0, 0, 0.3);

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 1px;
}


/* ========================================
   SKILL INFO
======================================== */

.skill-info {
  margin-top: 40px;
}


.skill-info h3 {
  margin: 0 0 12px;

  color: #000;

  font-size: 27px;

  font-weight: 600;

  letter-spacing: -1px;
}


.skill-info p {
  max-width: 390px;

  margin: 0;

  color: rgba(0, 0, 0, 0.5);

  font-size: 14px;

  line-height: 1.7;
}


/* ========================================
   SKILL LIST
======================================== */

.skill-list {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 30px;
}


.skill-list span {
  padding: 7px 11px;

  color: rgba(0, 0, 0, 0.6);

  font-size: 11px;

  font-weight: 500;

  background: rgba(0, 0, 0, 0.04);

  border: 1px solid rgba(0, 0, 0, 0.05);

  border-radius: 8px;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .skills {
    padding: 90px 20px;
  }


  /* HEADING */

  .skills-heading {
    margin-bottom: 40px;
  }


  .skills-heading .section-label {
    margin-bottom: 12px;

    font-size: 12px;
  }


  .skills-heading h2 {
    font-size: clamp(40px, 12vw, 58px);

    line-height: 1.02;

    letter-spacing: -3px;
  }


  /* GRID */

  .skills-grid {
    grid-template-columns: 1fr;

    gap: 12px;
  }


  /* CARD */

  .skill-card {
    min-height: 280px;

    padding: 22px;

    border-radius: 18px;
  }


  .skill-info {
    margin-top: 35px;
  }


  .skill-info h3 {
    font-size: 24px;
  }


  .skill-info p {
    font-size: 14px;

    line-height: 1.65;
  }


  .skill-list {
    margin-top: 25px;
  }

}


/* ------------------------------------------------------------------------------ */

/* ========================================
   PROJECTS SECTION
======================================== */

.projects {
  padding: 120px 20px;

  background: #f5f5f5;
}


/* ========================================
   PROJECTS INNER
======================================== */

.projects-inner {
  width: min(1100px, 100%);

  margin: 0 auto;
}


/* ========================================
   HEADING
======================================== */

.projects-heading {
  max-width: 700px;

  margin-bottom: 60px;
}


.projects-heading .section-label {
  margin: 0 0 14px;

  color: rgba(0, 0, 0, 0.45);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}


.projects-heading h2 {
  margin: 0;

  color: #000;

  font-size: clamp(42px, 6vw, 72px);

  line-height: 1;

  font-weight: 600;

  letter-spacing: -4px;
}


.projects-heading h2 span {
  color: rgba(0, 0, 0, 0.35);
}


/* ========================================
   PROJECT LIST
======================================== */

.projects-list {
  display: flex;

  flex-direction: column;

  gap: 80px;
}


/* ========================================
   PROJECT CARD
======================================== */

.project-card {
  width: 100%;
}


/* ========================================
   PROJECT IMAGE
======================================== */

.project-image {
  position: relative;

  width: 100%;

  aspect-ratio: 16 / 9;

  overflow: hidden;

  background: #e9e9e9;

  border: 1px solid rgba(0, 0, 0, 0.06);

  border-radius: 24px;

  box-shadow:
    0 15px 45px rgba(0, 0, 0, 0.06);
}


.project-image img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 0.5s ease;
}


/* IMAGE HOVER */

.project-card:hover .project-image img {
  transform: scale(1.03);
}


/* ========================================
   PROJECT OVERLAY
======================================== */

.project-overlay {
  position: absolute;

  top: 20px;
  right: 20px;

  padding: 10px 14px;

  color: #000;

  font-size: 12px;
  font-weight: 500;

  background: rgba(255, 255, 255, 0.7);

  border: 1px solid rgba(255, 255, 255, 0.7);

  border-radius: 10px;

  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  opacity: 0;

  transform: translateY(-5px);

  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}


.project-card:hover .project-overlay {
  opacity: 1;

  transform: translateY(0);
}


/* ========================================
   PROJECT INFO
======================================== */

.project-info {
  padding-top: 22px;
}


/* ========================================
   PROJECT META
======================================== */

.project-meta {
  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 18px;
}


.project-number {
  color: #000;

  font-size: 13px;

  font-weight: 600;
}


.project-category {
  color: rgba(0, 0, 0, 0.4);

  font-size: 12px;

  font-weight: 500;
}


.project-category::before {
  content: "•";

  margin-right: 12px;

  color: rgba(0, 0, 0, 0.25);
}


/* ========================================
   PROJECT DETAILS
======================================== */

.project-details {
  display: grid;

  grid-template-columns: 1fr auto;

  gap: 40px;

  align-items: end;
}


.project-details h3 {
  margin: 0 0 10px;

  color: #000;

  font-size: 32px;

  font-weight: 600;

  letter-spacing: -1.5px;
}


.project-details p {
  max-width: 550px;

  margin: 0;

  color: rgba(0, 0, 0, 0.5);

  font-size: 14px;

  line-height: 1.7;
}


/* ========================================
   PROJECT TAGS
======================================== */

.project-tags {
  display: flex;

  flex-wrap: wrap;

  justify-content: flex-end;

  gap: 7px;
}


.project-tags span {
  padding: 7px 10px;

  color: rgba(0, 0, 0, 0.55);

  font-size: 11px;

  font-weight: 500;

  background: rgba(255, 255, 255, 0.5);

  border: 1px solid rgba(0, 0, 0, 0.06);

  border-radius: 8px;
}


/* ========================================
   PROJECT LINK
======================================== */

.project-link {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  margin-top: 22px;

  color: #000;

  text-decoration: none;

  font-size: 13px;

  font-weight: 500;

  transition:
    gap 0.25s ease;
}


.project-link span {
  font-size: 16px;

  transition:
    transform 0.25s ease;
}


.project-link:hover {
  gap: 12px;
}


.project-link:hover span {
  transform: translate(2px, -2px);
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .projects {
    padding: 90px 20px;
  }


  /* HEADING */

  .projects-heading {
    margin-bottom: 40px;
  }


  .projects-heading .section-label {
    margin-bottom: 12px;

    font-size: 12px;
  }


  .projects-heading h2 {
    font-size: clamp(40px, 12vw, 58px);

    line-height: 1.02;

    letter-spacing: -3px;
  }


  /* PROJECT LIST */

  .projects-list {
    gap: 55px;
  }


  /* IMAGE */

  .project-image {
    aspect-ratio: 4 / 3;

    border-radius: 18px;
  }


  .project-overlay {
    top: 12px;
    right: 12px;

    opacity: 1;

    transform: none;

    padding: 8px 11px;

    font-size: 11px;
  }


  /* INFO */

  .project-info {
    padding-top: 18px;
  }


  .project-meta {
    margin-bottom: 14px;
  }


  .project-details {
    grid-template-columns: 1fr;

    gap: 20px;
  }


  .project-details h3 {
    font-size: 27px;

    letter-spacing: -1px;
  }


  .project-details p {
    font-size: 14px;

    line-height: 1.65;
  }


  /* TAGS */

  .project-tags {
    justify-content: flex-start;
  }


  .project-tags span {
    font-size: 10px;

    padding: 6px 9px;
  }


  .project-link {
    margin-top: 20px;
  }

}


/* ------------------------------------------------------------------------------- */

/* ========================================
   JOURNEY SECTION
======================================== */

.journey {
  padding: 120px 20px;

  background: #fff;
}


/* ========================================
   JOURNEY INNER
======================================== */

.journey-inner {
  width: min(1100px, 100%);

  margin: 0 auto;
}


/* ========================================
   HEADING
======================================== */

.journey-heading {
  max-width: 700px;

  margin-bottom: 70px;
}


.journey-heading .section-label {
  margin: 0 0 14px;

  color: rgba(0, 0, 0, 0.45);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}


.journey-heading h2 {
  margin: 0;

  color: #000;

  font-size: clamp(42px, 6vw, 72px);

  line-height: 1;

  font-weight: 600;

  letter-spacing: -4px;
}


.journey-heading h2 span {
  color: rgba(0, 0, 0, 0.35);
}


/* ========================================
   JOURNEY LIST
======================================== */

.journey-list {
  display: flex;

  flex-direction: column;
}


/* ========================================
   JOURNEY ITEM
======================================== */

.journey-item {
  display: grid;

  grid-template-columns: 100px 30px 1fr;

  gap: 25px;

  min-height: 190px;
}


/* ========================================
   YEAR
======================================== */

.journey-year {
  padding-top: 4px;

  color: rgba(0, 0, 0, 0.4);

  font-size: 13px;

  font-weight: 600;

  letter-spacing: 1px;
}


/* ========================================
   TIMELINE LINE
======================================== */

.journey-line {
  position: relative;

  display: flex;

  justify-content: center;
}


.journey-line::before {
  content: "";

  position: absolute;

  top: 7px;
  bottom: 0;

  width: 1px;

  background: rgba(0, 0, 0, 0.1);
}


.journey-line span {
  position: relative;

  z-index: 2;

  width: 10px;
  height: 10px;

  margin-top: 3px;

  background: #fff;

  border: 2px solid #000;

  border-radius: 50%;
}


/* ========================================
   JOURNEY CONTENT
======================================== */

.journey-content {
  padding-bottom: 55px;
}


.journey-label {
  margin: 0 0 8px;

  color: rgba(0, 0, 0, 0.4);

  font-size: 12px;

  font-weight: 600;

  letter-spacing: 1px;

  text-transform: uppercase;
}


.journey-content h3 {
  margin: 0 0 12px;

  color: #000;

  font-size: 27px;

  font-weight: 600;

  letter-spacing: -1px;
}


.journey-description {
  max-width: 560px;

  margin: 0;

  color: rgba(0, 0, 0, 0.5);

  font-size: 14px;

  line-height: 1.7;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .journey {
    padding: 90px 20px;
  }


  /* HEADING */

  .journey-heading {
    margin-bottom: 50px;
  }


  .journey-heading .section-label {
    margin-bottom: 12px;

    font-size: 12px;
  }


  .journey-heading h2 {
    font-size: clamp(40px, 12vw, 58px);

    line-height: 1.02;

    letter-spacing: -3px;
  }


  /* TIMELINE */

  .journey-item {
    grid-template-columns: 55px 20px 1fr;

    gap: 12px;

    min-height: 180px;
  }


  /* YEAR */

  .journey-year {
    font-size: 11px;

    padding-top: 2px;
  }


  /* LINE */

  .journey-line::before {
    top: 6px;
  }


  .journey-line span {
    width: 9px;
    height: 9px;

    margin-top: 2px;
  }


  /* CONTENT */

  .journey-content {
    padding-bottom: 45px;
  }


  .journey-label {
    margin-bottom: 7px;

    font-size: 10px;
  }


  .journey-content h3 {
    font-size: 22px;

    line-height: 1.2;

    letter-spacing: -0.7px;
  }


  .journey-description {
    font-size: 13px;

    line-height: 1.65;
  }

}


/* ----------------------------------------------------------------------------------------------------- */

/* ========================================
   CONTACT SECTION
======================================== */

.contact {
  padding: 140px 20px;

  background: #f5f5f5;
}


.contact-inner {
  width: min(1100px, 100%);

  margin: 0 auto;
}


/* ========================================
   HEADING
======================================== */

.contact-heading {
  max-width: 850px;
}


.contact-heading .section-label {
  margin: 0 0 18px;

  color: rgba(0, 0, 0, 0.45);

  font-size: 13px;
  font-weight: 600;

  letter-spacing: 1.5px;

  text-transform: uppercase;
}


.contact-heading h2 {
  margin: 0;

  color: #000;

  font-size: clamp(48px, 7vw, 88px);

  line-height: 0.98;

  font-weight: 600;

  letter-spacing: -5px;
}


.contact-heading h2 span {
  display: block;

  color: rgba(0, 0, 0, 0.35);
}


/* ========================================
   DESCRIPTION
======================================== */

.contact-description {
  max-width: 500px;

  margin: 30px 0 0;

  color: rgba(0, 0, 0, 0.5);

  font-size: 15px;

  line-height: 1.7;
}


/* ========================================
   CONTACT ACTION
======================================== */

.contact-action {
  margin-top: 65px;
}


.contact-email {
  display: flex;

  align-items: center;
  justify-content: space-between;

  width: min(700px, 100%);

  padding: 22px 24px;

  color: #000;

  background: rgba(255, 255, 255, 0.7);

  border: 1px solid rgba(0, 0, 0, 0.08);

  border-radius: 18px;

  text-decoration: none;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.04);

  transition:
    transform 0.3s ease,
    background 0.3s ease,
    box-shadow 0.3s ease;
}


.contact-email span:first-child {
  font-size: 17px;

  font-weight: 500;
}


.contact-arrow {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 42px;
  height: 42px;

  color: #fff;

  background: #000;

  border-radius: 50%;

  font-size: 20px;

  transition:
    transform 0.3s ease;
}


.contact-email:hover {
  transform: translateY(-4px);

  background: #fff;

  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.08);
}


.contact-email:hover .contact-arrow {
  transform: rotate(45deg);
}


/* ========================================
   SOCIAL LINKS
======================================== */

.contact-socials {
  display: flex;

  align-items: center;

  gap: 30px;

  margin-top: 65px;

  padding-top: 25px;

  border-top: 1px solid rgba(0, 0, 0, 0.1);
}


.contact-socials a {
  position: relative;

  color: rgba(0, 0, 0, 0.55);

  font-size: 13px;

  font-weight: 500;

  text-decoration: none;

  transition:
    color 0.25s ease;
}


.contact-socials a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -5px;

  width: 0;
  height: 1px;

  background: #000;

  transition:
    width 0.25s ease;
}


.contact-socials a:hover {
  color: #000;
}


.contact-socials a:hover::after {
  width: 100%;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .contact {
    padding: 90px 20px;
  }


  /* HEADING */

  .contact-heading .section-label {
    margin-bottom: 14px;

    font-size: 11px;
  }


  .contact-heading h2 {
    font-size: clamp(42px, 12vw, 62px);

    line-height: 1;

    letter-spacing: -3px;
  }


  .contact-description {
    margin-top: 24px;

    font-size: 13px;

    line-height: 1.7;
  }


  /* EMAIL */

  .contact-action {
    margin-top: 45px;
  }


  .contact-email {
    padding: 17px 18px;

    border-radius: 16px;
  }


  .contact-email span:first-child {
    font-size: 14px;
  }


  .contact-arrow {
    width: 38px;
    height: 38px;

    font-size: 18px;
  }


  /* SOCIAL */

  .contact-socials {
    flex-wrap: wrap;

    gap: 18px 25px;

    margin-top: 50px;

    padding-top: 22px;
  }


  .contact-socials a {
    font-size: 12px;
  }

}

/* ------------------------------------------------------------------------------------- */

/* ========================================
   FOOTER
======================================== */

.footer {
  padding: 35px 20px 30px;

  background: #000;

  color: #fff;
}


.footer-inner {
  width: min(1100px, 100%);

  margin: 0 auto;
}


/* ========================================
   FOOTER TOP
======================================== */

.footer-top {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding-bottom: 35px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}


/* ========================================
   LOGO
======================================== */

.footer-logo {
  color: #fff;

  font-size: 22px;

  font-weight: 700;

  letter-spacing: -1px;

  text-decoration: none;
}


/* ========================================
   BACK TO TOP
======================================== */

.back-to-top {
  display: flex;

  align-items: center;

  gap: 10px;

  color: rgba(255, 255, 255, 0.65);

  font-size: 12px;

  text-decoration: none;

  transition:
    color 0.25s ease;
}


.back-to-top span {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  color: #000;

  background: #fff;

  border-radius: 50%;

  font-size: 16px;

  transition:
    transform 0.25s ease;
}


.back-to-top:hover {
  color: #fff;
}


.back-to-top:hover span {
  transform: translateY(-3px);
}


/* ========================================
   FOOTER BOTTOM
======================================== */

.footer-bottom {
  display: flex;

  align-items: center;
  justify-content: space-between;

  padding-top: 25px;
}


.footer-bottom p {
  margin: 0;

  color: rgba(255, 255, 255, 0.4);

  font-size: 11px;

  line-height: 1.5;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .footer {
    padding: 30px 20px 25px;
  }


  .footer-top {
    padding-bottom: 28px;
  }


  .footer-logo {
    font-size: 20px;
  }


  .back-to-top {
    font-size: 11px;
  }


  .back-to-top span {
    width: 30px;
    height: 30px;

    font-size: 15px;
  }


  .footer-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 8px;

    padding-top: 22px;
  }


  .footer-bottom p {
    font-size: 10px;
  }

}

/* ------------------------------------------------------------------------------ */

/* ========================================
   SCROLL ANIMATION
======================================== */

.reveal {
  opacity: 0;

  transform: translateY(35px);

  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}


.reveal.active {
  opacity: 1;

  transform: translateY(0);
}


/* ========================================
   REVEAL DELAY
======================================== */

.reveal-delay-1 {
  transition-delay: 0.1s;
}


.reveal-delay-2 {
  transition-delay: 0.2s;
}


.reveal-delay-3 {
  transition-delay: 0.3s;
}


.reveal-delay-4 {
  transition-delay: 0.4s;
}


/* ========================================
   SMOOTH SCROLL
======================================== */

html {
  scroll-behavior: smooth;

  scroll-padding-top: 100px;
}


/* ========================================
   RESPECT REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;

    transform: none;

    transition: none;
  }

}

/* ------------------------------------------------------------------------- */

/* ========================================
   DARK MODE — PREMIUM THEME
======================================== */

body.dark-mode {

  --bg-main: #0b0b0b;
  --bg-secondary: #121212;

  --text-main: #f5f5f5;
  --text-secondary: #a1a1a1;
  --text-muted: #737373;

  --border: rgba(255, 255, 255, 0.10);

  --card-bg: #181818;

  --black: #ffffff;
  --white: #0b0b0b;
}


/* ========================================
   GLOBAL
======================================== */

body.dark-mode {
  background: var(--bg-main);
  color: var(--text-main);
}


/* ========================================
   SECTION BACKGROUNDS
======================================== */

body.dark-mode .hero,
body.dark-mode .skills,
body.dark-mode .journey {
  background: #0b0b0b;
}


body.dark-mode .about,
body.dark-mode .projects,
body.dark-mode .contact {
  background: #121212;
}


/* ========================================
   HEADER
======================================== */

body.dark-mode .header {

  background: rgba(15, 15, 15, 0.78);

  border-color:
    rgba(255, 255, 255, 0.10);

  box-shadow:
    0 10px 35px rgba(0, 0, 0, 0.30);
}


body.dark-mode .logo {
  color: #f5f5f5;
}



/* ========================================
   THEME BUTTON
======================================== */

body.dark-mode .theme-toggle {

  color: #070707;

  background:
    rgba(255, 255, 255, 0.06);

  border-color:
    rgba(255, 255, 255, 0.10);
}

/* ini */
/* body.dark-mode .theme-toggle:hover {

  background:
    rgba(173, 173, 173, 0.97);
} */


/* ========================================
   HERO
======================================== */

body.dark-mode .hero h1,
body.dark-mode .hero h2,
body.dark-mode .hero h3 {

  color: #f5f5f5;
}


body.dark-mode .hero p {

  color: #a1a1a1;
}


body.dark-mode .hero .btn-primary {

  color: #0b0b0b;

  background: #f5f5f5;
}


body.dark-mode .hero .btn-primary:hover {

  background: #fff;
}


body.dark-mode .hero .btn-secondary {

  color: #f5f5f5;

  border-color:
    rgba(255, 255, 255, 0.15);
}


/* ========================================
   SECTION HEADINGS
======================================== */

body.dark-mode .section-label {

  color: #737373;
}


body.dark-mode .about-heading h2,
body.dark-mode .skills-heading h2,
body.dark-mode .projects-heading h2,
body.dark-mode .journey-heading h2,
body.dark-mode .contact-heading h2 {

  color: #f5f5f5;
}


body.dark-mode .about-heading h2 span,
body.dark-mode .skills-heading h2 span,
body.dark-mode .projects-heading h2 span,
body.dark-mode .journey-heading h2 span,
body.dark-mode .contact-heading h2 span {

  color: #737373;
}


/* ========================================
   ABOUT
======================================== */

body.dark-mode .about-text {
  color: #a1a1a1;
}


body.dark-mode .about-text p {
  color: #a1a1a1;
}


body.dark-mode .about-text .about-intro {
  color: #d4d4d4;
}


body.dark-mode .stat-card {
  background: #181818;

  border-color:
    rgba(255, 255, 255, 0.08);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.20);
}


body.dark-mode .stat-number {
  color: #f5f5f5;
}


body.dark-mode .stat-label {
  color: #737373;
}


/* ========================================
   SKILLS
======================================== */

body.dark-mode .skill-card {

  background: #181818;

  border-color:
    rgba(255, 255, 255, 0.08);

  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.20);
}


body.dark-mode .skill-card:hover {

  background: #1c1c1c;

  border-color:
    rgba(255, 255, 255, 0.14);
}


body.dark-mode .skill-number {

  color: #737373;
}


body.dark-mode .skill-card h3 {

  color: #f5f5f5;
}


body.dark-mode .skill-card p {

  color: #8f8f8f;
}


/* SKILL TAGS */

body.dark-mode .skill-list span {

  color: #a1a1a1;

  background:
    rgba(255, 255, 255, 0.05);

  border: 1px solid
    rgba(255, 255, 255, 0.08);
}


body.dark-mode .skill-list span:hover {

  color: #f5f5f5;

  background:
    rgba(255, 255, 255, 0.08);

  border-color:
    rgba(255, 255, 255, 0.14);
}



/* ========================================
   PROJECTS
======================================== */

body.dark-mode .project-card {

  background: transparent;

  border-color:
    rgba(255, 255, 255, 0.08);
}


body.dark-mode .project-meta {

  color: #737373;
}


body.dark-mode .project-number,
body.dark-mode .project-category {

  color: #737373;
}


body.dark-mode .project-details h3 {

  color: #f5f5f5;
}


body.dark-mode .project-details p {

  color: #8f8f8f;
}


body.dark-mode .project-tags span {

  color: #a1a1a1;

  background:
    rgba(255, 255, 255, 0.05);

  border-color:
    rgba(255, 255, 255, 0.08);
}


body.dark-mode .project-link {

  color: #f5f5f5;
}


body.dark-mode .project-overlay {

  background:
    rgba(0, 0, 0, 0.55);

  color: #fff;
}


/* ========================================
   JOURNEY
======================================== */

body.dark-mode .journey-year {

  color: #737373;
}


body.dark-mode .journey-label {

  color: #737373;
}


body.dark-mode .journey-content h3 {

  color: #f5f5f5;
}


body.dark-mode .journey-description {

  color: #8f8f8f;
}


body.dark-mode .journey-line::before {

  background:
    rgba(255, 255, 255, 0.12);
}


body.dark-mode .journey-line span {

  background: #0b0b0b;

  border-color: #f5f5f5;
}


/* ========================================
   CONTACT
======================================== */

body.dark-mode .contact-description {

  color: #8f8f8f;
}


body.dark-mode .contact-email {

  color: #f5f5f5;

  background: #181818;

  border-color:
    rgba(255, 255, 255, 0.08);

  box-shadow:
    0 12px 35px rgba(0, 0, 0, 0.25);
}


body.dark-mode .contact-email:hover {

  background: #1d1d1d;

  border-color:
    rgba(255, 255, 255, 0.14);
}


body.dark-mode .contact-arrow {

  color: #0b0b0b;

  background: #f5f5f5;
}


body.dark-mode .contact-socials {

  border-color:
    rgba(255, 255, 255, 0.10);
}


body.dark-mode .contact-socials a {

  color: #737373;
}


body.dark-mode .contact-socials a:hover {

  color: #f5f5f5;
}


/* ========================================
   FOOTER
======================================== */

body.dark-mode .footer {

  background: #050505;
}


body.dark-mode .footer-top {

  border-color:
    rgba(255, 255, 255, 0.10);
}


body.dark-mode .footer-logo {

  color: #f5f5f5;
}


body.dark-mode .footer-bottom p {

  color: #555;
}


body.dark-mode .back-to-top {

  color: #737373;
}


body.dark-mode .back-to-top:hover {

  color: #f5f5f5;
}


body.dark-mode .back-to-top span {

  color: #0b0b0b;

  background: #f5f5f5;
}


/* ------------------------------------ */

/* ========================================
   THEME TRANSITION
======================================== */

html,
body,
.header,
.theme-toggle,
.hero,
.about,
.skills,
.projects,
.journey,
.certificates,
.contact,
.footer,
.skill-card,
.stat-card,
.project-card,
.project-details,
.project-tags span,
.certificate-item,
.certificate-group-header,
.certificate-arrow,
.contact-email,
.contact-socials,
.btn-primary,
.btn-secondary {
  transition:
    background-color 0.4s ease,
    color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
}





/* ========================================
   HEADER TIME
======================================== */

.header-time {
  display: flex;
  align-items: baseline;
  gap: 5px;

  color: #737373;

  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;

  white-space: nowrap;

  transition:
    color 0.4s ease,
    opacity 0.3s ease;
}

.header-time small {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

body.dark-mode .header-time {
  color: #8f8f8f;
}


/* ========================================
   DARK MODE — THEME TOGGLE
======================================== */

body.dark-mode .theme-toggle {
  color: #f5f5f5;

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.10);
}


/* ========================================
   DARK MODE — LET'S TALK
======================================== */

body.dark-mode .header-cta {
  color: #0b0b0b;

  background: #f5f5f5;

  border-color: #f5f5f5;
}

body.dark-mode .header-cta:hover {
  color: #0b0b0b;

  background: #ffffff;

  border-color: #ffffff;
}


/* ========================================
   MOBILE — HEADER TIME
======================================== */

@media (max-width: 768px) {

  .header-time {
    display: flex;

    font-size: 11px;

    gap: 3px;
  }

  .header-time small {
    font-size: 8px;
  }

}

/* ========================================
   CLOCK SECOND ANIMATION
======================================== */

.clock-time {
  display: inline-flex;
  align-items: baseline;
}

.clock-seconds {
  display: inline-block;
  min-width: 18px;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.clock-seconds.tick {
  animation: clockTick 0.35s ease;
}

@keyframes clockTick {
  0% {
    opacity: 0.45;
    transform: translateY(2px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ------------------------------------------------------------------------ */

/* ========================================
   CERTIFICATES
======================================== */

.certificates {
  padding: 120px 20px;
  background: #f5f5f5;
}

.certificates-inner {
  width: min(1100px, 100%);
  margin: 0 auto;
}


/* HEADING */

.certificates-heading {
  max-width: 720px;
  margin-bottom: 80px;
}

.certificates-heading h2 {
  margin: 0;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #111;
}

.certificates-heading h2 span {
  display: block;
  color: #999;
}

.certificates-description {
  max-width: 560px;
  margin-top: 24px;

  font-size: 16px;
  line-height: 1.8;
  color: #737373;
}


/* GROUP */

.certificates-list {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.certificate-group {
  width: 100%;
}

.certificate-group-header {
  display: flex;
  align-items: center;
  gap: 18px;

  padding-bottom: 20px;

  border-bottom: 1px solid #dcdcdc;
}

/* ========================================
   CERTIFICATE CATEGORY ICONS
======================================== */

.certificate-group-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.certificate-icon {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #dcdcdc;
  border-radius: 50%;

  color: #111;
  background: rgba(255, 255, 255, 0.5);

  flex-shrink: 0;

  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease;
}

.certificate-icon svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.7;
}

.certificate-group-header:hover .certificate-icon {
  color: #fff;
  background: #111;
  border-color: #111;
  transform: translateY(-2px);
}


/* ========================================
   DARK MODE
======================================== */

body.dark-mode .certificate-icon {
  color: #f5f5f5;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .certificate-group-header:hover .certificate-icon {
  color: #0b0b0b;
  background: #f5f5f5;
  border-color: #f5f5f5;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .certificate-group-header {
    gap: 12px;
  }

  .certificate-icon {
    width: 30px;
    height: 30px;
  }

  .certificate-icon svg {
    width: 14px;
    height: 14px;
  }

}

.certificate-index {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #999;
}

.certificate-group-header h3 {
  margin: 0;

  font-size: 18px;
  font-weight: 600;

  color: #111;
}


/* ITEMS */

.certificate-items {
  display: flex;
  flex-direction: column;
}

.certificate-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;

  padding: 24px 0;

  text-decoration: none;

  border-bottom: 1px solid #e2e2e2;

  transition:
    padding 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.certificate-item h4 {
  margin: 0 0 7px;

  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;

  color: #111;

  transition:
    color 0.3s ease,
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.certificate-item p {
  margin: 0;

  font-size: 13px;
  line-height: 1.5;

  color: #999;

  transition: color 0.3s ease;
}


/* all ARROW */

.certificate-arrow {
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 34px;
  height: 34px;

  border: 1px solid #ddd;
  border-radius: 50%;

  font-size: 15px;

  color: #111;

  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}


/* HOVER */

.certificate-item:hover {
  padding-left: 10px;
  padding-right: 10px;

  border-color: #cfcfcf;
}

.certificate-item:hover h4 {
  transform: translateX(4px);
}

.certificate-item:hover p {
  color: #737373;
}

.certificate-item:hover .certificate-arrow {
  transform: translate(3px, -3px);

  color: #fff;
  background: #111;
  border-color: #111;
}


/* ========================================
   DARK MODE
======================================== */

body.dark-mode .certificates {
  background: #121212;
}

body.dark-mode .certificates-heading h2 {
  color: #f5f5f5;
}

body.dark-mode .certificates-heading h2 span {
  color: #737373;
}

body.dark-mode .certificates-description {
  color: #8f8f8f;
}

body.dark-mode .certificate-group-header {
  border-color: rgba(255, 255, 255, 0.10);
}

body.dark-mode .certificate-index {
  color: #737373;
}

body.dark-mode .certificate-group-header h3 {
  color: #f5f5f5;
}

body.dark-mode .certificate-item {
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .certificate-item h4 {
  color: #f5f5f5;
}

body.dark-mode .certificate-item p {
  color: #737373;
}

body.dark-mode .certificate-item:hover {
  border-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode .certificate-item:hover p {
  color: #a1a1a1;
}

body.dark-mode .certificate-arrow {
  color: #f5f5f5;
  border-color: rgba(255, 255, 255, 0.12);
}

body.dark-mode .certificate-item:hover .certificate-arrow {
  color: #0b0b0b;
  background: #f5f5f5;
  border-color: #f5f5f5;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .certificates {
    padding: 90px 20px;
  }

  .certificates-heading {
    margin-bottom: 60px;
  }

  .certificates-heading h2 {
    font-size: 38px;
  }

  .certificates-description {
    font-size: 14px;
    line-height: 1.7;
  }

  .certificates-list {
    gap: 60px;
  }

  .certificate-group-header {
    gap: 12px;
  }

  .certificate-group-header h3 {
    font-size: 16px;
  }

  .certificate-item {
    gap: 18px;
    padding: 20px 0;
  }

  .certificate-item h4 {
    font-size: 14px;
  }

  .certificate-item p {
    font-size: 12px;
  }

  .certificate-arrow {
    width: 30px;
    height: 30px;
    font-size: 13px;
  }

  .certificate-item:hover {
    padding-left: 4px;
    padding-right: 4px;
  }

}


body.dark-mode .menu-toggle span {
  background: #f5f5f5;
}


/* ----------------------------------------------------------------------------------------------- */

/* ========================================
   BEYOND CODE
======================================== */

.beyond-code {
  padding: 120px 20px;
  background: #fff;
}

.beyond-inner {
  width: min(1100px, 100%);
  margin: 0 auto;
}

.beyond-heading {
  max-width: 720px;
  margin-bottom: 70px;
}

.beyond-heading h2 {
  margin: 0;
  font-size: clamp(36px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: #111;
}

.beyond-heading h2 span {
  display: block;
  color: #999;
}

.beyond-description {
  max-width: 560px;
  margin-top: 24px;

  font-size: 16px;
  line-height: 1.8;
  color: #737373;
}


/* ========================================
   GRID
======================================== */

.beyond-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.beyond-card {
  min-height: 250px;
  padding: 28px;

  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background: #f7f7f7;
  border: 1px solid #e5e5e5;
  border-radius: 20px;

  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.beyond-card:hover {
  transform: translateY(-5px);

  background: #fff;
  border-color: #d8d8d8;

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.07);
}


/* ========================================
   CARD TOP
======================================== */

.beyond-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.beyond-icon {
  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #ddd;
  border-radius: 50%;

  color: #111;
  background: #fff;

  transition:
    color 0.3s ease,
    background-color 0.3s ease,
    border-color 0.3s ease,
    transform 0.35s ease;
}

.beyond-icon svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.7;
}

.beyond-number {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #aaa;
}


/* ========================================
   CARD CONTENT
======================================== */

.beyond-card-content h3 {
  margin: 0 0 10px;

  font-size: 20px;
  font-weight: 600;
  color: #111;
}

.beyond-card-content p {
  max-width: 360px;
  margin: 0;

  font-size: 14px;
  line-height: 1.7;
  color: #737373;
}

.beyond-card:hover .beyond-icon {
  color: #fff;
  background: #111;
  border-color: #111;
  transform: translateY(-2px);
}


/* ========================================
   DARK MODE
======================================== */

body.dark-mode .beyond-code {
  background: #0b0b0b;
}

body.dark-mode .beyond-heading h2 {
  color: #f5f5f5;
}

body.dark-mode .beyond-heading h2 span {
  color: #737373;
}

body.dark-mode .beyond-description {
  color: #8f8f8f;
}

body.dark-mode .beyond-card {
  background: #181818;
  border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .beyond-card:hover {
  background: #1d1d1d;
  border-color: rgba(255, 255, 255, 0.14);

  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.28);
}

body.dark-mode .beyond-icon {
  color: #f5f5f5;
  background: #121212;
  border-color: rgba(255, 255, 255, 0.10);
}

body.dark-mode .beyond-card:hover .beyond-icon {
  color: #0b0b0b;
  background: #f5f5f5;
  border-color: #f5f5f5;
}

body.dark-mode .beyond-number {
  color: #555;
}

body.dark-mode .beyond-card-content h3 {
  color: #f5f5f5;
}

body.dark-mode .beyond-card-content p {
  color: #8f8f8f;
}


/* ========================================
   MOBILE
======================================== */

@media (max-width: 768px) {

  .beyond-code {
    padding: 90px 20px;
  }

  .beyond-heading {
    margin-bottom: 55px;
  }

  .beyond-heading h2 {
    font-size: 38px;
  }

  .beyond-description {
    font-size: 14px;
    line-height: 1.7;
  }

  .beyond-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .beyond-card {
    min-height: 220px;
    padding: 24px;
  }

  .beyond-card-content h3 {
    font-size: 18px;
  }

  .beyond-card-content p {
    font-size: 13px;
  }

}



/* --------------------------------------------------- */


/* ========================================
   PROJECT FADE IN
======================================== */

.project-card {
  opacity: 0;
  transform: translateY(35px);

  transition:
    opacity 0.8s ease,
    transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* PROJECT MASUK VIEWPORT */

.project-card.project-active {
  opacity: 1;
  transform: translateY(0);
}


/* ========================================
   PROJECT IMAGE
======================================== */

.project-card .project-image {
  opacity: 0;
  transform: translateY(20px) scale(0.985);

  transition:
    opacity 0.8s ease 0.05s,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}


.project-card.project-active .project-image {
  opacity: 1;
  transform: translateY(0) scale(1);
}


/* ========================================
   PROJECT META
======================================== */

.project-card .project-meta {
  opacity: 0;
  transform: translateY(15px);

  transition:
    opacity 0.6s ease 0.15s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}


.project-card.project-active .project-meta {
  opacity: 1;
  transform: translateY(0);
}


/* ========================================
   PROJECT DETAILS
======================================== */

.project-card .project-details {
  opacity: 0;
  transform: translateY(18px);

  transition:
    opacity 0.7s ease 0.25s,
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}


.project-card.project-active .project-details {
  opacity: 1;
  transform: translateY(0);
}


/* ========================================
   PROJECT TAGS
======================================== */

.project-card .project-tags span {
  opacity: 0;
  transform: translateY(8px);

  transition:
    opacity 0.45s ease,
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}


.project-card.project-active .project-tags span {
  opacity: 1;
  transform: translateY(0);
}


.project-card.project-active
.project-tags span:nth-child(1) {
  transition-delay: 0.35s;
}

.project-card.project-active
.project-tags span:nth-child(2) {
  transition-delay: 0.40s;
}

.project-card.project-active
.project-tags span:nth-child(3) {
  transition-delay: 0.45s;
}

.project-card.project-active
.project-tags span:nth-child(4) {
  transition-delay: 0.50s;
}

.project-card.project-active
.project-tags span:nth-child(5) {
  transition-delay: 0.55s;
}

.project-card.project-active
.project-tags span:nth-child(6) {
  transition-delay: 0.60s;
}


/* ========================================
   PROJECT LINK
======================================== */

.project-card .project-link {
  opacity: 0;
  transform: translateY(15px);

  transition:
    opacity 0.6s ease 0.45s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}


.project-card.project-active .project-link {
  opacity: 1;
  transform: translateY(0);
}


/* ========================================
   IMAGE HOVER
======================================== */

.project-image img {
  transition:
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}


.project-card:hover .project-image img {
  transform: scale(1.035);
}


/* ========================================
   REDUCED MOTION
======================================== */

@media (prefers-reduced-motion: reduce) {

  .project-card,
  .project-card .project-image,
  .project-card .project-meta,
  .project-card .project-details,
  .project-card .project-tags span,
  .project-card .project-link {
    opacity: 1;
    transform: none;
    transition: none;
  }

}

/* ---------------------------------------------------------- */

/* ========================================
   HERO ENTRANCE FADE
======================================== */

.hero-photo {
  opacity: 0;
  transform: translateY(25px);
  animation: heroFadeUp 0.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.1s forwards;
}

.hero-label {
  opacity: 0;
  transform: translateY(18px);
  animation: heroFadeUp 0.7s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.25s forwards;
}

.hero-name {
  opacity: 0;
  transform: translateY(22px);
  animation: heroFadeUp 0.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.35s forwards;
}

.hero-role {
  opacity: 0;
  transform: translateY(18px);
  animation: heroFadeUp 0.7s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.45s forwards;
}

.hero-description {
  opacity: 0;
  transform: translateY(18px);
  animation: heroFadeUp 0.8s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.55s forwards;
}

.hero-actions {
  opacity: 0;
  transform: translateY(18px);
  animation: heroFadeUp 0.7s
    cubic-bezier(0.22, 1, 0.36, 1)
    0.7s forwards;
}


@keyframes heroFadeUp {

  0% {
    opacity: 0;
    transform: translateY(25px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  .hero-photo,
  .hero-label,
  .hero-name,
  .hero-role,
  .hero-description,
  .hero-actions {
    opacity: 1;
    transform: none;
    animation: none;
  }

}


/* ------------------------------------------------------- */

/* ========================================
   SKILLS — FADE IN ON SCROLL
======================================== */

.skill-card.skill-fade {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
}


/* ========================================
   CARD VISIBLE
======================================== */

.skill-card.skill-fade.show {
  opacity: 1;
  transform: translateY(0);
}


/* ========================================
   STAGGER EFFECT
======================================== */

.skill-card.skill-fade:nth-child(1) {
  transition-delay: 0.05s;
}

.skill-card.skill-fade:nth-child(2) {
  transition-delay: 0.15s;
}

.skill-card.skill-fade:nth-child(3) {
  transition-delay: 0.25s;
}

.skill-card.skill-fade:nth-child(4) {
  transition-delay: 0.35s;
}


/* ========================================
   HOVER
======================================== */

.skill-card.skill-fade.show:hover {
  transform: translateY(-5px);
}

/* -------------------------------------------- */

/* =========================================================
   HEADER — DESKTOP FADE IN
========================================================= */

.header-inner {
  opacity: 0;
  animation: headerContentFade 0.8s ease 0.15s forwards;
}

@keyframes headerContentFade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .header-inner {
    opacity: 1;
    animation: none;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .header-inner {
    opacity: 1;
    animation: none;
  }
}


/* ----------------------------------------------- */